datajunction-ui 0.0.1-rc.1 → 0.0.1-rc.11

package/.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: CI/CD
 
 on:
   push:
-    branches: [master]
+    branches: [main]
   pull_request:
-    branches: [master]
+    branches: [main]
 
 jobs:
   build:
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set up Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3.6.
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 

package/.prettierignore

@@ -1,4 +1,6 @@
 build/
 node_modules/
 package-lock.json
-yarn.lock
+yarn.lock
+dist/
+coverage/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.1",
+  "version": "0.0.1-rc.11",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -32,20 +32,21 @@
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
+    "@types/react-select": "5.0.1",
     "@types/react-test-renderer": "^18.0.0",
     "@types/rimraf": "^3.0.2",
     "@types/shelljs": "^0.8.11",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.18.0",
+    "babel-loader": "9.1.2",
     "chalk": "4.1.2",
+    "cronstrue": "2.27.0",
     "cross-env": "7.0.3",
+    "css-loader": "6.7.3",
     "dagre": "^0.8.5",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "fbemitter": "3.0.0",
-    "flux": "4.0.4",
+    "datajunction": "0.0.1-rc.0",
+    "file-loader": "6.2.0",
     "fontfaceobserver": "2.3.0",
     "husky": "8.0.1",
     "i18next": "21.9.2",
@@ -66,6 +67,7 @@
     "react-redux": "7.2.8",
     "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1",
+    "react-select": "5.7.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-test-renderer": "18.2.0",
     "reactflow": "^11.7.0",
@@ -76,6 +78,7 @@
     "serve": "14.0.1",
     "shelljs": "0.8.5",
     "sql-formatter": "^12.2.0",
+    "style-loader": "3.3.2",
     "stylelint": "14.12.0",
     "stylelint-config-recommended": "9.0.0",
     "ts-loader": "9.4.2",
@@ -83,7 +86,8 @@
     "typescript": "4.6.4",
     "web-vitals": "2.1.4",
     "webpack": "5.81.0",
