Merge pull request #34 from DataRecce/chore/restructure-the-js-structure

[Chore] Update the js project structure

js/app/page.tsx

@@ -1,12 +1,10 @@
 "use client";
 
-import DiffView from "@/components/DiffView";
-import LineageView from "@/components/lineagediff/LineageView";
+import QueryView from "@/components/query/QueryView";
+import LineageView from "@/components/lineage/LineageView";
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useLayoutEffect } from "react";
-import * as amplitude from '@amplitude/analytics-browser';
-
-
+import * as amplitude from "@amplitude/analytics-browser";
 
 function getCookie(key: string) {
   var b = document.cookie.match("(^|;)\\s*" + key + "\\s*=\\s*([^;]+)");
@@ -20,7 +18,7 @@ export default function Home() {
       try {
         // Initialize Amplitude
         amplitude.init(process.env.AMPLITUDE_API_KEY, userId, {
-            defaultTracking: true,
+          defaultTracking: true,
         });
       } catch (e) {
         console.error(e);
@@ -40,7 +38,7 @@ export default function Home() {
           <LineageView />
         </TabPanel>
         <TabPanel p={0}>
-          <DiffView />
+          <QueryView />
         </TabPanel>
       </TabPanels>
     </Tabs>

js/src/components/lineagediff/GraphEdge.tsx → js/src/components/lineage/GraphEdge.tsx

@@ -1,8 +1,8 @@
 import { BaseEdge, EdgeProps, getBezierPath } from "reactflow";
-import { LineageGraphEdge } from "./lineagediff";
+import { LineageGraphEdge } from "./lineage";
 import { getIconForChangeStatus } from "./styles";
 
-import "./lineagediff.css";
+import "./styles.css";
 
 interface GraphEdgeProps extends EdgeProps<LineageGraphEdge> {}
 

js/src/components/lineagediff/GraphNode.tsx → js/src/components/lineage/GraphNode.tsx

@@ -2,10 +2,10 @@ import { Box, Flex, Icon, Text, Tooltip } from "@chakra-ui/react";
 import React from "react";
 
 import { Handle, NodeProps, Position, useStore } from "reactflow";
-import { LineageGraphNode } from "./lineagediff";
+import { LineageGraphNode } from "./lineage";
 import { getIconForChangeStatus, getIconForResourceType } from "./styles";
 
-import "./lineagediff.css";
+import "./styles.css";
 
 interface GraphNodeProps extends NodeProps<LineageGraphNode> {}
 

js/src/components/lineagediff/LineageView.tsx → js/src/components/lineage/LineageView.tsx

@@ -1,10 +1,10 @@
-import { PUBLIC_API_URL } from "@/const";
+import { PUBLIC_API_URL } from "@/lib/const";
 import {
   LineageGraph,
   buildLineageGraph,
   highlightPath,
   toReactflow,
-} from "./lineagediff";
+} from "./lineage";
 import { Box, Flex, Icon, Tooltip, useDisclosure } from "@chakra-ui/react";
 import axios, { AxiosError } from "axios";
 import React, { useCallback, useEffect, useState } from "react";
@@ -17,9 +17,7 @@ import ReactFlow, {
   MiniMap,
   Panel,
   Background,
-  BackgroundVariant,
   ReactFlowProvider,
-  useReactFlow,
 } from "reactflow";
 import dagre from "dagre";
 import "reactflow/dist/style.css";

js/src/components/lineagediff/NodeView.tsx → js/src/components/lineage/NodeView.tsx

@@ -10,8 +10,8 @@ import {
   Tabs,
   VStack,
 } from "@chakra-ui/react";
-import { LineageGraphNode, NodeData } from "./lineagediff";
-import { SchemaView } from "../schemadiff/SchemaView";
+import { LineageGraphNode } from "./lineage";
+import { SchemaView } from "../schema/SchemaView";
 
 interface NodeViewProps {
   node: LineageGraphNode;

js/src/components/lineagediff/lineagediff.test.ts → js/src/components/lineage/lineage.test.ts

@@ -1,16 +1,14 @@
 import {
   LineageData,
-  LineageGraph,
   LineageGraphEdge,
   LineageGraphNode,
   buildLineageGraph,
   highlightPath,
   toReactflow,
-} from "./lineagediff";
+} from "./lineage";
 import { Node, Edge } from "reactflow";
 
 import { find } from "lodash";
-import { queryDiff } from "../../querydiff";
 
 test("lineage diff", () => {
   const base = {

js/src/components/lineagediff/lineagediff.ts → js/src/components/lineage/lineage.ts

@@ -1,5 +1,4 @@
 import _ from "lodash";
-import "@/styles/diff.css";
 import { Node, Edge, Position } from "reactflow";
 import { getNeighborSet } from "./graph";
 

js/src/components/DiffView.tsx → js/src/components/query/QueryView.tsx

@@ -2,24 +2,24 @@ import "react-data-grid/lib/styles.css";
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import DataGrid, { ColumnOrColumnGroup } from "react-data-grid";
 import axios, { AxiosError } from "axios";
-import { DataFrame, queryDiff } from "@/querydiff";
-import { PUBLIC_API_URL } from "@/const";
+import { DataFrame, queryDiff } from "@/components/query/query";
+import { PUBLIC_API_URL } from "../../lib/const";
 import { Box, Button, Flex, Textarea } from "@chakra-ui/react";
 
-interface DiffViewDataGridProps {
+interface QueryViewDataGridProps {
   loading: boolean;
   error?: string;
   errorStep?: string;
   columns: any;
   rows: any;
 }
-const DiffViewDataGrid = ({
+const QueryViewDataGrid = ({
   loading,
   error,
   errorStep,
   columns,
   rows,
-}: DiffViewDataGridProps) => {
+}: QueryViewDataGridProps) => {
   if (loading) {
     return <>Loading...</>;
   }
@@ -47,7 +47,7 @@ const DiffViewDataGrid = ({
   );
 };
 
-const DiffView = () => {
+const QueryView = () => {
   const [query, setQuery] = useState('select * from {{ ref("mymodel") }}');
 
   const [loading, setLoading] = useState(false);
@@ -144,7 +144,7 @@ const DiffView = () => {
         style={{ width: "100%" }}
       />
       <Box backgroundColor="gray.100" height="50vh">
-        <DiffViewDataGrid
+        <QueryViewDataGrid
           loading={loading}
           error={error}
           errorStep={errorStep}
@@ -156,4 +156,4 @@ const DiffView = () => {
   );
 };
 
-export default DiffView;
+export default QueryView;

js/src/querydiff.test.ts → js/src/components/query/query.test.ts

@@ -1,4 +1,4 @@
-import { queryDiff } from "./querydiff";
+import { queryDiff } from "./query";
 
 test("query diff", () => {
   const base = {

js/src/querydiff.tsx → js/src/components/query/query.tsx

@@ -1,6 +1,6 @@
 import { ColumnOrColumnGroup, textEditor } from "react-data-grid";
 import _ from "lodash";
-import "./styles/diff.css";
+import "./styles.css";
 import { Box, Flex, Icon } from "@chakra-ui/react";
 import { VscClose, VscKey } from "react-icons/vsc";
 

js/src/components/schemadiff/SchemaView.tsx → js/src/components/schema/SchemaView.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
-import { NodeColumnData } from "../lineagediff/lineagediff";
-import { mergeColumns, toDataGrid } from "./schemadiff";
+import { NodeColumnData } from "../lineage/lineage";
+import { mergeColumns, toDataGrid } from "./schema";
 import "react-data-grid/lib/styles.css";
 import DataGrid from "react-data-grid";
 

js/src/components/schemadiff/schemadiff.test.ts → js/src/components/schema/schema.test.ts

@@ -1,5 +1,5 @@
-import { NodeData } from "../lineagediff/lineagediff";
-import { mergeColumns } from "./schemadiff";
+import { NodeData } from "../lineage/lineage";
+import { mergeColumns } from "./schema";
 
 function _schema(columns: { [key: string]: string }): NodeData["columns"] {
   const result: ReturnType<typeof _schema> = {};

js/src/components/schemadiff/schemadiff.tsx → js/src/components/schema/schema.tsx

@@ -1,5 +1,5 @@
-import { mergeKeysWithStatus } from "@/mergeKeys";
-import { NodeData } from "../lineagediff/lineagediff";
+import { mergeKeysWithStatus } from "@/lib/mergeKeys";
+import { NodeData } from "../lineage/lineage";
 import { Column, ColumnOrColumnGroup, RenderCellProps } from "react-data-grid";
 
 import "./style.css";