Merge pull request #74 from agentlab/issue-72-stencils-panel-usabilit…

…y-improvement GH-72 stencils panel usability improvement
agentlab · Jun 24, 2021 · dcecef0 · dcecef0
2 parents 19db0fd + 1fca2f7
commit dcecef0
Show file tree

Hide file tree

Showing 15 changed files with 921 additions and 611 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -0,0 +1,18 @@
+name: Publish to NPM
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: yarn install
+      - run: yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -29,7 +29,7 @@ connectReduxDevtools(require('remotedev'), rootStore);
 function App() {
   return (
     <Provider store={store}>
-      <MstContextProvider rootStore={rootStore}>
+      <MstContextProvider store={rootStore}>
         <GraphEditor
           viewDescrCollId={viewDescrCollConstr['@id']}
           viewDescrId={viewDescrs[0]['@id']}

diff --git a/package.json b/package.json
@@ -34,13 +34,13 @@
     "lint-staged": "lint-staged"
   },
   "peerDependencies": {
-    "@agentlab/ldkg-ui-react": ">=0.1.5",
-    "@agentlab/sparql-jsld-client": ">=5.0.0-rc.5",
+    "@agentlab/ldkg-ui-react": ">=0.1.8",
+    "@agentlab/sparql-jsld-client": ">=5.0.0-rc.8",
     "@ant-design/icons": ">=4.6.2",
     "@antv/x6": "1.23.1",
     "@antv/x6-react-components": "1.1.10",
     "@antv/x6-react-shape": "1.4.1",
-    "antd": ">=4.16.3",
+    "antd": ">=4.16.5",
     "immutable": ">=4.0.0-rc.12",
     "kiwi.js": ">=1.1.2",
     "lodash": ">=4.17.21",
@@ -55,42 +55,41 @@
     "uuid": ">=8.3.2",
     "yoga-layout-prebuilt": ">=1.10.0"
   },
-  "devDependencies": {
-    "@agentlab/ldkg-ui-react": "^0.1.5",
-    "@agentlab/sparql-jsld-client": "^5.0.0-rc.5",
-    "@ant-design/icons": "^4.6.2",
+  "dependencies": {
+    "@types/styled-components": "^5.1.10",
+    "@agentlab/ldkg-ui-react": "^0.1.8",
+    "@agentlab/sparql-jsld-client": "^5.0.0-rc.8",
     "@antv/x6": "1.23.1",
     "@antv/x6-react-components": "1.1.10",
     "@antv/x6-react-shape": "1.4.1",
+    "immutable": "^4.0.0-rc.12",
+    "kiwi.js": "^1.1.2",
+    "styled-components": "^5.3.0",
+    "uuid": "^8.3.2",
+    "yoga-layout-prebuilt": "^1.10.0"
+  },
+  "devDependencies": {
     "@babel/core": "^7.14.6",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-typescript": "^8.2.1",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/node-logger": "^6.2.9",
+    "@storybook/addon-actions": "^6.3.0",
+    "@storybook/addon-essentials": "^6.3.0",
+    "@storybook/addon-links": "^6.3.0",
+    "@storybook/addons": "^6.3.0",
+    "@storybook/node-logger": "^6.3.0",
     "@storybook/preset-ant-design": "^0.0.2",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.2.9",
+    "@storybook/react": "^6.3.0",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^26.0.23",
     "@types/jquery": "^3.5.5",
-    "@types/lodash": "^4.14.170",
-    "@types/lodash-es": "^4.17.4",
     "@types/mathjs": "^9.4.2",
     "@types/node": "^15.12.4",
-    "@types/rdf-js": "4.0.2",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
-    "@types/react-redux": "^7.1.16",
-    "@types/styled-components": "^5.1.10",
     "@typescript-eslint/eslint-plugin": "^4.28.0",
     "@typescript-eslint/parser": "^4.28.0",
-    "antd": "^4.16.3",
     "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",
     "cross-env": "^7.0.3",
@@ -110,30 +109,15 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^6.0.0",
-    "immutable": "^4.0.0-rc.12",
-    "jest": "^27.0.4",
+    "jest": "^27.0.5",
     "jest-watch-typeahead": "^0.6.4",
-    "kiwi.js": "^1.1.2",
     "lint-staged": "^11.0.0",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "mathjs": "^9.4.2",
-    "mobx": "^6.3.2",
-    "mobx-react-lite": "^3.2.0",
-    "mobx-state-tree": "^5.0.2",
-    "moment": "^2.29.1",
-    "mst-middlewares": "^5.0.1",
+    "mathjs": "^9.4.3",
     "npm-run-all": "^4.1.5",
     "plotly.js": "^1.58.4",
     "postcss": "^8.2.15",
     "prettier": "^2.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
     "react-plotly.js": "^2.5.1",
-    "react-redux": "^7.2.4",
-    "redux": "^4.1.0",
-    "remotedev": "^0.2.9",
     "rimraf": "^3.0.2",
     "rollup": "^2.52.2",
     "rollup-plugin-babel": "^4.4.0",
@@ -144,13 +128,10 @@
     "sass-loader": "10.1.1",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^2.0.0",
-    "styled-components": "^5.3.0",
     "ts-jest": "27.0.3",
     "tslib": "^2.3.0",
     "typescript": "^4.3.4",
-    "typescript-plugin-css-modules": "^3.4.0",
-    "uuid": "^8.3.2",
-    "yoga-layout-prebuilt": "^1.10.0"
+    "typescript-plugin-css-modules": "^3.4.0"
   },
   "lint-staged": {
     "{src,stories,test}/**/*.{js,jsx,ts,tsx,json,css,less,scss,md}": [

diff --git a/src/Editor.module.css b/src/Editor.module.css
@@ -29,8 +29,7 @@
 
 .stencil {
   width: 180px;
-  height: 70%;
-  border: 1px solid #f0f0f0;
+  height: 320px;
   position: relative;
 }
 

diff --git a/src/components/GraphEditor.tsx b/src/components/GraphEditor.tsx
@@ -7,13 +7,13 @@ import { MstContext } from '@agentlab/ldkg-ui-react';
 import { Graph } from './diagram/Graph';
 
 export const GraphEditor = observer(({ viewDescrCollId, viewDescrId, viewKindCollId, viewKindId }: any) => {
-  const { rootStore } = useContext(MstContext);
-  if (!rootStore) {
-    console.log('!rootStore', rootStore);
+  const { store } = useContext(MstContext);
+  if (!store) {
+    console.log('!store', store);
     return <Spin />;
   }
 
-  const collWithViewDescrsObs = rootStore.getColl(viewDescrCollId);
+  const collWithViewDescrsObs = store.getColl(viewDescrCollId);
   if (!collWithViewDescrsObs) {
     console.log('!collWithViewDescrsObs', viewDescrCollId);
     return <Spin />;
@@ -25,7 +25,7 @@ export const GraphEditor = observer(({ viewDescrCollId, viewDescrId, viewKindCol
     return <Spin />;
   }
 
-  const collWithViewKindsObs = rootStore.getColl(viewKindCollId);
+  const collWithViewKindsObs = store.getColl(viewKindCollId);
   if (!collWithViewKindsObs) {
     console.log('!collWithViewKindsObs', viewKindCollId);
     return <Spin />;
@@ -60,7 +60,7 @@ export const GraphEditor = observer(({ viewDescrCollId, viewDescrId, viewKindCol
 
   const dataSource = viewKind?.elements.reduce((acc, e) => {
     const dataUri = view.collsConstrs.filter((el) => el['@parent'] === e.resultsScope);
-    const graphData = rootStore.getColl(dataUri[0]);
+    const graphData = store.getColl(dataUri[0]);
     acc[e['@id']] = graphData?.data ? getSnapshot(graphData?.data) : [];
     return acc;
   }, {});

diff --git a/src/components/diagram/ConnectorTool.tsx b/src/components/diagram/ConnectorTool.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import { Graph, Markup } from '@antv/x6';
+import ReactDOM from 'react-dom';
+import { stencils } from './stencils';
 
 export const edgeExamples = [
   {
     label: {
       markup: [{ ...Markup.getForeignObjectMarkup() }],
       attrs: {
         fo: {
-          label: 'Default',
+          label: 'похожесть',
           width: 1,
           height: 1,
           x: 60,
@@ -19,6 +21,11 @@ export const edgeExamples = [
       line: {
         stroke: '#808080',
         strokeWidth: 1,
+        targetMarker: {
+          name: 'block',
+          strokeWidth: 1,
+          fill: '#808080',
+        },
       },
     },
   },
@@ -27,7 +34,7 @@ export const edgeExamples = [
       markup: [{ ...Markup.getForeignObjectMarkup() }],
       attrs: {
         fo: {
-          label: 'Association',
+          label: 'в категории',
           width: 1,
           height: 1,
           x: 60,
@@ -41,7 +48,7 @@ export const edgeExamples = [
         strokeWidth: 1,
         targetMarker: {
           name: 'block',
-          strokeWidth: 2,
+          strokeWidth: 1,
           open: true,
         },
       },
@@ -52,7 +59,7 @@ export const edgeExamples = [
       markup: [{ ...Markup.getForeignObjectMarkup() }],
       attrs: {
         fo: {
-          label: 'Inheritance',
+          label: 'подкатегория',
           width: 1,
           height: 1,
           x: 60,
@@ -66,7 +73,7 @@ export const edgeExamples = [
         strokeWidth: 1,
         targetMarker: {
           name: 'block',
-          strokeWidth: 2,
+          strokeWidth: 1,
           fill: 'white',
         },
       },
@@ -102,7 +109,7 @@ export const ConnectorTool = ({ edges = edgeExamples, onSelect = defOnSelect }:
     },
   };
 
-  const width = 100;
+  const width = 120;
   const height = 200;
   const itemHeight = 30;
 
@@ -115,6 +122,23 @@ export const ConnectorTool = ({ edges = edgeExamples, onSelect = defOnSelect }:
       width: width,
       height: height,
       interacting: false,
+      onEdgeLabelRendered: (args) => {
+        const { selectors, label } = args;
+        const Renderer = stencils['defaultLabel'];
+        const content = selectors.foContent as HTMLDivElement;
+        if (content) {
+          ReactDOM.render(
+            <Renderer
+              parent={selectors.fo}
+              label={label?.attrs?.fo.label}
+              onSave={() => {
+                /*do nothing*/
+              }}
+            />,
+            content,
+          );
+        }
+      },
     });
     edges.forEach((edge, idx) =>
       g.addEdge({

diff --git a/src/components/diagram/Graph.tsx b/src/components/diagram/Graph.tsx
@@ -17,7 +17,7 @@ import { viewDataArchArrows } from '../../stores/ViewArch';
 export const Graph = (props: any) => {
   const { view } = props;
   const options = view.options || {};
-  const { rootStore } = useContext(MstContext);
+  const { store } = useContext(MstContext);
   const [graph, setGraph] = React.useState<any>(null);
   const refContainer = React.useRef<any>();
   const refWrap = React.useRef<any>();
@@ -41,11 +41,11 @@ export const Graph = (props: any) => {
       viewKindStencils: props.viewKindStencils,
       minimapContainer,
       edgeConnectorRef,
-      rootStore,
+      store,
     });
     createGrid({ graph, view: props.view });
     addYogaSolver({ graph });
-    addNewData({ graph, data: props.dataSource, viewKindStencils: props.viewKindStencils, rootStore });
+    addNewData({ graph, data: props.dataSource, viewKindStencils: props.viewKindStencils, store });
     setGraph(graph);
     const resizeFn = () => {
       const { width, height } = getContainerSize();

diff --git a/src/components/diagram/graphCore.tsx b/src/components/diagram/graphCore.tsx
@@ -171,7 +171,7 @@ export const createGraph = ({
   viewKindStencils,
   minimapContainer,
   edgeConnectorRef,
-  rootStore,
+  store,
 }) => {
   try {
     Object.keys(viewKindStencils).forEach((e) => {
@@ -400,11 +400,11 @@ export const createGrid = ({ graph, view }) => {
   }
 };
 
-export const addNewData = ({ graph, data, viewKindStencils, rootStore }) => {
+export const addNewData = ({ graph, data, viewKindStencils, store }) => {
   const stash = {};
   for (const key in data) {
     data[key].forEach((e: any) => {
-      if (!addGraphData(graph, e, key, viewKindStencils, rootStore)) {
+      if (!addGraphData(graph, e, key, viewKindStencils, store)) {
         if (stash[key]) {
           stash[key].push(e);
         } else {
@@ -415,12 +415,12 @@ export const addNewData = ({ graph, data, viewKindStencils, rootStore }) => {
   }
   for (const key in stash) {
     stash[key].forEach((e: any) => {
-      addGraphData(graph, e, key, viewKindStencils, rootStore);
+      addGraphData(graph, e, key, viewKindStencils, store);
     });
   }
 };
 
-const addGraphData = (graph, data, key, viewKindStencils, rootStore) => {
+const addGraphData = (graph, data, key, viewKindStencils, store) => {
   const stencilId = data.stencil || key;
   const Renderer = StencilEditor({ options: viewKindStencils[stencilId] });
   switch (data['@type']) {
@@ -468,7 +468,7 @@ const addGraphData = (graph, data, key, viewKindStencils, rootStore) => {
 /**
  * function @deprecated
  */
-export const addNewParentNodes = ({ graph, nodesData, rootStore }) => {
+export const addNewParentNodes = ({ graph, nodesData, store }) => {
   nodesData.forEach((data: any) => {
     const Renderer = stencils[data.stencil || 'rm:RectWithText'];
     const node = nodeFromData({ data, Renderer, shape: data.stencil });
@@ -479,7 +479,7 @@ export const addNewParentNodes = ({ graph, nodesData, rootStore }) => {
 /**
  * function @deprecated
  */
-export const addNewChildNodes = ({ graph, nodesData, rootStore }) => {
+export const addNewChildNodes = ({ graph, nodesData, store }) => {
   nodesData.forEach((data: any) => {
     const Renderer = stencils[data.stencil];
     const node = nodeFromData({ data, Renderer, shape: data.stencil });