diff --git a/libs/shared/lib/mock-data/query-result/mockData.ts b/libs/shared/lib/mock-data/query-result/mockData.ts
index f859e8b568277b96bdaf4c4b8371383a877a1eb8..b9df59153a089d23b5b4a47cfeba4d3f9bb89147 100644
--- a/libs/shared/lib/mock-data/query-result/mockData.ts
+++ b/libs/shared/lib/mock-data/query-result/mockData.ts
@@ -9,6 +9,7 @@ const mockDataArray = [
'mockLargeQueryResults',
'mockMobilityQueryResult',
'typesMockQueryResults',
+ 'testUnMatchHeadersDataResults',
'smallFlightsQueryResults',
'smallVillainQueryResults',
'smallVillainDoubleArchQueryResults',
diff --git a/libs/shared/lib/mock-data/query-result/testUnMatchHeadersDataResults.json b/libs/shared/lib/mock-data/query-result/testUnMatchHeadersDataResults.json
new file mode 100644
index 0000000000000000000000000000000000000000..f0deee795a388707de8ea32ff33f1d50311b8c03
--- /dev/null
+++ b/libs/shared/lib/mock-data/query-result/testUnMatchHeadersDataResults.json
@@ -0,0 +1,35 @@
+{
+ "edges": [
+ { "from": "worker/1", "_id": "onderdeel_van/1100", "_key": "1100", "_rev": "_cYl_jTO--O", "to": "worker/3", "attributes": {} },
+ { "from": "worker/3", "_id": "onderdeel_van/662", "_key": "662", "_rev": "_cYl_jR2--G", "to": "worker/1", "attributes": {} }
+ ],
+ "nodes": [
+ {
+ "_id": "worker/1",
+ "_key": "1",
+ "_rev": "_cYl-Qmq-_H",
+ "attributes": {
+ "name": "John Doe",
+ "age": 30,
+ "height": 170.2
+ }
+ },
+ {
+ "_id": "worker/3",
+ "_key": "2",
+ "_rev": "_cYl-Qmq--5",
+ "attributes": {
+ "name": "Bob Johnson",
+ "age": 35 }
+ },
+ {
+ "_id": "worker/2",
+ "_key": "2",
+ "_rev": "_cYl-Qmq--5",
+ "attributes": {
+ "age": 38,
+ "height": 195.2
+ }
+ }
+ ]
+}
diff --git a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
index 0218623df13842bbff3266009eeb8dffcf097889..ef6915a929ce916b1a502f7223a9ec35ae1700b2 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
@@ -41,15 +41,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
currentData: AugmentedNodeAttributes[];
} | null>(null);
const [data2Render, setData2Render] = useState<Data2RenderI[]>([]);
- const dataColumns = useMemo(() => {
- // sort to keep original order
- const showAttributesCopy = [...showAttributes].sort((a, b) => a.localeCompare(b));
- if (showAttributesCopy && showAttributesCopy.length > 0) {
- return showAttributesCopy.filter((attr) => Object.keys(data[0].attribute).includes(attr));
- }
- return Object.keys(data[0].attribute);
- }, [data, showAttributes, selectedEntity]);
const totalPages = Math.ceil(sortedData.length / itemsPerPage);
const [columnWidths, setColumnWidths] = useState<number[]>([]);
@@ -145,17 +137,17 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
useEffect(() => {
if (!currentPage || currentPage?.currentData?.length <= 0) return;
-
+ // TODO !FIXME: remove firstRowData and get type from schema information
let categoryCounts = [];
const firstRowData = data[data.length > fetchAttributes ? fetchAttributes : 0];
-
- let _data2Render = Object.keys(firstRowData.attribute).map((dataColumn: string, i) => {
+ let _data2Render = showAttributes.map((dataColumn: string, i) => {
const newData2Render: Data2RenderI = {
name: dataColumn,
typeData: firstRowData.type[dataColumn] || 'string',
data: [],
numElements: 0,
};
+
if (
firstRowData.type[dataColumn] === 'string' ||
firstRowData.type[dataColumn] === 'date' ||
@@ -165,7 +157,6 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
) {
const groupedData = group(data, (d) => {
const value = d.attribute[dataColumn];
-
if (typeof value === 'object' && value !== null) {
if (Object.keys(value).length === 0) {
return NODATASTRING;
@@ -182,7 +173,6 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
}
}
});
-
categoryCounts = Array.from(groupedData, ([category, items]) => ({
category: category as string,
count: items.length,
@@ -236,7 +226,6 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
});
const _data2RenderSorted = _data2Render.sort((a, b) => a.name.localeCompare(b.name));
-
setData2Render(_data2RenderSorted);
}, [currentPage, data, sortedData, selectedEntity, maxBarsCount, showAttributes]);
@@ -248,7 +237,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
<table className={`mx-auto table-fixed text-sm bg-secondary-100`}>
<thead>
<tr className="p-0 border-0">
- {dataColumns.map((item, index) => (
+ {showAttributes.map((item, index) => (
<th
className="px-0 py-0 font-semibold border-light group hover:bg-secondary-300 bg-secondary-200 text-left overflow-x-hidden truncate capitalize cursor-pointer"
key={index + item}
@@ -279,7 +268,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
))}
</tr>
<tr>
- {dataColumns.map((item, index) => (
+ {showAttributes.map((item, index) => (
<th className="border-light bg-light max-w-[20rem] border-r-2 text-left" key={index}>
<div className="th p-0" key={index + item}>
<div className="h-full w-full overflow-hidden">
@@ -320,7 +309,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
<tbody>
{currentPage.currentData.map((item, rowIndex) => (
<tr key={rowIndex} className="border-b border-secondary-200 hover:bg-secondary-200">
- {dataColumns.map((col, colIndex) => {
+ {showAttributes.map((col, colIndex) => {
const isEmpty =
item.attribute[col] === undefined ||
((typeof item.attribute[col] !== 'object' || Array.isArray(item.attribute[col])) &&
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx
index 4a003577e77da5bb01cd8377eb1f4254a5ce5ef1..e176db9efcc2ad8fee118d3145460870c6c1ba28 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx
@@ -70,4 +70,16 @@ export const TestWithTypesMock = {
},
};
+export const TestUnMatchHeadersData = {
+ args: {
+ ...(await mockData.testUnMatchHeadersDataResults()),
+ schema: typesMockSchemaRaw,
+ settings: {
+ ...TableComponent.settings,
+ displayAttributes: ['name', 'age', 'height'],
+ displayEntity: 'worker',
+ },
+ },
+};
+
export default Component;
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index 39e312ff6f0b73edfb4a8a43ae6547f93f8c7cbb..23441c1634002a0217553db3ed9bc8e4163b2688 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -48,6 +48,13 @@ export const TableVis = forwardRef<TableVisHandle, VisualizationPropTypes<TableP
}
}, [graphMetadata, data, settings]);
+ const displayAttributesSorted = useMemo<string[]>(() => {
+ if (settings.displayAttributes.length != 0) {
+ return [...settings.displayAttributes].sort((a, b) => a.localeCompare(b));
+ }
+ return settings.displayAttributes;
+ }, [settings.displayAttributes]);
+
const attributesArray = useMemo<AugmentedNodeAttributes[]>(() => {
//const similiarityThreshold = 0.9;
let displayAttributesSorted: string[];
@@ -132,7 +139,7 @@ export const TableVis = forwardRef<TableVisHandle, VisualizationPropTypes<TableP
data={attributesArray}
itemsPerPage={settings.itemsPerPage}
showBarPlot={settings.showBarplot}
- showAttributes={settings.displayAttributes}
+ showAttributes={displayAttributesSorted}
selectedEntity={settings.displayEntity}
maxBarsCount={settings.maxBarsCount}
/>