fix(viz): fixed table viz crash

libs/shared/lib/vis/index.tsx

@@ -37,6 +37,8 @@ export const createVisualizationComponent = () => {
 
     const VisualizationComponent: VISComponentType = Visualizations[vis.activeVisualization];
 
+    console.log('createVisualizationComponent', VisualizationComponent, vis);
+
     React.useEffect(() => {
       dispatch(addVisualization({ id: VisualizationComponent.displayName, settings: VisualizationComponent.localConfigSchema }));
     }, [vis.activeVisualization]);

libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx

@@ -25,8 +25,7 @@ type Data2RenderI = {
 };
 
 export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
-  console.debug('show; ', showBarPlot);
-  const maxUniqueValues = 350;
+  const maxUniqueValues = 69;
   const barPlotNumBins = 10;
 
   const [sortedData, setSortedData] = useState<AugmentedNodeAttributes[]>(data);
@@ -114,9 +113,14 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
         numElements: 0,
       };
 
-      if (firstRowData.type[dataColumn] === 'string') {
+      if (
+        firstRowData.type[dataColumn] === 'string' ||
+        firstRowData.type[dataColumn] === 'date' ||
+        firstRowData.type[dataColumn] === 'duration' ||
+        firstRowData.type[dataColumn] === 'datetime' ||
+        firstRowData.type[dataColumn] === 'time'
+      ) {
         const groupedData = d3.group(data, (d) => d.attribute[dataColumn]);
-
         categoryCounts = Array.from(groupedData, ([category, items]) => ({
           category: category as string,
           count: items.length,
@@ -130,9 +134,19 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
           newData2Render.data = categoryCounts;
           newData2Render.showBarPlot = true;
         }
+      } else if (firstRowData.type[dataColumn] === 'bool') {
+        const groupedData = d3.group(data, (d) => d.attribute[dataColumn]);
+
+        categoryCounts = Array.from(groupedData, ([category, items]) => ({
+          category: category as string,
+          count: items.length,
+        }));
+
+        newData2Render.numElements = categoryCounts.length;
+        newData2Render.data = categoryCounts;
+        newData2Render.showBarPlot = true;
 
-        // number
-        // perhaps check for other than string and number. eg. boolean
+        // number: float and int
       } else if (firstRowData.type[dataColumn] === 'int' || firstRowData.type[dataColumn] === 'float') {
         categoryCounts = data.map((obj) => ({
           category: 'placeholder', // add something
@@ -141,6 +155,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
 
         newData2Render.numElements = categoryCounts.length;
         newData2Render.data = categoryCounts;
+        newData2Render.showBarPlot = true;
       } else {
         // there is also array type, when considering labels
         const groupedData = d3.group(data, (d) => (d.attribute[dataColumn] as any)?.[0]);
@@ -213,11 +228,11 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
                 </tr>
               </thead>
               <tbody>
-                {currentPage.currentData.map((item, index) => (
-                  <tr key={index}>
-                    {dataColumns.map((col, index) => (
-                      <td className="border-light" data-datatype={item.type[col]} key={index}>
-                        {item.attribute[col] as string}
+                {currentPage.currentData.map((item, rowIndex) => (
+                  <tr key={rowIndex}>
+                    {dataColumns.map((col, colIndex) => (
+                      <td className="border-light" data-datatype={item.type[col]} key={colIndex}>
+                        {item.attribute[col] !== undefined ? (item.attribute[col] as any).toString() : item.attribute[col]}
                       </td>
                     ))}
                   </tr>