datajunction-ui 0.0.1-rc.10 → 0.0.1-rc.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.10",
+  "version": "0.0.1-rc.12",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -32,6 +32,7 @@
     "@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",
@@ -40,6 +41,7 @@
     "@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",
@@ -65,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",

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

@@ -18,13 +18,26 @@ exports[`<App /> should render and match the snapshot 1`] = `
     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],
         },
       }
@@ -45,22 +58,7 @@ exports[`<App /> should render and match the snapshot 1`] = `
             />
           </Route>
           <Route
-            element={
-              <ListNamespacesPage
-                djClient={
-                  Object {
-                    "dag": [Function],
-                    "downstreams": [Function],
-                    "lineage": [Function],
-                    "metric": [Function],
-                    "namespace": [Function],
-                    "namespaces": [Function],
-                    "node": [Function],
-                    "upstreams": [Function],
-                  }
-                }
-              />
-            }
+            element={<NamespacePage />}
             path="/"
           />
           <Route
@@ -71,6 +69,10 @@ exports[`<App /> should render and match the snapshot 1`] = `
               path=":namespace"
             />
           </Route>
+          <Route
+            element={<SQLBuilderPage />}
+            path="sql"
+          />
         </React.Fragment>
       </Route>
       <Route

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/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' }}
-      />
     </>
   );
 }

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

@@ -0,0 +1,68 @@
+import { Handle } from 'reactflow';
+import React from 'react';
+
+export function DJNodeColumns({ data, limit }) {
+  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%)',
+      },
+    };
+  };
+  return data.column_names.slice(0, limit).map(col => (
+    <div className={'custom-node-subheader node_type__' + data.type}>
+      <div style={handleWrapperStyle}>
+        <Handle
+          type="target"
+          position="left"
+          id={data.name + '.' + col.name}
+          style={handleStyleLeft(100)}
+        />
+      </div>
+      <div
+        className="custom-node-port"
+        id={data.name + '.' + col.name}
+        key={'i-' + data.name + '.' + col.name}
+      >
+        {data.primary_key.includes(col.name) ? (
+          <b>{col.name} (PK)</b>
+        ) : (
+          <>{col.name}</>
+        )}
+        <span style={{ marginLeft: '0.25rem' }} className={'badge'}>
+          {col.type}
+        </span>
+      </div>
+      <div style={handleWrapperStyleRight}>
+        <Handle
+          type="source"
+          position="right"
+          id={data.name + '.' + col.name}
+          style={handleStyle}
+        />
+      </div>
+    </div>
+  ));
+}

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

@@ -0,0 +1,69 @@
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import Collapse from './Collapse';
+
+export function DJNodeDimensions(data) {
+  const [dimensions, setDimensions] = useState([]);
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  useEffect(() => {
+    if (data.type === 'metric') {
+      async function getDimensions() {
+        try {
+          const metricData = await djClient.metric(data.name);
+          setDimensions(metricData.dimensions);
+        } catch (err) {
+          console.log(err);
+        }
+      }
+      getDimensions();
+    }
+  }, [data, djClient]);
+  const dimensionsToObject = dimensions => {
+    return dimensions.map(dim => {
+      const [attribute, ...nodeName] = dim.name.split('.').reverse();
+      return {
+        dimension: nodeName.reverse().join('.'),
+        path: dim.path,
+        column: attribute,
+      };
+    });
+  };
+  const groupedDimensions = dims =>
+    dims.reduce((acc, current) => {
+      const dimKey = current.dimension + ' via ' + current.path.slice(-1);
+      acc[dimKey] = acc[dimKey] || {
+        dimension: current.dimension,
+        path: current.path.slice(-1),
+        columns: [],
+      };
+      acc[dimKey].columns.push(current.column);
+      return acc;
+    }, {});
+  const dimensionsRenderer = grouped =>
+    Object.entries(grouped).map(([dimKey, dimValue]) => {
+      if (Array.isArray(dimValue.columns)) {
+        const attributes = dimValue.columns.map(col => {
+          return <span className={'badge white_badge'}>{col}</span>;
+        });
+        return (
+          <div className={'custom-node-subheader node_type__' + data.type}>
+            <div className="custom-node-port">
+              <a href={`/nodes/${dimValue.dimension}`}>{dimValue.dimension}</a>{' '}
+              <div className={'badge node_type__metric text-black'}>
+                {dimValue.path}
+              </div>
+            </div>
+            <div className={'dimension_attributes'}>{attributes}</div>
+          </div>
+        );
+      }
+      return <></>;
+    });
+  return (
+    <>
+      {dimensions.length <= 0
+        ? ''
+        : dimensionsRenderer(groupedDimensions(dimensionsToObject(dimensions)))}
+    </>
+  );
+}