AltimateAI · anandgupta42 · Jun 20, 2024 · Jun 12, 2024 · Jun 15, 2024 · Jun 17, 2024
diff --git a/new_lineage_panel/index.html b/new_lineage_panel/index.html
@@ -4,7 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="__ROOT__/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <script>
+      var lineageType = "__LINEAGE_TYPE__";
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/new_lineage_panel/src/ActionWidget.tsx b/new_lineage_panel/src/ActionWidget.tsx
@@ -13,7 +13,7 @@ import GearIcon from "./assets/icons/gear.svg?react";
 import styles from "./styles.module.scss";
 import { HELP_SIDEBAR, SETTINGS_SIDEBAR } from "./constants";
 import { init, openURL, setLegacyLineageView, CLL, requestExecutor } from "./service_utils";
-import { LineageContext, MissingLineageMessage, aiEnabled } from "./App";
+import { LineageContext, MissingLineageMessage, aiEnabled } from "./Lineage";
 import { useReactFlow } from "reactflow";
 import {
   calculateMinLevel,

diff --git a/new_lineage_panel/src/CustomNodes.tsx b/new_lineage_panel/src/CustomNodes.tsx
@@ -18,7 +18,7 @@ import {
   highlightTableConnections,
   layoutElementsOnCanvas,
 } from "./graph";
-import { LineageContext } from "./App";
+import { LineageContext, StaticLineageContext } from "./Lineage";
 import { CLL, openFile } from "./service_utils";
 import {
   getColumnId,
@@ -28,12 +28,33 @@ import {
   ViewsTypes,
   toggleColumnEdges,
   toggleModelEdges,
+  T_NODE_W,
 } from "./utils";
 import { TMoreTables } from "./MoreTables";
 
 import TestsIcon from "./assets/icons/tests.svg?react";
 import EphemeralIcon from "./assets/icons/ephemeral.svg?react";
 import ExternalProjectIcon from "./assets/icons/external-project.svg?react";
+
+import SqlFilterLightIcon from "./assets/icons/sql_filter_light.svg?react";
+import SqlGroupByLightIcon from "./assets/icons/sql_group_by_light.svg?react";
+import SqlInnerJoinLightIcon from "./assets/icons/sql_inner_join_light.svg?react";
+import SqlLeftJoinLightIcon from "./assets/icons/sql_left_join_light.svg?react";
+import SqlLimitLightIcon from "./assets/icons/sql_limit_light.svg?react";
+import SqlOrderByLightIcon from "./assets/icons/sql_order_by_light.svg?react";
+import SqlOuterJoinLightIcon from "./assets/icons/sql_outer_join_light.svg?react";
+import SqlRightJoinLightIcon from "./assets/icons/sql_right_join_light.svg?react";
+import SqlUnionLightIcon from "./assets/icons/sql_union_light.svg?react";
+import SqlFilterDarkIcon from "./assets/icons/sql_filter_dark.svg?react";
+import SqlGroupByDarkIcon from "./assets/icons/sql_group_by_dark.svg?react";
+import SqlInnerJoinDarkIcon from "./assets/icons/sql_inner_join_dark.svg?react";
+import SqlLeftJoinDarkIcon from "./assets/icons/sql_left_join_dark.svg?react";
+import SqlLimitDarkIcon from "./assets/icons/sql_limit_dark.svg?react";
+import SqlOrderByDarkIcon from "./assets/icons/sql_order_by_dark.svg?react";
+import SqlOuterJoinDarkIcon from "./assets/icons/sql_outer_join_dark.svg?react";
+import SqlRightJoinDarkIcon from "./assets/icons/sql_right_join_dark.svg?react";
+import SqlUnionDarkIcon from "./assets/icons/sql_union_dark.svg?react";
+
 import { COLUMNS_SIDEBAR, EXPOSURE_SIDEBAR, TABLES_SIDEBAR } from "./constants";
 import { NODE_TYPE_SHORTHAND } from "./components/Column";
 import {
@@ -80,6 +101,38 @@ const BidirectionalHandles = () => (
       position={Position.Right}
       style={{ right: HANDLE_OFFSET }}
     />
+    <Handle
+      id="top"
+      type="source"
+      className="invisible"
+      isConnectable={false}
+      position={Position.Top}
+      style={{ top: HANDLE_OFFSET }}
+    />
+    <Handle
+      id="bottom"
+      type="source"
+      className="invisible"
+      isConnectable={false}
+      position={Position.Bottom}
+      style={{ bottom: HANDLE_OFFSET }}
+    />
+    <Handle
+      id="top"
+      type="target"
+      className="invisible"
+      isConnectable={false}
+      position={Position.Top}
+      style={{ top: HANDLE_OFFSET }}
+    />
+    <Handle
+      id="bottom"
+      type="target"
+      className="invisible"
+      isConnectable={false}
+      position={Position.Bottom}
+      style={{ bottom: HANDLE_OFFSET }}
+    />
   </>
 );
 
@@ -351,6 +404,75 @@ export const TableNode: FunctionComponent<NodeProps> = ({ data }) => {
   );
 };
 
+export const StaticTableNode: FunctionComponent<NodeProps> = ({ data }) => {
+  const { table, nodeType } = data;
+
+  const { selectedColumn, collectColumns, details, setSelectedTable } =
+    useContext(StaticLineageContext);
+
+  const _columnLen = Object.keys(collectColumns[table] || {}).length;
+  const _showColumns = _columnLen > 0;
+  const selected = selectedColumn?.table === table;
+  const nType = nodeType as keyof typeof NODE_TYPE_SHORTHAND;
+
+  return (
+    <div
+      className="position-relative"
+      style={{
+        opacity: !selectedColumn ? 1 : _showColumns ? 1 : 0.5,
+      }}
+    >
+      <div className={styles.table_node}>
+        <div
+          className={classNames(
+            styles.header,
+            "d-flex flex-column align-items-start",
+            {
+              [styles.selected]: selected,
+              [styles.collapse]: !_showColumns,
+            }
+          )}
+        >
+          <div className={styles.table_header}>
+            <div
+              className={classNames(styles.node_icon, NODE_TYPE_STYLES[nType])}
+            >
+              <NodeTypeIcon nodeType={nType} />
+              <div>{NODE_TYPE_SHORTHAND[nType]}</div>
+            </div>
+            <div className="lines-2">{table}</div>
+          </div>
+          <div
+            className={classNames(
+              "nodrag ms-3",
+              details ? "text-primary" : "text-muted"
+            )}
+          >
+            <span
+              className={!details ? styles.cursor_disabled : ""}
+              onClick={(e) => {
+                e.stopPropagation();
+                setSelectedTable(table);
+              }}
+            >
+              View Details
+            </span>
+          </div>
+        </div>
+        {_showColumns && (
+          <div
+            className={classNames(styles.content, {
+              [styles.selected]: selected,
+            })}
+            style={{ height: getColY(_columnLen) }}
+          />
+        )}
+      </div>
+      <BidirectionalHandles />
+    </div>
+  );
+};
+
 export const SeeMoreNode: FunctionComponent<NodeProps> = ({ data }) => {
   const { tables = [], prevTable, right, level } = data as TMoreTables;
   const { setMoreTables, setSidebarScreen } = useContext(LineageContext);
@@ -461,3 +583,47 @@ export const ColumnNode: FunctionComponent<NodeProps> = ({ data }) => {
     </div>
   );
 };
+
+const LIGHT_ICONS: Record<string, React.ReactNode> = {
+  INNER_JOIN: <SqlInnerJoinLightIcon />,
+  OUTER_JOIN: <SqlOuterJoinLightIcon />,
+  LEFT_JOIN: <SqlLeftJoinLightIcon />,
+  RIGHT_JOIN: <SqlRightJoinLightIcon />,
+  Filter: <SqlFilterLightIcon />,
+  GroupBy: <SqlGroupByLightIcon />,
+  Limit: <SqlLimitLightIcon />,
+  Sort: <SqlOrderByLightIcon />,
+  Union: <SqlUnionLightIcon />,
+};
+
+const DARK_ICONS: Record<string, React.ReactNode> = {
+  INNER_JOIN: <SqlInnerJoinDarkIcon />,
+  OUTER_JOIN: <SqlOuterJoinDarkIcon />,
+  LEFT_JOIN: <SqlLeftJoinDarkIcon />,
+  RIGHT_JOIN: <SqlRightJoinDarkIcon />,
+  Filter: <SqlFilterDarkIcon />,
+  GroupBy: <SqlGroupByDarkIcon />,
+  Limit: <SqlLimitDarkIcon />,
+  Sort: <SqlOrderByDarkIcon />,
+  Union: <SqlUnionDarkIcon />,
+};
+
+export const OpNode: FunctionComponent<NodeProps> = ({ data }) => {
+  const { type, expression } = data;
+  console.log("OpNode", data);
+  const theme = document.documentElement.getAttribute("data-theme") || "dark";
+  const iconsMap = useMemo(() => {
+    return theme === "dark" ? DARK_ICONS : LIGHT_ICONS;
+  }, [theme]);
+  return (
+    <div style={{ width: T_NODE_W, display: "flex", justifyContent: "center" }}>
+      <BidirectionalHandles />
+      <Tooltip tooltipLabel={expression}>
+        <div className="d-flex flex-column">
+          <div className={styles.op_node}>{iconsMap[type]}</div>
+          <div className={styles.op_type_text}>{type}</div>
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
diff --git a/new_lineage_panel/src/ExposureDetails.tsx b/new_lineage_panel/src/ExposureDetails.tsx
@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import classNames from "classnames";
-import { LineageContext } from "./App";
+import { LineageContext } from "./Lineage";
 import { ExposureMetaData, getExposureDetails } from "./service";
 import { ComponentLoader } from "./components/Loader";
 import styles from "./styles.module.scss";

diff --git a/new_lineage_panel/src/App.tsx → new_lineage_panel/src/Lineage.tsx b/new_lineage_panel/src/App.tsx → new_lineage_panel/src/Lineage.tsx
@@ -67,7 +67,6 @@ import { LineageLegend } from "./components";
 import { ViewsCodeModal } from "./Modals";
 
 export let aiEnabled = false;
-export let isDarkMode = false;
 
 const nodeTypes: NodeTypes = {
   table: TableNode,
@@ -160,7 +159,36 @@ export const LineageContext = createContext<{
   setViewsCodeModal: noop,
 });
 
-function App() {
+export type Details = Record<
+  string,
+  {
+    columns: {
+      name: string;
+      datatype?: string;
+      expression?: string;
+    }[];
+    sql: string;
+    nodeType?: string;
+    name: string;
+    type: string;
+  }
+>;
+
+export const StaticLineageContext = createContext<{
+  collectColumns: Record<string, CollectColumn[]>;
+  selectedColumn: { table: string; name: string } | undefined;
+  details: Details;
+  selectedTable: string;
+  setSelectedTable: Dispatch<SetStateAction<string>>;
+}>({
+  collectColumns: {},
+  selectedColumn: undefined,
+  details: {},
+  selectedTable: "",
+  setSelectedTable: noop,
+});
+
+export const Lineage = () => {
   const flow = useRef<ReactFlowInstance<unknown, unknown>>();
   const [isOpen, setIsOpen] = useState(false);
   const [selectedTable, setSelectedTable] = useState("");
@@ -189,7 +217,7 @@ function App() {
   const [nodeCount, setNodeCount] = useState(0);
   const [minRange, setMinRange] = useState<[number, number]>([0, 0]);
   const [viewsCodeModal, setViewsCodeModal] = useState<ViewsCodeModal | null>(
-    null
+    null,
   );
 
   useEffect(() => {
@@ -223,8 +251,8 @@ function App() {
             edges,
             node.table,
             leftExpansion,
-            rightExpansion
-          )
+            rightExpansion,
+          ),
         );
         return;
       }
@@ -252,14 +280,13 @@ function App() {
           edges,
           node.table,
           leftExpansion,
-          rightExpansion
-        )
+          rightExpansion,
+        ),
       );
       rerender();
     };
 
     const setTheme = ({ theme }: { theme: string }) => {
-      isDarkMode = theme === "dark";
       document.documentElement.setAttribute("data-theme", theme);
       rerender();
     };
@@ -415,6 +442,4 @@ function App() {
       </PopoverContext.Provider>
     </LineageContext.Provider>
   );
-}
-
-export default App;
+};
diff --git a/new_lineage_panel/src/Modals.tsx b/new_lineage_panel/src/Modals.tsx
@@ -1,23 +1,14 @@
-import { useContext, useEffect, useMemo } from "react";
-import { ViewsTypeBadge } from "./components";
-import { LineageContext } from "./App";
+import { useContext, useMemo } from "react";
+import { CodeBlock, ViewsTypeBadge } from "./components";
+import { LineageContext } from "./Lineage";
 import { Modal, ModalBody } from "reactstrap";
 import styles from "./styles.module.scss";
 import { HeaderSection } from "./TableDetails";
 import CloseIcon from "./assets/icons/x-close.svg?react";
-import Prism from "prismjs";
-import "prismjs/components/prism-sql";
-import "prismjs/themes/prism-tomorrow.css";
 import { useReactFlow } from "reactflow";
-import classNames from "classnames";
 
 export function ViewsCodeModal() {
   const { viewsCodeModal, setViewsCodeModal } = useContext(LineageContext);
-  useEffect(() => {
-    setTimeout(() => {
-      Prism.highlightAll();
-    }, 500);
-  }, [viewsCodeModal]);
 
   const flow = useReactFlow();
   const table = useMemo(() => {
@@ -78,29 +69,9 @@ export function ViewsCodeModal() {
               <div className="text-dark-grey fs-xs">
                 List of transformations
               </div>
-              {viewsCodesFlat.map((code) => {
-                return (
-                  <div key={code} className={styles.modal_views_code_container}>
-                    <div className="d-flex gap-sm align-items-center">
-                      <pre
-                        className={classNames(
-                          styles.code_editor_container,
-                          "language-sql"
-                        )}
-                      >
-                        <code
-                          className={classNames(
-                            "language-sql",
-                            styles.code_editor
-                          )}
-                        >
-                          {code}
-                        </code>
-                      </pre>
-                    </div>
-                  </div>
-                );
-              })}
+              {viewsCodesFlat.map((code) => (
+                <CodeBlock key={code} code={code} />
+              ))}
             </div>
           )}
         </div>

diff --git a/new_lineage_panel/src/MoreTables.tsx b/new_lineage_panel/src/MoreTables.tsx
@@ -3,7 +3,7 @@ import styles from "./styles.module.scss";
 import classNames from "classnames";
 import { useReactFlow } from "reactflow";
 import { layoutElementsOnCanvas, moveTableFromSeeMoreToCanvas } from "./graph";
-import { LineageContext } from "./App";
+import { LineageContext } from "./Lineage";
 import { ColumnLineage, Table } from "./service";
 import { CustomInput } from "./components/Form";
 import TestsIcon from "./assets/icons/tests.svg?react";