From 0687372e1202b05f85bfecdbcef177fc193bbae7 Mon Sep 17 00:00:00 2001 From: Artyom Date: Wed, 8 Sep 2021 02:29:48 +0300 Subject: [PATCH 1/4] [FIX] fixed graph size behavior --- src/components/diagram/Graph.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/diagram/Graph.tsx b/src/components/diagram/Graph.tsx index 9b20424..358ca77 100644 --- a/src/components/diagram/Graph.tsx +++ b/src/components/diagram/Graph.tsx @@ -68,6 +68,9 @@ export const Graph = ({ graph.resize(width, height); }; resizeFn(); + const resizeObserver = new ResizeObserver((entries) => { + resizeFn(); + }); graph.selection.widget.collection.on('updated', (e) => { const nodeIds = graph.selection.widget.collection.cells.map((c) => { return { id: c.id, ...c.store.data.subject }; @@ -76,10 +79,12 @@ export const Graph = ({ }); graph.enableRubberband(); window.addEventListener('resize', resizeFn); + resizeObserver.observe(refWrap.current); // dispose attached HTML objects return () => { graph.dispose(); window.removeEventListener('resize', resizeFn); + resizeObserver.disconnect(); }; }, []); @@ -143,7 +148,6 @@ export const Graph = ({ Load More */} -
Date: Thu, 9 Sep 2021 20:32:56 +0300 Subject: [PATCH 2/4] [bug] GH-99 GraphRenderer Two Stories --- src/components/graphRenderer.tsx | 123 +++++++---- stories/GraphRenderer.stories.tsx | 353 ++++++++++++++++++++++++++++-- 2 files changed, 414 insertions(+), 62 deletions(-) diff --git a/src/components/graphRenderer.tsx b/src/components/graphRenderer.tsx index 487d68c..2baf8c5 100644 --- a/src/components/graphRenderer.tsx +++ b/src/components/graphRenderer.tsx @@ -11,6 +11,7 @@ import { import { getSnapshot } from 'mobx-state-tree'; import { observer } from 'mobx-react-lite'; import { Graph } from './diagram/Graph'; +import { Spin } from 'antd'; export const graphRendererTester: RankedTester = rankWith(2, uiTypeIs('aldkg:DiagramEditorVKElement')); export const testTester: RankedTester = rankWith(2, uiTypeIs('test')); @@ -26,63 +27,89 @@ export const GraphRenderer = observer((props) => { props, store, ); + console.log('GraphRenderer - start'); + // ensure that we render Graph only after all data is not empty + let isAllNotEmpty = true; + const elements = findElementsRecursive(viewDescr, viewKindElement.elements, (params: any) => { + const collIriOverride = params[2]; ////[id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] + if (!store.getColl(collIriOverride) || store.getColl(collIriOverride)?.data.length <= 0) { + isAllNotEmpty = false; + console.log('GraphRenderer - data - empty', collIriOverride); + return true; + } + return false; + }); - const options = viewKindElement.options || {}; - const regStencils = (stencils, arr) => { - arr.forEach((e) => { + if (!isAllNotEmpty) { + console.log('GraphRenderer - data != OK'); + return ; + } else { + console.log('GraphRenderer - data = OK'); + const options = viewKindElement.options || {}; + const regStencils = (stencils, arr) => { + arr.forEach((e) => { + if (e.elements) { + regStencils(stencils, e.elements); + } + if (e['@type'] === 'aldkg:DiagramNodeVKElement') { + stencils[e['@id']] = e; + } + }); + }; + const stencilPanel: any = {}; + const viewKindStencils = ((viewKindElement as any)?.elements || []).reduce((acc, e) => { if (e.elements) { - regStencils(stencils, e.elements); - } - if (e['@type'] === 'aldkg:DiagramNodeVKElement') { - stencils[e['@id']] = e; + regStencils(acc, e.elements); } - }); - }; - const stencilPanel: any = {}; - const viewKindStencils = ((viewKindElement as any)?.elements || []).reduce((acc, e) => { - if (e.elements) { - regStencils(acc, e.elements); - } - acc[e['@id']] = e; - stencilPanel[e['@id']] = e; - return acc; - }, {}); + acc[e['@id']] = e; + stencilPanel[e['@id']] = e; + return acc; + }, {}); - const dataSource = ((viewKindElement as any)?.elements || []).reduce((acc, e) => { - if (e.resultsScope) { - const dataUri = (viewDescr as any).collsConstrs.filter((el) => compareByIri(el['@parent'], e.resultsScope)); - if (dataUri.length > 0) { - const graphData = store.getColl(dataUri[0]); - acc[e['@id']] = graphData?.data ? getSnapshot(graphData?.data) : []; - } else { - console.log('No data for element', e); + const dataSource = ((viewKindElement as any)?.elements || []).reduce((acc, e) => { + if (e.resultsScope) { + const dataUri = (viewDescr as any).collsConstrs.filter((el) => compareByIri(el['@parent'], e.resultsScope)); + if (dataUri.length > 0) { + const graphData = store.getColl(dataUri[0]); + acc[e['@id']] = graphData?.data ? getSnapshot(graphData?.data) : []; + } else { + console.log('No data for element', e); + } } - } - return acc; - }, {}); - const scope = viewKindElement.resultsScope; - const withConnections = options.connections; - const onChange = (data: any) => { - if (data) { - store.setSelectedData(scope, data); - withConnections && store.editConn(withConnections, data[0]); - } - }; + return acc; + }, {}); + const scope = viewKindElement.resultsScope; + const withConnections = options.connections; + const onSelect = (data: any) => { + if (data) { + store.setSelectedData(scope, data); + withConnections && store.editConn(withConnections, data[0]); + } + }; - return ( - - ); + return ( + + ); + } }); export const graphRenderers = [ { tester: graphRendererTester, renderer: GraphRenderer }, { tester: testTester, renderer: Test }, ]; + +function findElementsRecursive(viewDescr, array: any[], condition: any): any[] { + const elements = array.map((a) => { + const params = processViewKindOverride({ viewKindElement: a, viewDescr }, undefined); + return [...(condition(params) ? [a] : []), ...findElementsRecursive(viewDescr, a.elements || [], condition).flat()]; + }); + return elements.flat(); +} diff --git a/stories/GraphRenderer.stories.tsx b/stories/GraphRenderer.stories.tsx index 345f798..cc77e99 100644 --- a/stories/GraphRenderer.stories.tsx +++ b/stories/GraphRenderer.stories.tsx @@ -20,13 +20,302 @@ import { import { MstDiagramNodeVKElement, MstDiagramEdgeVKElement } from '../src/stores/MstDiagramEditorSchemas'; import { graphRenderers } from '../src/components/graphRenderer'; +import '@antv/x6/dist/x6.css'; import '../src/index.css'; import '../src/App.css'; /** - * Mktp Cards ViewKinds + * Mktp Graph + SplitPane ViewKinds */ -const mktpViewKinds = [ +const mktpGraphViewKinds = [ + { + '@id': 'mktp:_8g34sKh', + '@type': 'aldkg:ViewKind', + collsConstrs: [ + // Categories + { + '@id': 'mktp:_kwe56Hgs', + '@type': 'aldkg:CollConstr', + entConstrs: [ + { + '@id': 'mktp:_aS57dj', + '@type': 'aldkg:EntConstr', + schema: 'aldkg:UsedInDiagramAsRootNodeShape', + conditions: { + '@id': 'mktp:_Sdf72d', + '@type': 'aldkg:EntConstrCondition', + subject: '?eIri1', + }, + }, + { + '@id': 'mktp:_3Kjd6sF', + '@type': 'aldkg:EntConstr', + schema: 'hs:CategoryShape', + }, + ], + }, + // Products + { + '@id': 'mktp:_58DfdH', + '@type': 'aldkg:CollConstr', + entConstrs: [ + { + '@id': 'mktp:_oG67s', + '@type': 'aldkg:EntConstr', + schema: 'aldkg:UsedInDiagramAsRootNodeShape', + conditions: { + '@id': 'mktp:_64G7Fd', + '@type': 'aldkg:EntConstrCondition', + subject: '?eIri1', + }, + }, + { + '@id': 'mktp:_8Fd5S', + '@type': 'aldkg:EntConstr', + schema: 'mktp:ProductShape', + }, + ], + }, + // ProductCards + { + '@id': 'mktp:_lf68D7', + '@type': 'aldkg:CollConstr', + entConstrs: [ + { + '@id': 'mktp:_q8H6d', + '@type': 'aldkg:EntConstr', + schema: 'aldkg:UsedInDiagramAsRootNodeShape', + conditions: { + '@id': 'mktp:_90Hgs6', + '@type': 'aldkg:EntConstrCondition', + subject: '?eIri1', + }, + }, + { + '@id': 'mktp:_4hg5Df', + '@type': 'aldkg:EntConstr', + schema: 'hs:ProductCardShape', + }, + ], + }, + // SubcatInCatLink + { + '@id': 'mktp:_js5Jdf', + '@type': 'aldkg:CollConstr', + entConstrs: [ + { + '@id': 'mktp:_Sdf73k', + '@type': 'aldkg:EntConstr', + schema: 'aldkg:UsedInDiagramAsArrowShape', + conditions: { + '@id': 'mktp:_9kJgd8', + '@type': 'aldkg:EntConstrCondition', + subject: '?eIri1', + }, + }, + { + '@id': 'mktp:_p9Dsk6', + '@type': 'aldkg:CollConstr', + schema: 'hs:SubcatInCatLinkShape', + }, + ], + }, + // CardInCatLink + { + '@id': 'mktp:_fS67d', + '@type': 'aldkg:CollConstr', + entConstrs: [ + { + '@id': 'mktp:_kf578s', + '@type': 'aldkg:EntConstr', + schema: 'aldkg:UsedInDiagramAsArrowShape', + conditions: { + '@id': 'mktp:_9kJgd8', + '@type': 'aldkg:EntConstrCondition', + subject: '?eIri1', + }, + }, + { + '@id': 'mktp:_o6sD6f', + '@type': 'aldkg:CollConstr', + schema: 'hs:CardInCatLinkShape', + }, + ], + }, + // CardInProdLink + { + '@id': 'mktp:_ld98Sdg', + '@type': 'aldkg:CollConstr', + entConstrs: [ + { + '@id': 'mktp:_5Sd7fG', + '@type': 'aldkg:EntConstr', + schema: 'aldkg:UsedInDiagramAsArrowShape', + conditions: { + '@id': 'mktp:_67Aqw6D', + '@type': 'aldkg:EntConstrCondition', + subject: '?eIri1', + }, + }, + { + '@id': 'mktp:_n90D6sf', + '@type': 'aldkg:CollConstr', + schema: 'mktp:CardInProdLinkShape', + }, + ], + }, + ], + elements: [ + { + '@id': 'mktp:_45hfg93', + '@type': 'aldkg:DiagramEditorVKElement', + elements: [ + /** + * Nodes + */ + { + '@id': 'mktp:CategoryStencil', // stencil should be registered under this @id + '@type': 'aldkg:DiagramNodeVKElement', + protoStencil: 'aldkg:CardNode', //reference to the base stencil which should be customized additionally with 'style' and registered under the different id from @id property + resultsScope: 'mktp:_kwe56Hgs', + // img, title, description are the fields from Cart stencil + img: { + fallback: + 'data:image/png;base64,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', + scope: 'subject/imageUrl', + }, + title: { + default: 'Категория', + scope: 'subject/name', + }, + description: { + scope: 'subject/description', + }, + // style for the root DIV for the Cart stencil + style: { + borderRight: '4px solid #582dcf', + boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.4)', + // child embedding should be disabled here + }, + paletteOrder: 0, // sorting order for stencils palette + }, + { + '@id': 'mktp:ProductStencil', + '@type': 'aldkg:DiagramNodeVKElement', + protoStencil: 'aldkg:CardNode', + resultsScope: 'mktp:_58DfdH', + img: { + fallback: + 'data:image/png;base64,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', + scope: 'subject/imageUrl', + }, + title: { + default: 'Продукт', + scope: 'subject/title', + }, + description: { + scope: 'subject/description', + }, + style: { + borderRight: '4px solid #832dcf', + boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.4)', + // child embedding should be disabled here + }, + paletteOrder: 1, + }, + { + '@id': 'mktp:ProductCardStencil', + '@type': 'aldkg:DiagramNodeVKElement', + protoStencil: 'aldkg:CardNode', + resultsScope: 'mktp:_lf68D7', + img: { + fallback: + 'data:image/png;base64,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', + scope: 'subject/imageUrl', + }, + title: { + default: 'ProductCard', + scope: 'subject/name', + }, + description: { + scope: 'subject/description', + }, + style: { + borderRight: '4px solid #b42dcf', + boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.4)', + // child embedding should be disabled here + }, + paletteOrder: 2, + }, + /** + * Edges (arrows) + */ + { + '@id': 'mktp:SubcategoryArrowStencil', + '@type': 'aldkg:DiagramEdgeVKElement', + protoStencil: 'aldkg:CardNode', + resultsScope: 'mktp:_js5Jdf', + title: 'подкатегория', + description: 'Подкатегория в категории', + paletteOrder: 4, + // styles for targetMarker + line: { + stroke: '#808080', + strokeWidth: 1, + targetMarker: { + name: 'block', + strokeWidth: 1, + fill: 'white', + }, + }, + }, + { + '@id': 'mktp:CardToCategoryArrowStencil', + '@type': 'aldkg:DiagramEdgeVKElement', + protoStencil: 'aldkg:CardNode', + resultsScope: 'mktp:_fS67d', + title: 'в категории', + description: 'Карточка товара состоит в категории', + paletteOrder: 3, + line: { + stroke: '#808080', + strokeWidth: 1, + targetMarker: { + name: 'block', + strokeWidth: 1, + open: true, + }, + }, + }, + { + '@id': 'mktp:CardToProductArrowStencil', + '@type': 'aldkg:DiagramEdgeVKElement', + protoStencil: 'aldkg:CardNode', + resultsScope: 'mktp:_ld98Sdg', + title: 'похожесть', + description: 'Карточка похожего товара объединена по сходству в один товар', + paletteOrder: 4, + // styles for targetMarker + line: { + stroke: '#808080', + strokeWidth: 1, + targetMarker: { + name: 'block', + strokeWidth: 1, + fill: '#808080', + }, + }, + }, + ], + }, + ], + }, +]; + +/** + * Mktp Graph + SplitPane ViewKinds + */ +const mktpGraphSplitPaneViewKinds = [ { '@id': 'mktp:_8g34sKh', '@type': 'aldkg:ViewKind', @@ -184,6 +473,10 @@ const mktpViewKinds = [ '@id': 'mktp:_934Jfg7', '@type': 'aldkg:SplitPaneLayout', options: { + style: { + width: '100%', + height: '100%', + }, defaultSize: { 'mktp:_45hfg93': '70%', 'mktp:_45hfgll': '30%', @@ -533,11 +826,35 @@ const mktpViewDescrs = [ /** * Collections Configs Data */ -const additionalColls: CollState[] = [ +const additionalGraphColls: CollState[] = [ // ViewKinds Collection { constr: viewKindCollConstr, - data: mktpViewKinds, + data: mktpGraphViewKinds, + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs + }, + }, + // ViewDescrs Collection + { + constr: viewDescrCollConstr, + data: mktpViewDescrs, + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server + // for viewDescrs.collConstrs (it loads lazily -- after the first access) + }, + }, +]; + +const additionalGraphSplitPaneColls: CollState[] = [ + // ViewKinds Collection + { + constr: viewKindCollConstr, + data: mktpGraphSplitPaneViewKinds, opt: { updPeriod: undefined, lastSynced: moment.now(), @@ -562,7 +879,7 @@ export default { component: Form, } as Meta; -const Template: Story = (args: any) => { +const Template: Story = ({ viewDescrCollId, viewDescrId, additionalColls }) => { const renderers = [...antdLayoutRenderers, ...graphRenderers, ...antdControlRenderers]; registerMstViewKindSchema(MstDiagramNodeVKElement); registerMstViewKindSchema(MstDiagramEdgeVKElement); @@ -575,18 +892,26 @@ const Template: Story = (args: any) => { // eslint-disable-next-line @typescript-eslint/no-var-requires connectReduxDevtools(require('remotedev'), rootStore); return ( - - -
-
-
- - +
+ + + + + +
); }; -export const RemoteData = Template.bind({}); -RemoteData.args = { +export const RemoteDataGraph = Template.bind({}); +RemoteDataGraph.args = { + viewDescrCollId: viewDescrCollConstr['@id'], + viewDescrId: mktpViewDescrs[0]['@id'], + additionalColls: additionalGraphColls, +}; + +export const RemoteDataGraphSplitPane = Template.bind({}); +RemoteDataGraphSplitPane.args = { viewDescrCollId: viewDescrCollConstr['@id'], viewDescrId: mktpViewDescrs[0]['@id'], + additionalColls: additionalGraphSplitPaneColls, }; From 41d32ce7d17797831c339d447e54c0eb43d985fb Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Wed, 22 Sep 2021 13:36:20 +0300 Subject: [PATCH 3/4] [refactor] GH-99 Fix optional viewKindElement.elements --- src/components/graphRenderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/graphRenderer.tsx b/src/components/graphRenderer.tsx index 2baf8c5..486f2ae 100644 --- a/src/components/graphRenderer.tsx +++ b/src/components/graphRenderer.tsx @@ -30,7 +30,7 @@ export const GraphRenderer = observer((props) => { console.log('GraphRenderer - start'); // ensure that we render Graph only after all data is not empty let isAllNotEmpty = true; - const elements = findElementsRecursive(viewDescr, viewKindElement.elements, (params: any) => { + const elements = findElementsRecursive(viewDescr, viewKindElement.elements || [], (params: any) => { const collIriOverride = params[2]; ////[id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] if (!store.getColl(collIriOverride) || store.getColl(collIriOverride)?.data.length <= 0) { isAllNotEmpty = false; From 95bac7ebd305ed25df35220b5b22634eb4c1a74f Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Wed, 3 Nov 2021 13:38:39 +0300 Subject: [PATCH 4/4] [chore] SonarCloud config --- .sonarcloud.properties | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 .sonarcloud.properties diff --git a/.sonarcloud.properties b/.sonarcloud.properties new file mode 100644 index 0000000..61ad04c --- /dev/null +++ b/.sonarcloud.properties @@ -0,0 +1,18 @@ +# Path to sources +sonar.sources=src +#sonar.exclusions= +#sonar.inclusions= + +# Path to tests +sonar.tests=test +#sonar.test.exclusions= +#sonar.test.inclusions= + +# Source encoding +sonar.sourceEncoding=UTF-8 + +# Exclusions for copy-paste detection +sonar.cpd.exclusions=stories,test + +sonar.language=ts +sonar.typescript.tsconfigPath=tsconfig.json