WIP VOWL notation for owl

CHANGELOG.md

@@ -5,6 +5,44 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Latest]
+## [0.8.0]
+### Added
+- Nesting (grouping) elements on diagram using `groupBy` option and `<EmbeddedLayer />`
+element in custom templates.
+- Buttons to toggle visiblility of left and right panels.
+- `renderTo` function to create Workspace using compiled in bundled mode library.
+- Separate library bundle for IE11 compatibility (when compile with SUPPORT_IE flag).
+
+### Changed
+- **[Breaking]** Replaced JointJS rendering engine with our own React-based
+implementation.
+- **[Breaking]** Replaced Backbone property and event system with native class
+properties and composition-based event emitter implementation.
+- **[Breaking]** Generate placeholder data only when rendering, e.g. `Element.data.label`
+will be empty until element info will load.
+- **[Breaking]** Split up `isViewOnly` option into `hideToolbar`, `hidePanels`
+and `hideHalo`.
+- Removed default "checkboard" background in the diagram area.
+- Limit maximum number of connected elements in Connection menu to 100.
+
+### Fixed
+- Drag and drop from class tree in Safari.
+- Missing "All" entry in Connections menu when there are two connections with
+the same ID in the list.
+- Rewrite `https://` IRIs to `http://` when adding an element to diagram.
+
+## [0.7.0]
+### Changed
+- **[Breaking]** Optimize `SparqlDataProvider`: change `elementInfoQuery` from SELECT to
+CONSTRUCT query, extract `linkTypesOf` statistics into separate `linkTypesOfStatsQuery`.
+- **[Breaking]** Throw exception instead of returning null or undefined when fetching
+error happens in `RdfDataProvider`.
+- Simplify overriding default toolbar with a custom one by providing default
+callbacks in props.
+
+### Fixed
+- `stroke-dasharray` style override for link labels.
+- Error when RDF data storage returns `undefined` statements.
 
 ## [0.6.1] - 2017-10-17
 ### Added
@@ -241,6 +279,8 @@ info loaded from `DataProvider`.
 - Ontodia published on GitHub as OSS project.
 
 [Latest]: https://github.com/ontodia-org/ontodia/compare/v0.6.1...HEAD
+[0.8.0]: https://github.com/ontodia-org/ontodia/compare/v0.8.0...v0.6.1
+[0.7.0]: https://github.com/ontodia-org/ontodia/compare/v0.7.0...v0.6.1
 [0.6.1]: https://github.com/ontodia-org/ontodia/compare/v0.6.0...v0.6.1
 [0.6.0]: https://github.com/ontodia-org/ontodia/compare/v0.5.3...v0.6.0
 [0.5.3]: https://github.com/ontodia-org/ontodia/compare/v0.5.2...v0.5.3

README.md

@@ -19,7 +19,7 @@ It was designed to visualize RDF data sets in particular, but could be tailored
 ## How to try it?
 
 You can: 
