Fix/table crash

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>

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 });