add: ability to toggle table visualization

Author: Long Tran (U811370)

packages/extension-shared/src/hooks/schema.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { type JSONTableSchema } from "shared/types/tableSchema";
 import { tableCoordsStore } from "json-table-schema-visualizer/src/stores/tableCoords";
 import { stageStateStore } from "json-table-schema-visualizer/src/stores/stagesState";
+import { detailLevelStore } from "json-table-schema-visualizer/src/stores/detailLevelStore";
 
 import { type SetSchemaCommandPayload } from "../../extension/types/webviewCommand";
 
@@ -24,6 +25,7 @@ export const useSchema = (): {
       // update stores
       tableCoordsStore.switchTo(message.key, message.payload.tables);
       stageStateStore.switchTo(message.key);
+      detailLevelStore.switchTo(message.key);
 
       setSchemaKey(message.key);
     }

packages/json-table-schema-visualizer/src/components/DiagramViewer/DiagramViewer.tsx

@@ -12,6 +12,7 @@ import DiagramWrapper from "./DiagramWrapper";
 
 import TablesPositionsProvider from "@/providers/TablesPositionsProvider";
 import MainProviders from "@/providers/MainProviders";
+import TabelLevelDetailProvider from "@/providers/TableDetailLevelProvider";
 
 interface DiagramViewerProps {
   tables: JSONTableTable[];
@@ -25,15 +26,17 @@ const DiagramViewer = ({ refs, tables, enums }: DiagramViewerProps) => {
   }
 
   return (
-    <TablesPositionsProvider tables={tables}>
-      <MainProviders tables={tables} enums={enums}>
-        <DiagramWrapper>
-          <RelationsConnections refs={refs} />
-
-          <Tables tables={tables} />
-        </DiagramWrapper>
-      </MainProviders>
-    </TablesPositionsProvider>
+    <TabelLevelDetailProvider>
+      <TablesPositionsProvider tables={tables}>
+        <MainProviders tables={tables} enums={enums}>
+          <DiagramWrapper>
+            <RelationsConnections refs={refs} />
+
+            <Tables tables={tables} />
+          </DiagramWrapper>
+        </MainProviders>
+      </TablesPositionsProvider>
+    </TabelLevelDetailProvider>
   );
 };
 

packages/json-table-schema-visualizer/src/components/Table.tsx

@@ -1,5 +1,5 @@
 import { Group, Rect } from "react-konva";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
 import TableHeader from "./TableHeader";
 import Column from "./Column/Column";
@@ -23,16 +23,22 @@ import {
   useTableWidth,
 } from "@/hooks/table";
 import { tableCoordsStore } from "@/stores/tableCoords";
