diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx index e7160731344e52459912c613f7ecbc718172c899..054e98f9f183006d8abb585ca6c502d0ed0d2dc5 100644 --- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx +++ b/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> ); }; diff --git a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx index ce4a3e89f241869371c00b115bed799aea1e4794..ace9e717dfb9aa256aac8acc5eb6416cf8d5b99e 100644 --- a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx +++ b/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> diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx index b6b54b9459276362a8e53e056215cd64ab5bc4d0..ef6ead2a0c27c52258db67480f255847487a8431 100644 --- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx +++ b/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 });