From a3eeb9383b6a4eb384df197665c9b40d368a9565 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Thu, 28 Mar 2024 12:19:10 +0100
Subject: [PATCH] feat(visManager): table settings
---
.../visualizations/rawjsonvis/rawjsonvis.tsx | 6 +++--
.../tablevis/components/Table.tsx | 23 ++++++++++------
.../vis/visualizations/tablevis/tablevis.tsx | 27 +++++++++++++------
3 files changed, 38 insertions(+), 18 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index e71607313..054e98f9f 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 ce4a3e89f..ace9e717d 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 b6b54b945..ef6ead2a0 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 });
--
GitLab