Sammyt/colorization of sql query results (#315)

* bugfix: load new data in new_table * feature: add coloration
data-drift · Feb 29, 2024 · a582ff6 · a582ff6
1 parent da5dcae
commit a582ff6
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 31 deletions.
diff --git a/frontend/src/pages/Overview/SqlEditor.tsx b/frontend/src/pages/Overview/SqlEditor.tsx
@@ -35,17 +35,33 @@ const SqlEditor = ({ dualTable, setQueryResult }: SqlEditorProps) => {
       const newSql = sql.replace("snapshot", "new_snapshot");
       const oldResults = await db.query(oldSql);
       const oldRows = {
-        values: oldResults.toArray().map(Object.fromEntries),
+        values: oldResults.toArray().map(Object.fromEntries) as (Record<
+          string,
+          string
+        > & { unique_key: string })[],
         columns: oldResults.schema.fields.map((d) => d.name),
       };
       const newResults = await db.query(newSql);
       const newRows = {
-        values: newResults.toArray().map(Object.fromEntries),
+        values: newResults.toArray().map(Object.fromEntries) as (Record<
+          string,
+          string
+        > & { unique_key: string })[],
         columns: newResults.schema.fields.map((d) => d.name),
       };
-      const dualTable = sqlToDualTableMapper(oldRows, newRows);
-      console.log("dualTable", dualTable);
-      setQueryResult(dualTable);
+      const uniqueKeysSet = new Set([
+        ...oldRows.values.map((row) => row["unique_key"]),
+        ...newRows.values.map((row) => row["unique_key"]),
+      ]);
+      const uniqueKeys = Array.from(uniqueKeysSet);
+      const queryResultDualTable = sqlToDualTableMapper(
+        uniqueKeys,
+        oldRows,
+        newRows,
+        dualTable
+      );
+      console.log("dualTable", queryResultDualTable);
+      setQueryResult(queryResultDualTable);
       setIsRunning(false);
       setQueryError(null);
     } catch (error: any) {

diff --git a/frontend/src/pages/Overview/duck-db.hook.ts b/frontend/src/pages/Overview/duck-db.hook.ts
@@ -55,7 +55,7 @@ export const loadSnapshotData = async (
   }
   console.log("old_snapshot data inserted created");
 
-  const newData = dualTableProps.tableProps1;
+  const newData = dualTableProps.tableProps2;
   const createNewTableSql = `CREATE TABLE new_snapshot (${newData.headers.join(
     " VARCHAR, "
   )} VARCHAR)`;

diff --git a/frontend/src/pages/Overview/sql-to-dual-table.mapper.ts b/frontend/src/pages/Overview/sql-to-dual-table.mapper.ts
@@ -1,41 +1,46 @@
 import { DualTableProps } from "../../components/Table/DualTable";
+import { TableProps } from "../../components/Table/Table";
+import { emptyRow } from "../../services/patch.mapper";
 
 export const sqlToDualTableMapper = <T extends string, V extends string>(
-  oldRows: {
-    values: Record<T, string>[];
+  uniqueKeys: string[],
+  _oldRows: {
+    values: (Record<T, string> & { unique_key: string })[];
     columns: T[];
   },
-  newRows: {
-    values: Record<V, string>[];
+  _newRows: {
+    values: (Record<V, string> & { unique_key: string })[];
     columns: V[];
-  }
+  },
+  initialDualTable: DualTableProps
 ): DualTableProps => {
+  const oldData: TableProps["data"] = [];
+  const newData: TableProps["data"] = [];
+  uniqueKeys.forEach((uniqueKey: string) => {
+    const tablePropsOldRow: TableProps["data"][0] =
+      initialDualTable.tableProps1.data.find(
+        (row) => row.data[0]?.value === uniqueKey
+      ) || emptyRow(initialDualTable.tableProps1.headers.length);
+
+    const tablePropsNewRow: TableProps["data"][0] =
+      initialDualTable.tableProps2.data.find(
+        (row) => row.data[0]?.value === uniqueKey
+      ) || emptyRow(initialDualTable.tableProps2.headers.length);
+
+    oldData.push(tablePropsOldRow);
+    newData.push(tablePropsNewRow);
+  });
+
   return {
     tableProps1: {
-      headers: oldRows.columns,
+      headers: initialDualTable.tableProps1.headers,
       diffType: "removed",
-      data: oldRows.values.map((row) => {
-        return {
-          data: oldRows.columns.map((column) => {
-            return {
-              value: row[column],
-            };
-          }),
-        };
-      }),
+      data: oldData,
     },
     tableProps2: {
-      headers: newRows.columns,
+      headers: initialDualTable.tableProps2.headers,
       diffType: "added",
-      data: newRows.values.map((row) => {
-        return {
-          data: newRows.columns.map((column) => {
-            return {
-              value: row[column],
-            };
-          }),
-        };
-      }),
+      data: newData,
     },
   };
 };