-    "webpack-cli": "5.0.2"
+    "webpack-cli": "5.0.2",
+    "webpack-dev-server": "4.13.3"
   },
   "scripts": {
     "webpack-start": "webpack-dev-server --open",
@@ -102,7 +106,8 @@
     "generate": "plop --plopfile internals/generators/plopfile.ts",
     "cleanAndSetup": "ts-node ./internals/scripts/clean.ts",
     "prettify": "prettier --write",
-    "extract-messages": "i18next-scanner --config=internals/extractMessages/i18next-scanner.config.js"
+    "extract-messages": "i18next-scanner --config=internals/extractMessages/i18next-scanner.config.js",
+    "prepublishOnly": "webpack --mode=production"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -150,6 +155,9 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "7.18.6",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react-hooks": "4.6.0",
     "html-webpack-plugin": "5.5.1",
     "jest": "^29.5.0",
     "mini-css-extract-plugin": "2.7.5"

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

@@ -14,30 +14,72 @@ exports[`<App /> should render and match the snapshot 1`] = `
       name="description"
     />
   </Helmet>
-  <Routes>
-    <Route
-      element={<Unknown />}
-      path="/"
-    >
-      <React.Fragment>
-        <Route
-          element={<Unknown />}
-          path="nodes/:name"
-        />
-        <Route
-          element={<ListNamespacesPage />}
-          path="namespaces"
-        />
-        <Route
-          element={<Unknown />}
-          path="namespaces/:namespace"
-        />
-      </React.Fragment>
-    </Route>
-    <Route
-      element={<Unknown />}
-      path="*"
-    />
-  </Routes>
+  <Context.Provider
+    value={
+      Object {
+        "DataJunctionAPI": Object {
+          "clientCode": [Function],
+          "columns": [Function],
+          "commonDimensions": [Function],
+          "compiledSql": [Function],
+          "cube": [Function],
+          "dag": [Function],
+          "data": [Function],
+          "downstreams": [Function],
+          "history": [Function],
+          "lineage": [Function],
+          "materializations": [Function],
+          "metric": [Function],
+          "metrics": [Function],
+          "namespace": [Function],
+          "namespaces": [Function],
+          "node": [Function],
+          "node_dag": [Function],
+          "revisions": [Function],
+          "sql": [Function],
+          "sqls": [Function],
+          "upstreams": [Function],
+        },
+      }
+    }
+  >
+    <Routes>
+      <Route
+        element={<Unknown />}
+        path="/"
+      >
+        <React.Fragment>
+          <Route
+            path="nodes"
+          >
+            <Route
+              element={<NodePage />}
+              path=":name"
+            />
+          </Route>
+          <Route
+            element={<NamespacePage />}
+            path="/"
+          />
+          <Route
+            path="namespaces"
+          >
+            <Route
+              element={<NamespacePage />}
+              path=":namespace"
+            />
+          </Route>
+          <Route
+            element={<SQLBuilderPage />}
+            path="sql"
+          />
+        </React.Fragment>
+      </Route>
+      <Route
+        element={<Unknown />}
+        path="*"
+      />
+    </Routes>
+  </Context.Provider>
 </BrowserRouter>
 `;

package/src/app/components/NamespaceHeader.jsx

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import HorizontalHierarchyIcon from '../icons/HorizontalHierarchyIcon';
 
 export default class NamespaceHeader extends Component {
   render() {
@@ -6,7 +7,7 @@ export default class NamespaceHeader extends Component {
     const namespaceParts = namespace.split('.');
     const namespaceList = namespaceParts.map((piece, index) => {
       return (
-        <li className="breadcrumb-item">
+        <li className="breadcrumb-item" key={index}>
           <a
             className="link-body-emphasis"
             href={'/namespaces/' + namespaceParts.slice(0, index + 1).join('.')}
@@ -19,18 +20,8 @@ export default class NamespaceHeader extends Component {
     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 href="/">
+            <HorizontalHierarchyIcon />
           </a>
         </li>
         {namespaceList}

package/src/app/components/QueryInfo.jsx

@@ -0,0 +1,109 @@
+export default function QueryInfo({
+  id,
+  state,
+  engine_name,
+  engine_version,
+  errors,
+  links,
+  output_table,
+  scheduled,
+  started,
+  numRows,
+}) {
+  const stateIcon =
+    state === 'FINISHED' ? (
+      <span className="status__valid status" style={{ alignContent: 'center' }}>
+        <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>
+      </span>
+    ) : (
+      <span
+        className="status__invalid status"
+        style={{ alignContent: 'center' }}
+      >
+        <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>
+    );
+
+  return (
+    <div className="table-responsive">
+      <table className="card-inner-table table">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <tr>
+            <th>Query ID</th>
+            <th>Engine</th>
+            <th>State</th>
+            <th>Scheduled</th>
+            <th>Started</th>
+            <th>Errors</th>
+            <th>Links</th>
+            <th>Output Table</th>
+            <th>Number of Rows</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <span className="rounded-pill badge bg-secondary-soft">{id}</span>
+            </td>
+            <td>
+              <span className="rounded-pill badge bg-secondary-soft">
+                {engine_name}
+                {' - '}
+                {engine_version}
+              </span>
+            </td>
+            <td>{stateIcon}</td>
+            <td>{scheduled}</td>
+            <td>{started}</td>
+            <td>
+              {errors.length ? (
+                errors.map(e => (
+                  <p>
+                    <span className="rounded-pill badge bg-secondary-error">
+                      {e}
+                    </span>
+                  </p>
+                ))
+              ) : (
+                <></>
+              )}
+            </td>
+            <td>
+              {links?.length ? (
+                links.map(link => (
+                  <p>
+                    <a href={link} target="_blank" rel="noreferrer">
+                      {link}
+                    </a>
+                  </p>
+                ))
+              ) : (
+                <></>
+              )}
+            </td>
+            <td>{output_table}</td>
+            <td>{numRows}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/app/components/Tab.jsx

@@ -7,15 +7,8 @@ export default class Tab extends Component {
       <div className={selectedTab === id ? 'col active' : 'col'}>
         <div className="header-tabs nav-overflow nav nav-tabs">
           <div className="nav-item">
-            <button
-              id={id}
-              role="button"
-              className="nav-link"
-              tabIndex="0"
-              onClick={onClick}
-            >
+            <button id={id} className="nav-link" tabIndex="0" onClick={onClick}>
               {this.props.name}
-              {/*<span className="rounded-pill badge bg-secondary-soft">823</span>*/}
             </button>
           </div>
         </div>

package/src/app/components/ToggleSwitch.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const ToggleSwitch = ({ checked, onChange, toggleName }) => (
+  <>
+    <input
+      id="show-compiled-sql-toggle"
+      type="checkbox"
+      className="checkbox"
+      checked={checked}
+      onChange={e => onChange(e.target.checked)}
+    />
+    <label htmlFor="show-compiled-sql-toggle" className="switch"></label>{' '}
+    {toggleName}
+  </>
+);
+
+export default ToggleSwitch;

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

@@ -8,25 +8,9 @@ exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
     className="breadcrumb-item"
   >
     <a
-      href="/namespaces/"
+      href="/"
     >
-      <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>
+      <HorizontalHierarchyIcon />
     </a>
   </li>
   <li

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { DJNodeDimensions } from './DJNodeDimensions';
+import { DJNodeColumns } from './DJNodeColumns';
+
+export default function Collapse({ collapsed, text, data }) {
+  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
+
+  return (
+    <>
+      <div className="collapse">
+        {data.type === 'metric' ? (
+          <button
+            className="collapse-button"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            {isCollapsed ? '\u25B6 Show' : '\u25BC Hide'} {text}
+          </button>
+        ) : (
+          ''
+        )}
+        <div
+          className={`collapse-content ${
+            isCollapsed && data.type === 'metric' ? 'collapsed' : 'expanded'
+          }`}
+          aria-expanded={isCollapsed}
+        >
+          {data.type !== 'metric'
+            ? isCollapsed
+              ? DJNodeColumns({ data: data, limit: 10 })
+              : DJNodeColumns({ data: data, limit: 100 })
+            : DJNodeDimensions(data)}
+        </div>
+        {data.type !== 'metric' && data.column_names.length > 10 ? (
+          <button
+            className="collapse-button"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            {isCollapsed ? '\u25B6 More' : '\u25BC Less'} {text}
+          </button>
+        ) : (
+          ''
+        )}
+      </div>
+    </>
+  );
+}

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

@@ -1,81 +1,57 @@
 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 {};
-  }
-}
+import { DJNodeDimensions } from './DJNodeDimensions';
+import Collapse from './Collapse';
 
 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>
-    ));
+  const handleWrapperStyle = {
+    display: 'flex',
+    position: 'absolute',
+    height: '100%',
+    flexDirection: 'column',
+    top: '50%',
+    justifyContent: 'space-between',
+  };
+  const handleWrapperStyleRight = { ...handleWrapperStyle, ...{ right: 0 } };
 
+  const handleStyle = {
+    width: '12px',
+    height: '12px',
+    borderRadius: '12px',
+    background: 'transparent',
+    border: '4px solid transparent',
+    cursor: 'pointer',
+    position: 'absolute',
+    top: '0px',
+    left: 0,
+  };
+  const handleStyleLeft = percentage => {
+    return {
+      ...handleStyle,
+      ...{
+        transform: 'translate(-' + percentage + '%, -50%)',
+      },
+    };
+  };
+  const highlightNodeClass =
+    data.is_current === true ? ' dj-node_highlight' : '';
   return (
     <>
-      <Handle
-        type="target"
-        position={Position.Left}
-        style={{ backgroundColor: '#ccc' }}
-      />
-      <div className="dj-node__full" style={renderBasedOnDJNodeType(data.type)}>
+      <div
+        className={'dj-node__full node_type__' + data.type + highlightNodeClass}
+      >
+        <div style={handleWrapperStyle}>
+          <Handle
+            type="target"
+            id={data.name}
+            position={Position.Left}
+            style={handleStyleLeft(100)}
+          />
+        </div>
         <div className="dj-node__header">
           <div className="serif">
             {data.name
@@ -86,24 +62,24 @@ export function DJNode({ id, data }) {
         </div>
         <div className="dj-node__body">
           <b>{capitalize(data.type)}</b>:{' '}
-          {data.type === 'source' ? data.table : data.display_name}
+          <a href={`/nodes/${data.name}`}>
+            {data.type === 'source' ? data.table : data.display_name}
+          </a>
           <Collapse
             collapsed={true}
             text={data.type !== 'metric' ? 'columns' : 'dimensions'}
-          >
-            <div className="dj-node__metadata">
-              {
-                data.type !== 'metric' ? columnsRenderer(data) : '' // dimensionsRenderer(data)
-              }
-            </div>
-          </Collapse>
+            data={data}
+          />
+        </div>
+        <div style={handleWrapperStyleRight}>
+          <Handle
+            type="source"
+            id={data.name}
+            position={Position.Right}
+            style={handleStyleLeft(90)}
+          />
         </div>
       </div>
-      <Handle
-        type="source"
-        position={Position.Right}
-        style={{ backgroundColor: '#ccc' }}
-      />
     </>
   );
 }