+import { useTableDetailLevel } from "@/hooks/tableDetailLevel";
+import { TableDetailLevel } from "@/types/tabelDetailLevel";
+import { filterByDetailLevel } from "@/utils/filterByDetailLevel";
 
 interface TableProps extends JSONTableTable {}
 
 const Table = ({ fields, name }: TableProps) => {
   const themeColors = useThemeColors();
+  const { detailLevel } = useTableDetailLevel();
   const tableRef = useRef<null | Konva.Group>(null);
   const { setHoveredTableName } = useTablesInfo();
   const { x: tableX, y: tableY } = useTableDefaultPosition(name);
   const tablePreferredWidth = useTableWidth();
-
+  const visibleFields = useMemo(() => {
+    return filterByDetailLevel(fields, detailLevel);
+  }, [detailLevel, fields]);
   useEffect(() => {
     if (tableRef.current != null) {
       tableRef.current.x(tableX);
@@ -44,7 +50,7 @@ const Table = ({ fields, name }: TableProps) => {
   const tableHeight =
     TABLE_COLOR_HEIGHT +
     COLUMN_HEIGHT +
-    fields.length * COLUMN_HEIGHT +
+    visibleFields.length * COLUMN_HEIGHT +
     PADDINGS.sm;
 
   const tableDragEventName = computeTableDragEventName(name);
@@ -96,22 +102,25 @@ const Table = ({ fields, name }: TableProps) => {
       />
 
       <TableHeader title={name} />
-
-      <Group y={TABLE_HEADER_HEIGHT}>
-        {fields.map((field, index) => (
-          <Column
-            key={field.name}
-            colName={field.name}
-            tableName={name}
-            isEnum={field.type.is_enum}
-            type={field.type.type_name}
-            isPrimaryKey={field.pk}
-            offsetY={index * COLUMN_HEIGHT}
-            relationalTables={field.relational_tables}
-            note={field.note}
-          />
-        ))}
-      </Group>
+      {detailLevel !== TableDetailLevel.HeaderOnly ? (
+        <Group y={TABLE_HEADER_HEIGHT}>
+          {visibleFields.map((field, index) => (
+            <Column
+              key={field.name}
+              colName={field.name}
+              tableName={name}
+              isEnum={field.type.is_enum}
+              type={field.type.type_name}
+              isPrimaryKey={field.pk}
+              offsetY={index * COLUMN_HEIGHT}
+              relationalTables={field.relational_tables}
+              note={field.note}
+            />
+          ))}
+        </Group>
+      ) : (
+        <></>
+      )}
     </Group>
   );
 };

packages/json-table-schema-visualizer/src/components/Toolbar/DetailLevelToggle/DetailLevelToggle.stories.tsx

@@ -0,0 +1,25 @@
+import DetailLevelToggle from "./DetailLevelToggle";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import TableDetailLevelProvider from "@/providers/TableDetailLevelProvider";
+
+const meta: Meta = {
+  component: DetailLevelToggle,
+  title: "components/Toolbar/DetailLevelToggle",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DetailLevelToggle>;
+
+export const DetailLevelToggleStory: Story = {
+  render: () => <DetailLevelToggle />,
+  decorators: [
+    (Story) => (
+      <TableDetailLevelProvider>
+        <Story />
+      </TableDetailLevelProvider>
+    ),
+  ],
+};

packages/json-table-schema-visualizer/src/components/Toolbar/DetailLevelToggle/DetailLevelToggle.tsx

@@ -0,0 +1,54 @@
+import { PanelsTopLeftIcon, PanelTopIcon, KeyRoundIcon } from "lucide-react";
+import { useMemo } from "react";
+
+import ToolbarButton from "../Button";
+
+import { useTableDetailLevel } from "@/hooks/tableDetailLevel";
+import { TableDetailLevel } from "@/types/tabelDetailLevel";
+
+interface DetailLevelToggleProps {
+  onClick: () => void;
+}
+
+const FullDetailLevel = ({ onClick }: DetailLevelToggleProps) => {
+  return (
+    <ToolbarButton title="Full Details" onClick={onClick}>
+      <PanelsTopLeftIcon />
+
+      <span className="ml-2">Full Details</span>
+    </ToolbarButton>
+  );
+};
+const HeaderOnlyLevel = ({ onClick }: DetailLevelToggleProps) => {
+  return (
+    <ToolbarButton title="Header Only" onClick={onClick}>
+      <PanelTopIcon />
+
+      <span className="ml-2">Header Only</span>
+    </ToolbarButton>
+  );
+};
+const KeyOnlyLevel = ({ onClick }: DetailLevelToggleProps) => {
+  return (
+    <ToolbarButton title="Key Only" onClick={onClick}>
+      <KeyRoundIcon />
+
+      <span className="ml-2">Key Only</span>
+    </ToolbarButton>
+  );
+};
+
+const COMPONENT_MAP = {
+  [TableDetailLevel.FullDetails]: FullDetailLevel,
+  [TableDetailLevel.HeaderOnly]: HeaderOnlyLevel,
+  [TableDetailLevel.KeyOnly]: KeyOnlyLevel,
+};
+
+const DetailLevelToggle = () => {
+  const { detailLevel, next } = useTableDetailLevel();
+  const Component = useMemo(() => COMPONENT_MAP[detailLevel], [detailLevel]);
+
+  return <Component onClick={next} />;
+};
+
+export default DetailLevelToggle;

packages/json-table-schema-visualizer/src/components/Toolbar/Toolbar.tsx

@@ -1,11 +1,12 @@
 import AutoArrangeTableButton from "./AutoArrage/AutoArrangeTables";
 import ThemeToggler from "./ThemeToggler/ThemeToggler";
+import DetailLevelToggle from "./DetailLevelToggle/DetailLevelToggle";
 
 const Toolbar = () => {
   return (
     <div className="flex absolute [&_svg]:w-5 [&_svg]:h-5 px-6 py-1 bottom-14 text-sm bg-gray-100 dark:bg-gray-700 shadow-lg rounded-2xl">
       <AutoArrangeTableButton />
-
+      <DetailLevelToggle />
       <hr className="w-px h-6 mx-4 my-1 bg-gray-300" />
 
       <ThemeToggler />

packages/json-table-schema-visualizer/src/hooks/relationConnection.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 
 import { useTablesInfo } from "./table";
 import { useTableWidthStoredValue } from "./tableWidthStore";
+import { useTableDetailLevel } from "./tableDetailLevel";
 
 import type { RelationItem } from "@/types/relation";
 import type { Position, XYPosition } from "@/types/positions";
@@ -11,6 +12,8 @@ import { computeTableDragEventName } from "@/utils/eventName";
 import eventEmitter from "@/events-emitter";
 import { computeConnectionHandlePos } from "@/utils/computeConnectionHandlePositions";
 import { tableCoordsStore } from "@/stores/tableCoords";
+import { TableDetailLevel } from "@/types/tabelDetailLevel";
+import { TABLE_HEADER_HEIGHT } from "@/constants/sizing";
 
 interface UseRelationTablesCoordsReturn {
   sourceXY: XYPosition;
@@ -55,7 +58,7 @@ export const useRelationsCoords = (
 
   const sourceTableDragEventName = computeTableDragEventName(source?.tableName);
   const targetTableDragEventName = computeTableDragEventName(target?.tableName);
-
+  const { detailLevel } = useTableDetailLevel();
   // update source table coordinates on the source table drag event
   useEffect(() => {
     const coordsUpdater = (coords: XYPosition): void => {
@@ -92,6 +95,20 @@ export const useRelationsCoords = (
 
   // addition of the coordX to the cordXq to obtain the including
   // the real position of the table in the scene
+  if (detailLevel === TableDetailLevel.HeaderOnly) {
+    return {
+      sourcePosition,
+      targetPosition,
+      sourceXY: {
+        x: finalSourceX,
+        y: sourceTableCoords.y + TABLE_HEADER_HEIGHT / 2,
+      },
+      targetXY: {
+        x: finalTargetX,
+        y: targetTableCoords.y + TABLE_HEADER_HEIGHT / 2,
+      },
+    };
+  }
   const finalSourceY = sourceColY + sourceTableCoords.y;
   const finalTargetY = targetColY + targetTableCoords.y;
 

packages/json-table-schema-visualizer/src/hooks/tableDetailLevel.ts

@@ -0,0 +1,17 @@
+import { useContext } from "react";
+
+import { TableDetailLevelContext } from "@/providers/TableDetailLevelProvider";
+import { type TableDetailLevel } from "@/types/tabelDetailLevel";
+
+export const useTableDetailLevel = (): {
+  detailLevel: TableDetailLevel;
+  next: () => void;
+} => {
+  const contextValue = useContext(TableDetailLevelContext);
+  if (contextValue === undefined) {
+    throw new Error(
+      "it seem you forgot to wrap your app with TableDetailLevelProvider",
+    );
+  }
+  return contextValue;
+};

packages/json-table-schema-visualizer/src/providers/TableDetailLevelProvider.tsx

@@ -0,0 +1,51 @@
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+import {
+  type TableDetailLevelValue,
+  TableDetailLevel,
+} from "@/types/tabelDetailLevel";
+import { detailLevelStore } from "@/stores/detailLevelStore";
+
+export const TableDetailLevelContext = createContext<TableDetailLevelValue>({
+  detailLevel: TableDetailLevel.FullDetails,
+  next() {},
+});
+
+interface TabelLevelDetailProviderProps {
+  children: ReactNode;
+  level?: TableDetailLevel;
+}
+
+const TabelLevelDetailProvider = ({
+  children,
+}: TabelLevelDetailProviderProps) => {
+  const [state, setState] = useState(detailLevelStore.getCurrentDetailLevel());
+  useEffect(() => {
+    if (state !== detailLevelStore.getCurrentDetailLevel()) {
+      detailLevelStore.set(state);
+      detailLevelStore.saveCurrentState();
+    }
+  }, [state]);
+  const next = useCallback((): void => {
+    if (state === TableDetailLevel.FullDetails) {
+      setState(TableDetailLevel.HeaderOnly);
+    } else if (state === TableDetailLevel.HeaderOnly) {
+      setState(TableDetailLevel.KeyOnly);
+    } else {
+      setState(TableDetailLevel.FullDetails);
+    }
+  }, [state, setState]);
+  return (
+    <TableDetailLevelContext.Provider value={{ detailLevel: state, next }}>
+      {children}
+    </TableDetailLevelContext.Provider>
+  );
+};
+
+export default TabelLevelDetailProvider;

packages/json-table-schema-visualizer/src/providers/TablesInfoProvider.tsx

@@ -4,6 +4,7 @@ import type { TablesInfoProviderValue } from "@/types/tablesInfoProviderValue";
 import type { JSONTableTable } from "shared/types/tableSchema";
 
 import { computeColIndexes } from "@/utils/computeColIndexes";
+import { useTableDetailLevel } from "@/hooks/tableDetailLevel";
 
 export const TablesInfoContext = createContext<
   TablesInfoProviderValue | undefined
@@ -16,7 +17,8 @@ interface TablesInfoProviderProps {
 
 const TablesInfoProvider = ({ children, tables }: TablesInfoProviderProps) => {
   const [hoveredTableName, setHoveredTableName] = useState<string | null>(null);
-  const colsIndexes = computeColIndexes(tables);
+  const { detailLevel } = useTableDetailLevel();
+  const colsIndexes = computeColIndexes(tables, detailLevel);
 
   return (
     <TablesInfoContext.Provider