feat(visManager): table settings

libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx

@@ -22,6 +22,8 @@ const configuration: RawJSONVisProps = {
 };
 
 export const RawJSONVis = React.memo(({ data, configuration }: VisualizationPropTypes) => {
+  console.log(configuration);
+
   return (
     <div className="overflow-y-auto">
       <ReactJSONView
@@ -64,7 +66,7 @@ const RawJSONSettings = ({
         options={['circle', 'square', 'triangle']}
         onChange={(val) => updateSettings({ iconStyle: val })}
       />
-      <Input
+      {/* <Input
         type="boolean"
         label="Show data types"
         value={configuration.showDataTypes}
@@ -81,7 +83,7 @@ const RawJSONSettings = ({
         label="Enable clipboard"
         value={configuration.enableClipboard}
         onChange={(val) => updateSettings({ enableClipboard: val })}
-      />
+      /> */}
     </SettingsContainer>
   );
 };

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

@@ -15,6 +15,7 @@ type TableProps = {
   data: AugmentedNodeAttributes[];
   itemsPerPage: number;
   showBarPlot: boolean;
+  showAttributes: string[];
 };
 type Data2RenderI = {
   name: string;
@@ -24,7 +25,7 @@ type Data2RenderI = {
   showBarPlot?: boolean;
 };
 
-export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
+export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes }: TableProps) => {
   const maxUniqueValues = 69;
   const barPlotNumBins = 10;
 
@@ -38,7 +39,12 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
     currentData: AugmentedNodeAttributes[];
   } | null>(null);
   const [data2Render, setData2Render] = useState<Data2RenderI[]>([]);
-  const dataColumns = useMemo(() => Object.keys(data[0].attribute), [data]);
+  const dataColumns = useMemo(() => {
+    if (showAttributes && showAttributes.length > 0) {
+      return showAttributes.filter((attr) => Object.keys(data[0].attribute).includes(attr));
+    }
+    return Object.keys(data[0].attribute);
+  }, [data, showAttributes]);
   const totalPages = Math.ceil(sortedData.length / itemsPerPage);
 
   useEffect(() => {
@@ -227,16 +233,17 @@ export const Table = ({ data, itemsPerPage, showBarPlot }: TableProps) => {
                     <th className="border-light bg-light" key={index}>
                       <div className="th" key={index + item}>
                         <div className="h-full w-full overflow-hidden">
-                          {data2Render[index].showBarPlot &&
-                          (data2Render[index]?.typeData === 'int' || data2Render[index]?.typeData === 'float') ? (
-                            <BarPlot typeBarPlot="numerical" numBins={barPlotNumBins} data={data2Render[index].data} />
-                          ) : !data2Render[index]?.typeData || !data2Render[index].showBarPlot ? (
+                          {showBarPlot && data2Render[index].showBarPlot ? (
+                            data2Render[index].typeData === 'int' || data2Render[index].typeData === 'float' ? (
+                              <BarPlot typeBarPlot="numerical" numBins={barPlotNumBins} data={data2Render[index].data} />
+                            ) : (
+                              <BarPlot typeBarPlot="categorical" numBins={barPlotNumBins} data={data2Render[index].data} />
+                            )
+                          ) : (
                             <div className="font-normal mx-auto flex flex-row items-start justify-center w-full gap-1 text-center text-secondary-700">
                               <span className="text-2xs overflow-x-hidden truncate">Unique values:</span>
                               <span className="text-xs shrink-0">{data2Render[index]?.numElements}</span>
                             </div>
-                          ) : (
-                            <BarPlot typeBarPlot="categorical" numBins={barPlotNumBins} data={data2Render[index].data} />
                           )}
                         </div>
                       </div>

libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx

@@ -20,7 +20,7 @@ const configuration: TableProps = {
 
 export const TableVis = ({ data, schema, configuration }: VisualizationPropTypes) => {
   const ref = useRef<HTMLDivElement>(null);
-
+  console.log(configuration);
   const attributesArray = useMemo<AugmentedNodeAttributes[]>(
     () =>
       data.nodes.map((node) => {
@@ -40,7 +40,12 @@ export const TableVis = ({ data, schema, configuration }: VisualizationPropTypes
   return (
     <div className="h-full w-full" ref={ref}>
       {attributesArray.length > 0 && (
-        <Table data={attributesArray} itemsPerPage={configuration.itemsPerPage} showBarPlot={configuration.showBarplot} />
+        <Table
+          data={attributesArray}
+          itemsPerPage={configuration.itemsPerPage}
+          showBarPlot={configuration.showBarplot}
+          showAttributes={configuration.displayAttributes}
+        />
       )}
     </div>
   );
@@ -55,13 +60,19 @@ const TableSettings = ({
   graph: GraphMetaData;
   updateSettings: (val: any) => void;
 }) => {
-  const uniqueAttributes = new Set();
-  Object.keys(graph.nodes.types).forEach((label) => {
-    Object.keys(graph.nodes.types[label].attributes).forEach((attr: string) => {
-      uniqueAttributes.add(attr);
+  const allAttributes: string[] = Object.keys(graph.nodes.types).reduce((acc: string[], label: string) => {
+    const labelAttributes = Object.keys(graph.nodes.types[label].attributes);
+    return acc.concat(labelAttributes);
+  }, []);
+
+  // Find the intersection of attributes across all nodes
+  const intersectionAttributes = allAttributes.filter((attr) => {
+    return Object.keys(graph.nodes.types).every((label) => {
+      return graph.nodes.types[label].attributes.hasOwnProperty(attr);
     });
   });
-  const attributes: string[] = Array.from(uniqueAttributes) as string[];
+
+  const uniqueIntersectionAttributes = Array.from(new Set(intersectionAttributes));
 
   return (
     <SettingsContainer>
@@ -85,7 +96,7 @@ const TableSettings = ({
           <Input
             type="checkbox"
             value={configuration.displayAttributes}
-            options={attributes}
+            options={uniqueIntersectionAttributes}
             onChange={(val: string[] | string) => {
               const updatedVal = Array.isArray(val) ? val : [val];
               updateSettings({ displayAttributes: updatedVal });