diff --git a/libs/shared/lib/vis/common/types.ts b/libs/shared/lib/vis/common/types.ts index 6bb2d98628070b32cda39e41aec7109c53830397..e7cc106758f200d29f3a98404b00c48dac7883f4 100644 --- a/libs/shared/lib/vis/common/types.ts +++ b/libs/shared/lib/vis/common/types.ts @@ -5,6 +5,7 @@ import type { AppDispatch } from '../../data-access'; import { FC } from 'react'; import { Visualizations } from '../manager'; import { Edge, Node } from 'reactflow'; +import { GraphMetaData } from '../../data-access/statistics'; export type VisualizationConfiguration = { [id: string]: any }; @@ -21,6 +22,8 @@ export type VisualizationPropTypes = { ml: ML; configuration: VisualizationConfiguration; dispatch: AppDispatch; + graphMetaData: GraphMetaData; + updateSettings: (newSettings: any) => void; handleHover: (val: any) => void; handleSelect: (val: any) => void; }; diff --git a/libs/shared/lib/vis/manager/VisualizationManager.tsx b/libs/shared/lib/vis/manager/VisualizationManager.tsx index 694298d7e54390745ffab3f8dcbab17711923788..61b2a55fd075633343664376376bd5241cd7e44a 100644 --- a/libs/shared/lib/vis/manager/VisualizationManager.tsx +++ b/libs/shared/lib/vis/manager/VisualizationManager.tsx @@ -36,7 +36,7 @@ export const VisualizationManager = (): VisualizationManagerType => { const ml = useML(); const schema = useSchemaGraph(); const graphQueryResult = useGraphQueryResult(); - const meta = useGraphQueryResultMeta(); + const graphMetaData = useGraphQueryResultMeta(); const { activeVisualization, openVisualizations } = useVisualization(); const [configuration, setConfiguration] = useState<any>(); @@ -114,7 +114,9 @@ export const VisualizationManager = (): VisualizationManagerType => { const renderSettings = () => { return ( visualization?.settings && - configuration && <visualization.settings configuration={configuration} graph={meta} updateSettings={updateSettings} /> + configuration && ( + <visualization.settings configuration={configuration} graphMetaData={graphMetaData} updateSettings={updateSettings} /> + ) ); }; @@ -130,6 +132,8 @@ export const VisualizationManager = (): VisualizationManagerType => { configuration={configuration} dispatch={dispatch} handleSelect={handleSelect} + graphMetaData={graphMetaData} + updateSettings={updateSettings} /> )} </Suspense> diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx index 2744b0be651a0e51079ab173a26a7bb455ce2604..34f885e38c54a50389aa3173e86d1fac008e263f 100644 --- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx +++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx @@ -20,9 +20,15 @@ const configuration: TableProps = { displayEntity: '', }; -export const TableVis = ({ data, schema, configuration }: VisualizationPropTypes) => { +export const TableVis = ({ data, schema, configuration, updateSettings, graphMetaData }: VisualizationPropTypes) => { const ref = useRef<HTMLDivElement>(null); + useEffect(() => { + if (!graphMetaData.nodes.labels.includes(configuration.displayEntity)) { + updateSettings({ displayEntity: graphMetaData.nodes.labels[0] }); + } + }, [graphMetaData.nodes.labels, data]); + const attributesArray = useMemo<AugmentedNodeAttributes[]>( () => data.nodes @@ -58,31 +64,31 @@ export const TableVis = ({ data, schema, configuration }: VisualizationPropTypes const TableSettings = ({ configuration, - graph, + graphMetaData, updateSettings, }: { configuration: TableProps; - graph: GraphMetaData; + graphMetaData: GraphMetaData; updateSettings: (val: any) => void; }) => { useEffect(() => { - if (graph && graph.nodes && graph.nodes.labels.length > 0) { - updateSettings({ displayEntity: graph.nodes.labels[0] }); + if (graphMetaData && graphMetaData.nodes && graphMetaData.nodes.labels.length > 0) { + updateSettings({ displayEntity: graphMetaData.nodes.labels[0] }); } - }, [graph]); + }, [graphMetaData]); const selectedNodeAttributes = useMemo(() => { if (configuration.displayEntity) { - const nodeType = graph.nodes.types[configuration.displayEntity]; + const nodeType = graphMetaData.nodes.types[configuration.displayEntity]; if (nodeType && nodeType.attributes) { return Object.keys(nodeType.attributes); } } return []; - }, [configuration.displayEntity, graph]); + }, [configuration.displayEntity, graphMetaData]); useEffect(() => { - if (graph && graph.nodes && graph.nodes.labels.length > 0) { + if (graphMetaData && graphMetaData.nodes && graphMetaData.nodes.labels.length > 0) { updateSettings({ displayAttributes: selectedNodeAttributes }); } }, [selectedNodeAttributes]); @@ -94,7 +100,7 @@ const TableSettings = ({ label="Select entity" value={configuration.displayEntity} onChange={(val) => updateSettings({ displayEntity: val })} - options={graph.nodes.labels} + options={graphMetaData.nodes.labels} /> <Input type="boolean" diff --git a/package.json b/package.json index d00b7432e3c1fa8f0e0bb9f5c6c8f43b64e4fdc0..e29fcf0f55681986540d2c85690b7669e02cb0f0 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,5 @@ }, "engines": { "node": ">=14.0.0" - }, - "packageManager": "pnpm@7.27.1" + } }