-- Open ontodia.org [demo diagram](http://app.ontodia.org/diagram?sharedDiagram=49689f29-82bc-405d-b5f6-33507f1c1444) and navigate through demo data set
+- Open ontodia.org [demo diagram](http://app.ontodia.org/diagram?sharedDiagram=3vi9gi6akh9agrs9a7k7i14huo) and navigate through demo data set
 - Create an account at [ontodia.org](http://app.ontodia.org/register), browse through sample diagrams, download your rdf file or point to your sparql endpoint to build diagrams over your data
 - Follow developer tutorials at [developer documentation page](https://github.com/ontodia-org/ontodia/wiki)
 

package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "d3-color": "~1.0.2",
+    "file-saverjs": "~1.3.6",
     "intro.js": "1.1.1",
     "lodash": "~4.17.4",
     "n3": "~0.10.0",
@@ -53,16 +54,18 @@
     "@types/lodash": "4.14.63",
     "@types/react": "0.14.55",
     "@types/react-dom": "0.14.19",
+    "canvg-fixed": "1.0.0",
     "css-loader": "0.23.1",
     "dts-bundle": "0.7.2",
+    "es6-promise": "4.2.2",
     "exports-loader": "0.6.3",
     "expose-loader": "0.7.1",
     "file-loader": "0.8.5",
     "html-webpack-plugin": "2.22.0",
+    "jquery": "2.2.4",
     "json-loader": "0.5.4",
     "jstree": "3.2.1",
-    "jquery": "2.2.4",
-    "node-sass": "3.10.1",
+    "node-sass": "4.7.2",
     "raw-loader": "0.5.1",
     "rdf-parser-jsonld": "0.3.3",
     "rdf-parser-n3": "0.3.0",
@@ -72,6 +75,7 @@
     "sass-loader": "4.0.2",
     "style-loader": "0.13.1",
     "ts-loader": "1.3.3",
+    "tslib": "1.9.0",
     "tslint": "4.5.1",
     "typescript": "2.3.2",
     "url-loader": "0.5.7",

src/emptyModule.ts

@@ -0,0 +1,2 @@
+/** Empty module for conditional compilation. */
+export default undefined;

src/examples/demoOwl.ts

@@ -0,0 +1,64 @@
+import { createElement, ClassAttributes } from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Workspace, WorkspaceProps, DemoDataProvider, LinkTemplate, VowlTemplateBundle } from '../index';
+
+import { onPageLoad, tryLoadLayoutFromLocalStorage, saveLayoutToLocalStorage } from './common';
+
+const CUSTOM_LINK_TEMPLATE_SUBCLASSOF: LinkTemplate = {
+    renderLink: () => ({
+        connection: {
+            stroke: 'black',
+            'stroke-width': 2,
+            'stroke-dasharray': '5,5',
+        },
+        label: {
+            attrs: { text: { fill: 'black' } },
+        },
+    }),
+};
+const CUSTOM_LINK_TEMPLATE: LinkTemplate = {
+    renderLink: () => ({
+        connection: {
+            stroke: 'black',
+            'stroke-width': 2,
+        },
+        label: {
+            attrs: { text: { fill: 'black' } },
+        },
+    }),
+};
+
+function onWorkspaceMounted(workspace: Workspace) {
+    if (!workspace) { return; }
+
+    const layoutData = tryLoadLayoutFromLocalStorage();
+    workspace.getModel().importLayout({
+        layoutData,
+        dataProvider: new DemoDataProvider(),
+        validateLinks: true,
+    });
+}
+
+const props: WorkspaceProps & ClassAttributes<Workspace> = {
+    ref: onWorkspaceMounted,
+    onSaveDiagram: workspace => {
+        const { layoutData } = workspace.getModel().exportLayout();
+        window.location.hash = saveLayoutToLocalStorage(layoutData);
+        window.location.reload();
+    },
+    viewOptions: {
+        linkTemplateResolvers: [
+            type => {
+                if (type.indexOf('subClassOf') !== -1) {
+                    return CUSTOM_LINK_TEMPLATE_SUBCLASSOF;
+                } else {
+                    return CUSTOM_LINK_TEMPLATE;
+                }
+            },
+        ],
+        templatesResolvers: VowlTemplateBundle,
+    },
+};
+
+onPageLoad(container => ReactDOM.render(createElement(Workspace, props), container));

src/examples/rdf.ts

@@ -14,24 +14,28 @@ const data = require<string>('raw-loader!./resources/testData.ttl');
 function onWorkspaceMounted(workspace: Workspace) {
     if (!workspace) { return; }
 
+    const dataProvider = new RDFDataProvider({
+        data: [
+            {
+                content: data,
+                type: 'text/turtle',
+                fileName: 'testData.ttl'
+            },
+        ],
+        acceptBlankNodes: false,
+        dataFetching: false,
+        parsers: {
+            'application/rdf+xml': new RdfXmlParser(),
+            'application/ld+json': new JsonLdParser(),
+            'text/turtle': new N3Parser(),
+        },
+    });
+
     const layoutData = tryLoadLayoutFromLocalStorage();
     workspace.getModel().importLayout({
         layoutData,
         validateLinks: true,
-        dataProvider: new RDFDataProvider({
-            data: [
-                {
-                    content: data,
-                    type: 'text/turtle',
-                },
-            ],
-            dataFetching: false,
-            parsers: {
-                'text/turtle': new N3Parser(),
-                'application/rdf+xml': new RdfXmlParser(),
-                'application/ld+json': new JsonLdParser(),
-            },
-        }),
+        dataProvider,
     });
 }