From 0c1623fce3f63cab215e1e2a2885d3305065f584 Mon Sep 17 00:00:00 2001
From: Marcos Pieras <pieras.marcos@gmail.com>
Date: Thu, 14 Nov 2024 15:40:21 +0000
Subject: [PATCH] Fix/table crash
---
.../tablevis/components/Table.tsx | 12 ++--
.../vis/visualizations/tablevis/tablevis.tsx | 58 ++++++++++---------
2 files changed, 37 insertions(+), 33 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
index 76aed67e6..225096ebb 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
@@ -152,7 +152,8 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
firstRowData.type[dataColumn] === 'date' ||
firstRowData.type[dataColumn] === 'duration' ||
firstRowData.type[dataColumn] === 'datetime' ||
- firstRowData.type[dataColumn] === 'time'
+ firstRowData.type[dataColumn] === 'time' ||
+ typeof data[0].attribute[dataColumn] === 'string'
) {
const groupedData = group(data, (d) => {
const value = d.attribute[dataColumn];
@@ -236,6 +237,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
return newData2Render;
});
+
const _data2RenderSorted = _data2Render.sort((a, b) => a.name.localeCompare(b.name));
setData2Render(_data2RenderSorted);
}, [currentPage, data, sortedData, selectedEntity, maxBarsCount, showAttributes]);
@@ -307,10 +309,10 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
)
) : (
<div className="font-normal mx-auto flex flex-row items-start justify-center w-full gap-1 text-center text-secondary-700 p-1">
- <div className="flex items-center space-x-1 whitespace-nowrap">
- <span className="text-2xs">Unique values:</span>
- <span className="text-xs font-medium">{data2Render[index]?.numElements}</span>
- </div>
+ <div className="flex items-center space-x-1 whitespace-nowrap">
+ <span className="text-2xs">Unique values:</span>
+ <span className="text-xs font-medium">{data2Render[index]?.numElements}</span>
+ </div>
</div>
))}
</div>
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index 71c00cac1..28a194e57 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -5,7 +5,7 @@ import { EntityPill, RelationPill } from '@graphpolaris/shared/lib/components/pi
import { useSearchResultData } from '@graphpolaris/shared/lib/data-access';
import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
import html2canvas from 'html2canvas';
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
import { AugmentedNodeAttributes, Table } from './components/Table';
import styles from '../../../components/buttons/buttons.module.scss';
@@ -58,7 +58,6 @@ export const TableVis = forwardRef<TableVisHandle, VisualizationPropTypes<TableP
} else {
dataNodes = data.edges;
}
-
return (
dataNodes
.filter((node) => {
@@ -114,10 +113,10 @@ export const TableVis = forwardRef<TableVisHandle, VisualizationPropTypes<TableP
const clonedElement = ref.current.cloneNode(true) as HTMLDivElement;
clonedElement.classList.add(styles.exported);
- document.body.appendChild(clonedElement);
+ document.body.appendChild(clonedElement);
html2canvas(clonedElement).then((canvas) => {
- document.body.removeChild(clonedElement);
+ document.body.removeChild(clonedElement);
const pngData = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = pngData;
@@ -151,38 +150,41 @@ export const TableVis = forwardRef<TableVisHandle, VisualizationPropTypes<TableP
);
const TableSettings = ({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<TableProps>) => {
- const [attributes, setAttributes] = useState<string[]>([]);
+ //!TODO: displayAttributes settings are not preserved when loading state
useEffect(() => {
- if (settings.selectedEntity === '' && graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0) {
- const firstEntity = graphMetadata.nodes.labels[0];
- const attributesFirstEntity = Object.keys(graphMetadata.nodes.types[firstEntity].attributes);
- updateSettings({ selectedEntity: graphMetadata.nodes.labels[0], displayAttributes: attributesFirstEntity });
- setAttributes(attributesFirstEntity);
+ if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0 && settings.selectedEntity === '') {
+ updateSettings({ selectedEntity: graphMetadata.nodes.labels[0] });
}
}, [graphMetadata]);
- useEffect(() => {
- if (
- graphMetadata &&
- graphMetadata.nodes &&
- graphMetadata.nodes.labels.length > 0 &&
- settings.selectedEntity != '' &&
- settings.displayAttributes.length != 0
- ) {
- const nodesLabels = graphMetadata.nodes.labels;
- let attributesFirstEntity = [];
- if (nodesLabels.includes(settings.selectedEntity)) {
- attributesFirstEntity = Object.keys(graphMetadata.nodes.types[settings.selectedEntity].attributes);
- } else {
- attributesFirstEntity = Object.keys(graphMetadata.edges.types[settings.selectedEntity].attributes);
- }
- setAttributes(attributesFirstEntity);
+ const selectedNodeAttributes = useMemo(() => {
+ if (settings.selectedEntity) {
+ const labelNodes = graphMetadata.nodes.labels;
+ const labelRelationship = graphMetadata.edges.labels;
+ if (labelNodes.includes(settings.selectedEntity)) {
+ const nodeType = graphMetadata.nodes.types[settings.selectedEntity];
- updateSettings({ displayAttributes: attributesFirstEntity });
+ if (nodeType && nodeType.attributes) {
+ return Object.keys(nodeType.attributes).sort((a, b) => a.localeCompare(b));
+ }
+ } else if (labelRelationship.includes(settings.selectedEntity)) {
+ const edgesType = graphMetadata.edges.types[settings.selectedEntity];
+
+ if (edgesType && edgesType.attributes) {
+ return Object.keys(edgesType.attributes).sort((a, b) => a.localeCompare(b));
+ }
+ }
}
+ return [];
}, [settings.selectedEntity, graphMetadata]);
+ useEffect(() => {
+ if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0) {
+ updateSettings({ displayAttributes: selectedNodeAttributes });
+ }
+ }, [selectedNodeAttributes, graphMetadata]);
+
return (
<SettingsContainer>
<div className="my-2">
@@ -248,7 +250,7 @@ const TableSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
<Input
type="checkbox"
value={settings.displayAttributes}
- options={attributes}
+ options={selectedNodeAttributes}
onChange={(val: string[] | string) => {
const updatedVal = Array.isArray(val) ? val : [val];
updateSettings({ displayAttributes: updatedVal });
--
GitLab