datajunction-ui 0.0.1-rc.0

package/src/app/pages/NamespacePage/index.jsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { DataJunctionAPI } from '../../services/DJService';
+import NamespaceHeader from '../../components/NamespaceHeader';
+import NodeStatus from '../NodePage/NodeStatus';
+
+export async function loader({ params }) {
+  const djNode = await DataJunctionAPI.node(params.name);
+  if (djNode.type === 'metric') {
+    const metricNode = await DataJunctionAPI.metric(params.name);
+    djNode.dimensions = metricNode.dimensions;
+  }
+  return djNode;
+}
+
+export function NamespacePage() {
+  const { namespace } = useParams();
+
+  const [state, setState] = useState({
+    namespace: namespace,
+    nodes: [],
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const djNodes = await DataJunctionAPI.namespace(namespace);
+      const nodes = djNodes.map(node => {
+        return DataJunctionAPI.node(node);
+      });
+      const foundNodes = await Promise.all(nodes);
+      setState({
+        namespace: namespace,
+        nodes: foundNodes,
+      });
+    };
+    fetchData().catch(console.error);
+  }, [namespace]);
+
+  const nodesList = state.nodes.map(node => (
+    <tr>
+      <td>
+        <a href={'/namespaces/' + node.namespace}>{node.namespace}</a>
+      </td>
+      <td>
+        <a href={'/nodes/' + node.name} className="link-table">
+          {node.display_name}
+        </a>
+        <span
+          className="rounded-pill badge bg-secondary-soft"
+          style={{ marginLeft: '0.5rem' }}
+        >
+          {node.version}
+        </span>
+      </td>
+      <td>
+        <span className={'node_type__' + node.type + ' badge node_type'}>
+          {node.type}
+        </span>
+      </td>
+      <td>
+        <NodeStatus node={node} />
+      </td>
+      <td>
+        <span className="status">{node.mode}</span>
+      </td>
+    </tr>
+  ));
+
+  // @ts-ignore
+  return (
+    <div className="mid">
+      <NamespaceHeader namespace={namespace} />
+      <div className="card">
+        <div className="card-header">
+          <h2>Nodes</h2>
+          <div className="table-responsive">
+            <table className="card-table table">
+              <thead>
+                <th>Namespace</th>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Status</th>
+                <th>Mode</th>
+              </thead>
+              {nodesList}
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/pages/NodePage/Loadable.jsx

@@ -0,0 +1,23 @@
+/**
+ * Asynchronously loads the component for the Node page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from 'utils/loadable';
+import styled from 'styled-components/macro';
+
+const LoadingWrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const NodePage = lazyLoad(
+  () => import('./index'),
+  module => module.NodePage,
+  {
+    fallback: <LoadingWrapper></LoadingWrapper>,
+  },
+);

package/src/app/pages/NodePage/NodeColumnTab.jsx

@@ -0,0 +1,44 @@
+import { Component } from 'react';
+
+export default class NodeColumnTab extends Component {
+  columnList = node => {
+    return node.columns.map(col => (
+      <tr>
+        <td className="text-start">{col.name}</td>
+        <td>
+          <span className="node_type__transform badge node_type">
+            {col.type}
+          </span>
+        </td>
+        <td>{col.dimension ? col.dimension.name : ''}</td>
+        <td>
+          {col.attributes.find(
+            attr => attr.attribute_type.name === 'dimension',
+          ) ? (
+            <span className="node_type__dimension badge node_type">
+              dimensional
+            </span>
+          ) : (
+            ''
+          )}
+        </td>
+      </tr>
+    ));
+  };
+
+  render() {
+    return (
+      <div className="table-responsive">
+        <table className="card-inner-table table">
+          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+            <th className="text-start">Column</th>
+            <th>Type</th>
+            <th>Dimension</th>
+            <th>Attributes</th>
+          </thead>
+          {this.columnList(this.props.node)}
+        </table>
+      </div>
+    );
+  }
+}

package/src/app/pages/NodePage/NodeGraphTab.jsx

@@ -0,0 +1,160 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import ReactFlow, {
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  MarkerType,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import DJNode from '../../components/djgraph/DJNode';
+import { DataJunctionAPI } from '../../services/DJService';
+import dagre from 'dagre';
+
+const NodeLineage = djNode => {
+  const nodeTypes = useMemo(() => ({ DJNode: DJNode }), []);
+
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const minimapStyle = {
+    height: 100,
+    width: 150,
+  };
+
+  const dagreGraph = useMemo(() => new dagre.graphlib.Graph(), []);
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+  useEffect(() => {
+    const setElementsLayout = (
+      nodes,
+      edges,
+      direction = 'LR',
+      nodeWidth = 800,
+      nodeHeight = 150,
+    ) => {
+      const isHorizontal = direction === 'TB';
+      dagreGraph.setGraph({ rankdir: direction });
+
+      nodes.forEach(node => {
+        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+      });
+
+      edges.forEach(edge => {
+        dagreGraph.setEdge(edge.source, edge.target);
+      });
+
+      dagre.layout(dagreGraph);
+
+      nodes.forEach(node => {
+        const nodeWithPosition = dagreGraph.node(node.id);
+        node.targetPosition = isHorizontal ? 'left' : 'top';
+        node.sourcePosition = isHorizontal ? 'right' : 'bottom';
+        node.position = {
+          x: nodeWithPosition.x - nodeWidth / 2,
+          y: nodeWithPosition.y - nodeHeight / 2,
+        };
+        return node;
+      });
+
+      return { nodes, edges };
+    };
+
+    const dagFetch = async () => {
+      let upstreams = await DataJunctionAPI.upstreams(djNode.djNode.name);
+      let downstreams = await DataJunctionAPI.downstreams(djNode.djNode.name);
+      let djNodes = [...new Set([...upstreams, ...downstreams, djNode.djNode])];
+      let edges = [];
+      djNodes.forEach(obj => {
+        obj.parents.forEach(parent => {
+          if (parent.name) {
+            edges.push({
+              id: obj.name + '-' + parent.name,
+              target: obj.name,
+              source: parent.name,
+              animated: true,
+              markerEnd: {
+                type: MarkerType.Arrow,
+              },
+            });
+          }
+        });
+
+        obj.columns.forEach(col => {
+          if (col.dimension) {
+            edges.push({
+              id: obj.name + '-' + col.dimension.name,
+              target: obj.name,
+              source: col.dimension.name,
+              draggable: true,
+            });
+          }
+        });
+      });
+      const nodes = djNodes.map(node => {
+        const primary_key = node.columns
+          .filter(col =>
+            col.attributes.some(
+              attr => attr.attribute_type.name === 'primary_key',
+            ),
+          )
+          .map(col => col.name);
+        const column_names = node.columns.map(col => {
+          return { name: col.name, type: col.type };
+        });
+        return {
+          id: String(node.name),
+          type: 'DJNode',
+          data: {
+            label:
+              node.table !== null
+                ? String(node.schema_ + '.' + node.table)
+                : String(node.name),
+            table: node.table,
+            name: String(node.name),
+            display_name: String(node.display_name),
+            type: node.type,
+            primary_key: primary_key,
+            column_names: column_names,
+            // dimensions: dimensions,
+          },
+          // parentNode: [node.name.split(".").slice(-2, -1)],
+          // extent: 'parent',
+        };
+      });
+
+      setNodes(nodes);
+      setEdges(edges);
+      setElementsLayout(nodes, edges);
+    };
+
+    dagFetch();
+  }, [dagreGraph, djNode.djNode, setEdges, setNodes]);
+
+  const onConnect = useCallback(
+    params => setEdges(eds => addEdge(params, eds)),
+    [setEdges],
+  );
+
+  return (
+    <div style={{ height: '600px' }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        snapToGrid={true}
+        fitView
+      >
+        <MiniMap style={minimapStyle} zoomable pannable />
+        <Controls />
+        <Background color="#aaa" gap={16} />
+      </ReactFlow>
+    </div>
+  );
+};
+export default NodeLineage;

package/src/app/pages/NodePage/NodeInfoTab.jsx

@@ -0,0 +1,87 @@
+import { Component } from 'react';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
+import { format } from 'sql-formatter';
+
+import NodeStatus from './NodeStatus';
+import ListGroupItem from '../../components/ListGroupItem';
+
+SyntaxHighlighter.registerLanguage('sql', sql);
+foundation.hljs['padding'] = '2rem';
+
+export default class NodeInfoTab extends Component {
+  nodeTags = this.props.node?.tags.map(tag => <div>{tag}</div>);
+  queryDiv = this.props.node?.query ? (
+    <div className="list-group-item d-flex">
+      <div className="d-flex gap-2 w-100 justify-content-between py-3">
+        <div
+          style={{
+            width: window.innerWidth * 0.8,
+          }}
+        >
+          <h6 className="mb-0 w-100">Query</h6>
+          <SyntaxHighlighter language="sql" style={foundation}>
+            {format(this.props.node?.query, {
+              language: 'spark',
+              tabWidth: 2,
+              keywordCase: 'upper',
+              denseOperators: true,
+              logicalOperatorNewline: 'before',
+              expressionWidth: 10,
+            })}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+
+  render() {
+    return (
+      <div className="list-group align-items-center justify-content-between flex-md-row gap-2">
+        <ListGroupItem
+          label="Description"
+          value={this.props.node?.description}
+        />
+        <div className="list-group-item d-flex">
+          <div className="d-flex gap-2 w-100 justify-content-between py-3">
+            <div>
+              <h6 className="mb-0 w-100">Version</h6>
+
+              <p className="mb-0 opacity-75">
+                <span
+                  className="rounded-pill badge bg-secondary-soft"
+                  style={{ marginLeft: '0.5rem', fontSize: '100%' }}
+                >
+                  {this.props.node?.version}
+                </span>
+              </p>
+            </div>
+            <div>
+              <h6 className="mb-0 w-100">Status</h6>
+              <p className="mb-0 opacity-75">
+                <NodeStatus node={this.props.node} />
+              </p>
+            </div>
+            <div>
+              <h6 className="mb-0 w-100">Mode</h6>
+              <p className="mb-0 opacity-75">
+                <span className="status">{this.props.node?.mode}</span>
+              </p>
+            </div>
+            <div>
+              <h6 className="mb-0 w-100">Tags</h6>
+              <p className="mb-0 opacity-75">{this.nodeTags}</p>
+            </div>
+          </div>
+        </div>
+        {this.queryDiv}
+        <div className="list-group-item d-flex">
+          {this.props.node?.primary_key}
+        </div>
+      </div>
+    );
+  }
+}

package/src/app/pages/NodePage/NodeStatus.jsx

@@ -0,0 +1,34 @@
+import { Component } from 'react';
+
+export default class NodeStatus extends Component {
+  render() {
+    const { node } = this.props;
+    return (
+      <span className="status__valid status" style={{ alignContent: 'center' }}>
+        {node?.status === 'valid' ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="25"
+            fill="currentColor"
+            className="bi bi-check-circle-fill"
+            viewBox="0 0 16 16"
+          >
+            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            className="bi bi-x-circle-fill"
+            viewBox="0 0 16 16"
+          >
+            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
+          </svg>
+        )}
+      </span>
+    );
+  }
+}

package/src/app/pages/NodePage/index.jsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { DataJunctionAPI } from '../../services/DJService';
+import Tab from '../../components/Tab';
+import NamespaceHeader from '../../components/NamespaceHeader';
+import NodeInfoTab from './NodeInfoTab';
+import NodeColumnTab from './NodeColumnTab';
+import NodeLineage from './NodeGraphTab';
+
+export function NodePage() {
+  const [state, setState] = useState({
+    selectedTab: 0,
+  });
+
+  const [node, setNode] = useState();
+
+  const onClickTab = id => () => {
+    setState({ selectedTab: id });
+  };
+
+  const buildTabs = tab => {
+    return (
+      <Tab
+        key={tab.id}
+        id={tab.id}
+        name={tab.name}
+        onClick={onClickTab(tab.id)}
+        selectedTab={state.selectedTab}
+      />
+    );
+  };
+
+  const { name } = useParams();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await DataJunctionAPI.node(name);
+      setNode(data);
+    };
+    fetchData().catch(console.error);
+  }, [name]);
+
+  const TabsJson = [
+    {
+      id: 0,
+      name: 'Info',
+    },
+    {
+      id: 1,
+      name: 'Columns',
+    },
+    {
+      id: 2,
+      name: 'Graph',
+    },
+  ];
+  //
+  //
+  let tabToDisplay = null;
+  switch (state.selectedTab) {
+    case 0:
+      tabToDisplay = node ? <NodeInfoTab node={node} /> : '';
+      break;
+    case 1:
+      tabToDisplay = <NodeColumnTab node={node} />;
+      break;
+    case 2:
+      tabToDisplay = <NodeLineage djNode={node} />;
+      break;
+    default:
+      tabToDisplay = <NodeInfoTab node={node} />;
+  }
+
+  // @ts-ignore
+  return (
+    <div className="node__header">
+      <NamespaceHeader namespace={name.split('.').slice(0, -1).join('.')} />
+      <div className="card">
+        <div className="card-header">
+          <h3 className="card-title align-items-start flex-column">
+            <span className="card-label fw-bold text-gray-800">
+              {node?.display_name}
+            </span>
+          </h3>
+          <span
+            className="fs-6 fw-semibold text-gray-400"
+            style={{ marginTop: '-4rem' }}
+          >
+            Updated {new Date(node?.updated_at).toDateString()}
+          </span>
+          <div className="align-items-center row">
+            {TabsJson.map(buildTabs)}
+          </div>
+          {tabToDisplay}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/pages/NotFoundPage/Loadable.tsx

@@ -0,0 +1,14 @@
+/**
+ * Asynchronously loads the component for NotFoundPage
+ */
+
+import * as React from 'react';
+import { lazyLoad } from 'utils/loadable';
+
+export const NotFoundPage = lazyLoad(
+  () => import('./index'),
+  module => module.NotFoundPage,
+  {
+    fallback: <></>,
+  },
+);

package/src/app/pages/NotFoundPage/P.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components/macro';
+
+export const P = styled.p`
+  font-size: 1rem;
+  line-height: 1.5;
+  color: ${p => p.theme.textSecondary};
+  margin: 0.625rem 0 1.5rem 0;
+`;

package/src/app/pages/NotFoundPage/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NotFoundPage /> should match snapshot 1`] = `
+.c2 {
+  font-size: 1rem;
+  line-height: 1.5;
+  margin: 0.625rem 0 1.5rem 0;
+}
+
+.c0 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-height: 320px;
+}
+
+.c1 {
+  margin-top: -8vh;
+  font-weight: bold;
+  font-size: 3.375rem;
+}
+
+.c1 span {
+  font-size: 3.125rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    4
+    <span
+      aria-label="Crying Face"
+      role="img"
+    >
+      😢
+    </span>
+    4
+  </div>
+  <p
+    className="c2"
+  >
+    Page not found.
+  </p>
+</div>
+`;

package/src/app/pages/NotFoundPage/__tests__/index.test.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { NotFoundPage } from '..';
+import { MemoryRouter } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+import renderer from 'react-test-renderer';
+
+const renderPage = () =>
+  renderer.create(
+    <MemoryRouter>
+      <HelmetProvider>
+        <NotFoundPage />
+      </HelmetProvider>
+    </MemoryRouter>,
+  );
+
+describe('<NotFoundPage />', () => {
+  it('should match snapshot', () => {
+    const notFoundPage = renderPage();
+    expect(notFoundPage.toJSON()).toMatchSnapshot();
+  });
+});

package/src/app/pages/NotFoundPage/index.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import styled from 'styled-components/macro';
+import { P } from './P';
+import { Helmet } from 'react-helmet-async';
+
+export function NotFoundPage() {
+  return (
+    <>
+      <Helmet>
+        <title>404 Page Not Found</title>
+        <meta name="description" content="Page not found" />
+      </Helmet>
+      <Wrapper>
+        <Title>
+          4
+          <span role="img" aria-label="Crying Face">
+            😢
+          </span>
+          4
+        </Title>
+        <P>Page not found.</P>
+      </Wrapper>
+    </>
+  );
+}
+
+const Wrapper = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  min-height: 320px;
+`;
+
+const Title = styled.div`
+  margin-top: -8vh;
+  font-weight: bold;
+  color: ${p => p.theme.text};
+  font-size: 3.375rem;
+
+  span {
+    font-size: 3.125rem;
+  }
+`;