datajunction-ui 0.0.1-rc.0

package/src/app/components/ListGroupItem.jsx

@@ -0,0 +1,17 @@
+import { Component } from 'react';
+
+export default class ListGroupItem extends Component {
+  render() {
+    const { label, value } = this.props;
+    return (
+      <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">{label}</h6>
+            <p className="mb-0 opacity-75">{value}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/app/components/NamespaceHeader.jsx

@@ -0,0 +1,40 @@
+import { Component } from 'react';
+
+export default class NamespaceHeader extends Component {
+  render() {
+    const { namespace } = this.props;
+    const namespaceParts = namespace.split('.');
+    const namespaceList = namespaceParts.map((piece, index) => {
+      return (
+        <li className="breadcrumb-item">
+          <a
+            className="link-body-emphasis"
+            href={'/namespaces/' + namespaceParts.slice(0, index + 1).join('.')}
+          >
+            {piece}
+          </a>
+        </li>
+      );
+    });
+    return (
+      <ol className="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
+        <li className="breadcrumb-item">
+          <a href="/namespaces/">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              className="bi bi-house-door-fill"
+              viewBox="0 0 16 16"
+              style={{ paddingBottom: '0.2rem' }}
+            >
+              <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" />
+            </svg>
+          </a>
+        </li>
+        {namespaceList}
+      </ol>
+    );
+  }
+}

package/src/app/components/Tab.jsx

@@ -0,0 +1,26 @@
+import { Component } from 'react';
+
+export default class Tab extends Component {
+  render() {
+    const { id, onClick, selectedTab } = this.props;
+    return (
+      <div className={selectedTab === id ? 'col active' : 'col'}>
+        <div className="header-tabs nav-overflow nav nav-tabs">
+          <div className="nav-item">
+            <a
+              id={id}
+              role="button"
+              className="nav-link"
+              tabIndex="0"
+              href="#/"
+              onClick={onClick}
+            >
+              {this.props.name}
+              {/*<span className="rounded-pill badge bg-secondary-soft">823</span>*/}
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/app/components/__tests__/ListGroupItem.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { createRenderer } from 'react-test-renderer/shallow';
+
+import ListGroupItem from '../ListGroupItem';
+
+const renderer = createRenderer();
+
+describe('<ListGroupItem />', () => {
+  it('should render and match the snapshot', () => {
+    renderer.render(
+      <ListGroupItem label="Name" value={<span>Something</span>} />,
+    );
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toMatchSnapshot();
+  });
+});

package/src/app/components/__tests__/NamespaceHeader.test.jsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createRenderer } from 'react-test-renderer/shallow';
+
+import NamespaceHeader from '../NamespaceHeader';
+
+const renderer = createRenderer();
+
+describe('<NamespaceHeader />', () => {
+  it('should render and match the snapshot', () => {
+    renderer.render(<NamespaceHeader namespace="shared.dimensions.accounts" />);
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toMatchSnapshot();
+  });
+});

package/src/app/components/__tests__/__snapshots__/ListGroupItem.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ListGroupItem /> should render and match the snapshot 1`] = `
+<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"
+      >
+        Name
+      </h6>
+      <p
+        className="mb-0 opacity-75"
+      >
+        <span>
+          Something
+        </span>
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/src/app/components/__tests__/__snapshots__/NamespaceHeader.test.jsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
+<ol
+  className="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3"
+>
+  <li
+    className="breadcrumb-item"
+  >
+    <a
+      href="/namespaces/"
+    >
+      <svg
+        className="bi bi-house-door-fill"
+        fill="currentColor"
+        height="16"
+        style={
+          Object {
+            "paddingBottom": "0.2rem",
+          }
+        }
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
+        />
+      </svg>
+    </a>
+  </li>
+  <li
+    className="breadcrumb-item"
+  >
+    <a
+      className="link-body-emphasis"
+      href="/namespaces/shared"
+    >
+      shared
+    </a>
+  </li>
+  <li
+    className="breadcrumb-item"
+  >
+    <a
+      className="link-body-emphasis"
+      href="/namespaces/shared.dimensions"
+    >
+      dimensions
+    </a>
+  </li>
+  <li
+    className="breadcrumb-item"
+  >
+    <a
+      className="link-body-emphasis"
+      href="/namespaces/shared.dimensions.accounts"
+    >
+      accounts
+    </a>
+  </li>
+</ol>
+`;

package/src/app/components/djgraph/DJNode.jsx

@@ -0,0 +1,111 @@
+import React, { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+
+function renderBasedOnDJNodeType(param) {
+  switch (param) {
+    case 'source':
+      return { backgroundColor: '#7EB46150', color: '#7EB461' };
+    case 'transform':
+      return { backgroundColor: '#6DAAA750', color: '#6DAAA7' };
+    case 'dimension':
+      return { backgroundColor: '#CF7D2950', color: '#CF7D29' };
+    case 'metric':
+      return { backgroundColor: '#A27E8650', color: '#A27E86' };
+    case 'cube':
+      return { backgroundColor: '#C2180750', color: '#C21807' };
+    default:
+      return {};
+  }
+}
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+const Collapse = ({ collapsed, text, children }) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
+
+  return (
+    <>
+      <div className="collapse">
+        <button
+          className="collapse-button"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
+          {isCollapsed ? '\u25B6 Show' : '\u25BC Hide'} {text}
+        </button>
+        <div
+          className={`collapse-content ${
+            isCollapsed ? 'collapsed' : 'expanded'
+          }`}
+          aria-expanded={isCollapsed}
+        >
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export function DJNode({ id, data }) {
+  const columnsRenderer = data =>
+    data.column_names.map(col => (
+      <tr>
+        <td>
+          {data.primary_key.includes(col.name) ? (
+            <b>{col.name} (PK)</b>
+          ) : (
+            <>{col.name}</>
+          )}
+        </td>
+        <td style={{ textAlign: 'right' }}>{col.type}</td>
+      </tr>
+    ));
+  // const dimensionsRenderer = data =>
+  //   data.dimensions.map(dim => (
+  //     <tr>
+  //       <td>{dim}</td>
+  //     </tr>
+  //   ));
+
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{ backgroundColor: '#ccc' }}
+      />
+      <div className="dj-node__full" style={renderBasedOnDJNodeType(data.type)}>
+        <div className="dj-node__header">
+          <div className="serif">
+            {data.name
+              .split('.')
+              .slice(0, data.name.split('.').length - 1)
+              .join(' \u25B6 ')}
+          </div>
+        </div>
+        <div className="dj-node__body">
+          <b>{capitalize(data.type)}</b>:{' '}
+          {data.type === 'source' ? data.table : data.display_name}
+          <Collapse
+            collapsed={true}
+            text={data.type !== 'metric' ? 'columns' : 'dimensions'}
+          >
+            <div className="dj-node__metadata">
+              {
+                data.type !== 'metric' ? columnsRenderer(data) : '' // dimensionsRenderer(data)
+              }
+            </div>
+          </Collapse>
+        </div>
+      </div>
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{ backgroundColor: '#ccc' }}
+      />
+    </>
+  );
+}
+
+export default memo(DJNode);

package/src/app/components/djgraph/__tests__/DJNode.test.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { createRenderer } from 'react-test-renderer/shallow';
+
+import { DJNode } from '../DJNode';
+
+const renderer = createRenderer();
+
+describe('<DJNode />', () => {
+  it('should render and match the snapshot', () => {
+    renderer.render(
+      <DJNode
+        id="1"
+        data={{
+          name: 'shared.dimensions.accounts',
+          column_names: ['a'],
+          type: 'source',
+          primary_key: ['id'],
+        }}
+      />,
+    );
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toMatchSnapshot();
+  });
+});

package/src/app/components/djgraph/__tests__/__snapshots__/DJNode.test.tsx.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DJNode /> should render and match the snapshot 1`] = `
+<React.Fragment>
+  <Memo(Handle)
+    position="left"
+    style={
+      Object {
+        "backgroundColor": "#ccc",
+      }
+    }
+    type="target"
+  />
+  <div
+    className="dj-node__full"
+    style={
+      Object {
+        "backgroundColor": "#7EB46150",
+        "color": "#7EB461",
+      }
+    }
+  >
+    <div
+      className="dj-node__header"
+    >
+      <div
+        className="serif"
+      >
+        shared ▶ dimensions
+      </div>
+    </div>
+    <div
+      className="dj-node__body"
+    >
+      <b>
+        Source
+      </b>
+      :
+       
+      <Collapse
+        collapsed={true}
+        text="columns"
+      >
+        <div
+          className="dj-node__metadata"
+        >
+          <tr>
+            <td>
+              <React.Fragment />
+            </td>
+            <td
+              style={
+                Object {
+                  "textAlign": "right",
+                }
+              }
+            />
+          </tr>
+        </div>
+      </Collapse>
+    </div>
+  </div>
+  <Memo(Handle)
+    position="right"
+    style={
+      Object {
+        "backgroundColor": "#ccc",
+      }
+    }
+    type="source"
+  />
+</React.Fragment>
+`;

package/src/app/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * This component is the skeleton around the actual pages, and only contains
+ * components that should be seen on all pages, like the logo or navigation bar.
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import { GlobalStyle } from 'styles/global-styles';
+import { DAGStyle } from '../styles/dag-styles';
+
+import { NamespacePage } from './pages/NamespacePage/Loadable';
+import { NodePage } from './pages/NodePage/Loadable';
+import { NotFoundPage } from './pages/NotFoundPage/Loadable';
+import { Root } from './pages/Root/Loadable';
+import { ListNamespacesPage } from './pages/ListNamespacesPage';
+
+export function App() {
+  return (
+    <BrowserRouter>
+      <Helmet
+        titleTemplate="DataJunction: %s"
+        defaultTitle="DataJunction: A Metrics Platform"
+      >
+        <meta
+          name="description"
+          content="DataJunction serves as a semantic layer to help manage metrics"
+        />
+      </Helmet>
+
+      <Routes>
+        <Route
+          path="/"
+          element={<Root />}
+          children={
+            <>
+              <Route path="/nodes/:name" element={<NodePage />} />
+              <Route
+                path="/namespaces/:namespace"
+                element={<NamespacePage />}
+              />
+              <Route path="/namespaces/" element={<ListNamespacesPage />} />
+            </>
+          }
+        />
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+      <GlobalStyle />
+      <DAGStyle />
+    </BrowserRouter>
+  );
+}

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

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

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import NamespaceHeader from '../../components/NamespaceHeader';
+const datajunction = require('datajunction');
+const dj = new datajunction.DJClient('http://localhost:8000');
+
+export function ListNamespacesPage() {
+  const [state, setState] = useState({
+    namespaces: [],
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const namespaces = await dj.namespaces.get();
+      setState({
+        namespaces: namespaces,
+      });
+    };
+    fetchData().catch(console.error);
+  }, []);
+
+  const namespacesList = state.namespaces.map(node => (
+    <tr>
+      <td>
+        <a href={'/namespaces/' + node.namespace}>{node.namespace}</a>
+      </td>
+      <td>5</td>
+    </tr>
+  ));
+
+  // @ts-ignore
+  return (
+    <>
+      <div className="mid">
+        <NamespaceHeader namespace="" />
+        <div className="card">
+          <div className="card-header">
+            <h2>Namespaces</h2>
+            <div className="table-responsive">
+              <table className="card-table table">
+                <thead>
+                  <th>Namespace</th>
+                  <th>Node Count</th>
+                </thead>
+                {namespacesList}
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NamespacePage /> should render and match the snapshot 1`] = `
+<div
+  className="mid"
+>
+  <NamespaceHeader />
+  <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>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createRenderer } from 'react-test-renderer/shallow';
+
+import { NamespacePage } from '../index';
+
+const renderer = createRenderer();
+
+describe('<NamespacePage />', () => {
+  it('should render and match the snapshot', () => {
+    renderer.render(<NamespacePage />);
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toMatchSnapshot();
+  });
+});