diff --git a/package.json b/package.json index 732b28a..a553109 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ }, "peerDependencies": { "@agentlab/ldkg-ui-react": ">=0.1.12", - "@agentlab/sparql-jsld-client": "^5.0.0-rc.11", + "@agentlab/sparql-jsld-client": "^5.0.0-rc.12", "@ant-design/charts": "1.1.3", "@ant-design/icons": ">=4.6.4", "@antv/data-set": ">=0.11.8", @@ -48,7 +48,7 @@ }, "dependencies": { "@agentlab/ldkg-ui-react": "^0.1.12", - "@agentlab/sparql-jsld-client": "^5.0.0-rc.11", + "@agentlab/sparql-jsld-client": "^5.0.0-rc.12", "@ant-design/charts": "^1.1.20", "@ant-design/icons": "^4.6.4", "@antv/data-set": "^0.11.8", diff --git a/src/DataRenderer/index.tsx b/src/DataRenderer/index.tsx index 462676b..34a5455 100644 --- a/src/DataRenderer/index.tsx +++ b/src/DataRenderer/index.tsx @@ -42,6 +42,7 @@ export const ChartRenderer = observer((props): JSX.Element => { }); const [views, setViews] = useState([]); const [viewConfig, setViewConfig] = useState(); + const [isDataReady, setIsDataReady] = useState(false); function buildView(element: any) { if (isStateTreeNode(element)) element = getSnapshot(element); @@ -112,26 +113,23 @@ export const ChartRenderer = observer((props): JSX.Element => { //TODO: It should be refactored to support lazy loading and should pick up data change with a help of observer HOC // today data change is lost into the deeper data map functions - const elements = findElementsRecursive(viewDescr.elements, (el: IViewDescrElement) => el.resultsScope !== undefined); - let isAllNotEmpty = true; - elements.forEach((e: any) => { - if (!store.getColl(e.resultsScope) || store.getColl(e.resultsScope)?.data.length <= 0) { - isAllNotEmpty = false; - console.log('ChartRenderer - data - empty', e.resultsScope); - } - }); - if (isAllNotEmpty) { - console.log('ChartRenderer - data = OK'); - if (!viewConfig && viewDescrElement && viewKindElement) { - const viewsConfig = viewDescrElement?.elements?.map((el: any) => { - const view = buildView(el); - return view.views ? view : { id: el['@id'], views: [view] }; - }); - setViewConfig(viewsConfig?.length === 1 ? viewsConfig[0] : viewsConfig); + useEffect(() => { + if (isDataReady) { + console.log('ChartRenderer - data = OK'); + if (viewDescrElement && viewKindElement) { + const viewsConfig = viewDescrElement?.elements?.map((el: any) => { + const view = buildView(el); + return view.views ? view : { id: el['@id'], views: [view] }; + }); + console.log('setViewConfig'); + setViewConfig(viewsConfig?.length === 1 ? viewsConfig[0] : viewsConfig); + } else { + console.log('did not setViewConfig', { viewConfig, viewDescrElement, viewKindElement }); + } + } else { + console.log('ChartRenderer - data != OK'); } - } else { - console.log('ChartRenderer - data != OK'); - } + }, [isDataReady, store, viewDescrElement, viewKindElement]); // Data & Mapping useEffect(() => { @@ -150,8 +148,26 @@ export const ChartRenderer = observer((props): JSX.Element => { if (viewDescrElement && viewKindElement && viewConfig) { console.log('call loadViews'); loadViews(viewDescrElement); + } else { + console.log('did not call loadViews', { viewDescrElement, viewKindElement, viewConfig }); } }, [store, viewConfig, viewDescrElement, viewKindElement]); + + const elements = findElementsRecursive(viewDescr.elements, (el: IViewDescrElement) => el.resultsScope !== undefined); + let isAllNotEmpty = true; + elements.forEach((e: any) => { + if (!store.getColl(e.resultsScope) || store.getColl(e.resultsScope)?.data.length <= 0) { + isAllNotEmpty = false; + console.log('ChartRenderer - data - empty', e.resultsScope); + } + }); + if (isAllNotEmpty) console.log('ChartRenderer - data = OK 1', { isAllNotEmpty, isDataReady }); + if (isAllNotEmpty !== isDataReady) { + console.log('setIsDataReady', { isAllNotEmpty, isDataReady }); + setIsDataReady(isAllNotEmpty); + } + if (!isAllNotEmpty) return ; + return ( }> {views.map((item: { View: any; key: any; config: any }) => { diff --git a/stories/TreeTableChart.stories.tsx b/stories/TreeTableChart.stories.tsx index 45fb750..f84703c 100644 --- a/stories/TreeTableChart.stories.tsx +++ b/stories/TreeTableChart.stories.tsx @@ -31,6 +31,7 @@ import React from 'react'; import { Provider } from 'react-redux'; import { chartsRenderers } from '../src'; import { MstBoxPlotChartVKElement, MstTimeSeriesChartVKElement } from '../src/store/MstViewElements'; +import { boxPlotBucketShape, observationShape } from '../src/store/shapes'; const buildCustomTooltip = (property: string) => (title: any, items: any) => { const data = items[0]?.data || {}; @@ -53,11 +54,20 @@ const Template: Story = ({ additionalColls, viewDescrId, viewDescrCollId }: any) registerMstViewKindSchema(MstTimeSeriesChartVKElement); registerMstViewKindSchema(MstBoxPlotChartVKElement); + const rootModelState = { + ...rootModelInitialState, + schemas: { + json: { + [observationShape['@id']]: observationShape, + [boxPlotBucketShape['@id']]: boxPlotBucketShape, + }, + }, + }; const client = new SparqlClientImpl( 'https://rdf4j.agentlab.ru/rdf4j-server', 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces', ); - const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls); + const rootStore = createUiModelFromState('mktp-fed', client, rootModelState, additionalColls); const store: any = asReduxStore(rootStore); // eslint-disable-next-line @typescript-eslint/no-var-requires connectReduxDevtools(require('remotedev'), rootStore); @@ -170,6 +180,7 @@ const viewKindsCats = [ '@type': 'aldkg:Array', resultsScope: 'mktp:ProductCards_in_Category_Coll', options: { + connections: [{ to: 'mktp:_u8Yg83', by: 'product' }], draggable: true, resizeableHeader: true, height: 'all-empty-space', @@ -414,7 +425,7 @@ const viewDescrsCats = [ conditions: { '@id': 'mktp:_u8Yg83', // machine-generated random UUID '@type': 'aldkg:EntConstrCondition', - product: 'https://www.wildberries.ru/catalog/9485114/detail.aspx', + product: undefined, }, }, ], diff --git a/yarn.lock b/yarn.lock index 502ab93..4a4858b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -56,17 +56,17 @@ utility-types "^3.10.0" uuid62 "^1.0.1" -"@agentlab/sparql-jsld-client@^5.0.0-rc.11": - version "5.0.0-rc.11" - resolved "https://registry.yarnpkg.com/@agentlab/sparql-jsld-client/-/sparql-jsld-client-5.0.0-rc.11.tgz#62c91ea8c79403cf5ac33eeac4c750e9849ada5b" - integrity sha512-F627RbXiAKZxPPekKGykzA9/I3CpQEgFgIjGIqs52tW4A6lKYeKJjYJaa5IObhJcdx4AeThGpP+jqqGGPJk/Vg== +"@agentlab/sparql-jsld-client@^5.0.0-rc.12": + version "5.0.0-rc.12" + resolved "https://registry.yarnpkg.com/@agentlab/sparql-jsld-client/-/sparql-jsld-client-5.0.0-rc.12.tgz#9e575f9e6e7c9e39c246f411194470e9f4438314" + integrity sha512-mHYvlMohQ6+PegbciLVm6dcUJhogT5g81+hd284ooOpQ4Dsxyaye4AyTjyfp/qroOvyOPYwf1HOogPiDVz4twA== dependencies: "@rdfjs/data-model" "^1.3.3" "@types/json-schema" "^7.0.9" "@types/lodash-es" "^4.17.4" "@types/rdf-js" "^4.0.2" "@types/sparqljs" "^3.1.3" - axios "^0.21.1" + axios "^0.21.4" is-url "^1.2.4" jsonld "^5.2.0" lodash-es "^4.17.21" @@ -4514,6 +4514,13 @@ axios@^0.21.1: dependencies: follow-redirects "^1.10.0" +axios@^0.21.4: + version "0.21.4" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575" + integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg== + dependencies: + follow-redirects "^1.14.0" + axobject-query@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be" @@ -7493,6 +7500,11 @@ follow-redirects@^1.10.0: resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.2.tgz#cecb825047c00f5e66b142f90fed4f515dec789b" integrity sha512-yLR6WaE2lbF0x4K2qE2p9PEXKLDjUjnR/xmjS3wHAYxtlsI9MLLBJUZirAHKzUZDGLxje7w/cXR49WOUo4rbsA== +follow-redirects@^1.14.0: + version "1.14.3" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.3.tgz#6ada78118d8d24caee595595accdc0ac6abd022e" + integrity sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw== + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"