datajunction-ui 0.0.1-rc.0

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

@@ -0,0 +1,23 @@
+/**
+ * Asynchronously loads the component for the root 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 Root = lazyLoad(
+  () => import('./index'),
+  module => module.Root,
+  {
+    fallback: <LoadingWrapper></LoadingWrapper>,
+  },
+);

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

@@ -0,0 +1,42 @@
+import { Outlet } from 'react-router-dom';
+import logo from './assets/dj-logo.png';
+import { Helmet } from 'react-helmet-async';
+
+export function Root() {
+  return (
+    <>
+      <Helmet>
+        <title>DataJunction</title>
+        <meta
+          name="description"
+          content="DataJunction Metrics Platform Webapp"
+        />
+      </Helmet>
+      <div className="container d-flex align-items-center justify-content-between">
+        <div className="header">
+          <div className="logo">
+            <h2>
+              <img src={logo} alt="DJ Logo" width="15%" />
+              DataJunction
+            </h2>
+          </div>
+          <div className="menu">
+            <div className="menu-item here menu-here-bg menu-lg-down-accordion me-0 me-lg-2 fw-semibold">
+              <span className="menu-link">
+                <span className="menu-title">
+                  <a href="/">Explore</a>
+                </span>
+              </span>
+              <span className="menu-link">
+                <span className="menu-title">
+                  <a href="/">Help</a>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Outlet />
+    </>
+  );
+}

package/src/app/services/DJService.js

@@ -0,0 +1,124 @@
+import { MarkerType } from 'reactflow';
+
+const DJ_URL = 'http://localhost:8000'; //process.env.REACT_APP_DJ_URL;
+
+export const DataJunctionAPI = {
+  node: async function (name) {
+    const data = await (await fetch(DJ_URL + '/nodes/' + name + '/')).json();
+    return data;
+  },
+
+  upstreams: async function (name) {
+    const data = await (
+      await fetch(DJ_URL + '/nodes/' + name + '/upstream/')
+    ).json();
+    return data;
+  },
+
+  downstreams: async function (name) {
+    const data = await (
+      await fetch(DJ_URL + '/nodes/' + name + '/downstream/')
+    ).json();
+    return data;
+  },
+
+  metric: async function (name) {
+    const data = await (await fetch(DJ_URL + '/metrics/' + name + '/')).json();
+    return data;
+  },
+
+  namespace: async function (nmspce) {
+    const data = await (
+      await fetch(DJ_URL + '/namespaces/' + nmspce + '/')
+    ).json();
+    return data;
+  },
+
+  namespaces: async function () {
+    const data = await (await fetch(DJ_URL + '/namespaces/')).json();
+    return data;
+  },
+
+  lineage: async function (node) {},
+
+  dag: async function (namespace = 'default') {
+    const edges = [];
+    const data = await (await fetch(DJ_URL + '/nodes/')).json();
+
+    // const metrics = await (await fetch(DJ_URL + '/metrics/')).json();
+
+    data.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 namespaces = new Set(
+      data.flatMap(node => node.name.split('.').slice(0, -1)),
+    );
+    const namespaceNodes = Array.from(namespaces).map(namespace => {
+      return {
+        id: String(namespace),
+        type: 'DJNamespace',
+        data: {
+          label: String(namespace),
+        },
+      };
+    });
+
+    const nodes = data.map((node, index) => {
+      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 };
+      });
+      // const dimensions = node.type === "metric" ? metrics.filter(metric => metric.name === node.name)[0].dimensions : [];
+      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',
+      };
+    });
+
+    return { edges: edges, nodes: nodes, namespaces: namespaceNodes };
+  },
+};

package/src/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * index.tsx
+ *
+ * This is the entry file for the application, only setup and boilerplate
+ * code.
+ */
+
+import 'react-app-polyfill/ie11';
+import 'react-app-polyfill/stable';
+
+import * as React from 'react';
+import ReactDOM from 'react-dom/client';
+import FontFaceObserver from 'fontfaceobserver';
+
+// Use consistent styling
+import 'sanitize.css/sanitize.css';
+
+import { App } from 'app';
+
+import { HelmetProvider } from 'react-helmet-async';
+import reportWebVitals from 'reportWebVitals';
+
+// Observe loading of Inter (to remove 'Inter', remove the <link> tag in
+// the index.html file and this observer)
+const openSansObserver = new FontFaceObserver('Inter', {});
+
+// When Inter is loaded, add a font-family using Inter to the body
+openSansObserver.load().then(() => {
+  document.body.classList.add('fontLoaded');
+});
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
+
+root.render(
+  <HelmetProvider>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </HelmetProvider>,
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/src/react-app-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react-scripts" />
+
+// To solve the issue: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
+/// <reference types="styled-components/cssprop" />

package/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/setupTests.ts

@@ -0,0 +1,8 @@
+// react-testing-library renders your components to document.body,
+// this adds jest-dom's custom assertions
+import '@testing-library/jest-dom/extend-expect';
+
+import 'react-app-polyfill/ie11';
+import 'react-app-polyfill/stable';
+
+import 'jest-styled-components';

package/src/styles/dag-styles.ts

@@ -0,0 +1,117 @@
+import { createGlobalStyle } from 'styled-components';
+// import { StyleConstants } from './StyleConstants';
+/* istanbul ignore next */
+export const DAGStyle = createGlobalStyle`
+  .react-flow__node-custom {
+    font-size: 1.2em;
+    width: 180px;
+    background: #f5f5f6;
+    color: #222;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 15%), 0 2px 4px -1px rgb(0 0 0 / 8%);
+    border-radius: 2px;
+  }
+  .react-flow {
+      width: 100%; height: 800px; overflow: hidden; position: relative; z-index: 0;
+  }
+  .react-flow__node-custom .react-flow__handle {
+    top: 24px;
+    right: -15px;
+    width: 6px;
+    height: 10px;
+    border-radius: 2px;
+    background-color: #778899;
+  }
+  
+  .react-flow__node.circle {
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 700;
+  }
+  
+  .react-flow__node.annotation {
+    border-radius: 0;
+    text-align: left;
+    background: white;
+    border: none;
+    line-height: 1.4;
+    width: 225px;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 15%), 0 2px 4px -1px rgb(0 0 0 / 8%);
+  }
+  
+  .react-flow__node.annotation .react-flow__handle {
+    display: none;
+  }
+  
+  .dj-node__header {
+    font-weight: 400;
+    text-transform: uppercase;
+    font-family: 'jetbrains-mono',monospace;
+    font-size: 1.5em;
+    padding-inline-start: 0.5rem;
+    padding-inline-end: 0.5rem;
+    padding-left: 0.75em;
+    padding-top: 0.35rem;
+    padding-bottom: 0.35rem;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: #c4cbd1;
+  }
+  
+  .dj-node__body {
+    background-color: rgb(254, 254, 254);
+    padding: 0.5em 0.7em 0.9em 0.7em;
+    font-family: 'nt-dapper',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+    font-size: 1.7em;
+  }
+  
+  .dj-node__full {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    border-width: 1px;
+    border-style: solid;
+    border-image: initial;
+    border-color: #b0b9c2;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  }
+  
+  .dj-node__metadata {
+    padding: 1em;
+    font-family: 'nt-dapper',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+    font-size: 1em;
+  }
+  
+  .collapse-button {
+    display: block;
+    width: 100%;
+    font: 0.8em "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    text-transform: uppercase;
+    border: none;
+    margin-top: 0.2em;
+    padding: 0.35em;
+  }
+  .collapse {
+      padding-top: 10px;
+  }
+  .collapse-content.collapsed {
+    display: none;
+  }
+  .collapsed-content.expanded {
+    display: block;
+  }
+  .collapse tr td {
+      padding-left: 5px;
+      padding-bottom: 5px;
+  }
+  .serif {
+      font-family: 'jetbrains-mono', monospace;
+      text-transform: lowercase;
+  }
+
+`;