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

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

@@ -2,24 +2,41 @@
 
 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",
-      }
-    }
+    className="dj-node__full node_type__source"
   >
+    <div
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "height": "100%",
+          "justifyContent": "space-between",
+          "position": "absolute",
+          "top": "50%",
+        }
+      }
+    >
+      <Memo(Handle)
+        id="shared.dimensions.accounts"
+        position="left"
+        style={
+          Object {
+            "background": "transparent",
+            "border": "4px solid transparent",
+            "borderRadius": "12px",
+            "cursor": "pointer",
+            "height": "12px",
+            "left": 0,
+            "position": "absolute",
+            "top": "0px",
+            "transform": "translate(-100%, -50%)",
+            "width": "12px",
+          }
+        }
+        type="target"
+      />
+    </div>
     <div
       className="dj-node__header"
     >
@@ -37,37 +54,59 @@ exports[`<DJNode /> should render and match the snapshot 1`] = `
       </b>
       :
        
+      <a
+        href="/nodes/shared.dimensions.accounts"
+      />
       <Collapse
         collapsed={true}
+        data={
+          Object {
+            "column_names": Array [
+              "a",
+            ],
+            "name": "shared.dimensions.accounts",
+            "primary_key": Array [
+              "id",
+            ],
+            "type": "source",
+          }
+        }
         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",
+    <div
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "height": "100%",
+          "justifyContent": "space-between",
+          "position": "absolute",
+          "right": 0,
+          "top": "50%",
+        }
       }
-    }
-    type="source"
-  />
+    >
+      <Memo(Handle)
+        id="shared.dimensions.accounts"
+        position="right"
+        style={
+          Object {
+            "background": "transparent",
+            "border": "4px solid transparent",
+            "borderRadius": "12px",
+            "cursor": "pointer",
+            "height": "12px",
+            "left": 0,
+            "position": "absolute",
+            "top": "0px",
+            "transform": "translate(-90%, -50%)",
+            "width": "12px",
+          }
+        }
+        type="source"
+      />
+    </div>
+  </div>
 </React.Fragment>
 `;

package/src/app/icons/CollapsedIcon.jsx

@@ -0,0 +1,15 @@
+const CollapsedIcon = props => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height="1em"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M48 256c0 114.9 93.1 208 208 208s208-93.1 208-208S370.9 48 256 48 48 141.1 48 256zm244.5 0l-81.9-81.1c-7.5-7.5-7.5-19.8 0-27.3s19.8-7.5 27.3 0l95.4 95.7c7.3 7.3 7.5 19.1.6 26.6l-94 94.3c-3.8 3.8-8.7 5.7-13.7 5.7-4.9 0-9.9-1.9-13.6-5.6-7.5-7.5-7.6-19.7 0-27.3l79.9-81z"></path>
+  </svg>
+);
+
+export default CollapsedIcon;

package/src/app/icons/ExpandedIcon.jsx

@@ -0,0 +1,15 @@
+const ExpandedIcon = props => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height="1em"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M48 256c0 114.9 93.1 208 208 208s208-93.1 208-208S370.9 48 256 48 48 141.1 48 256zm289.1-43.4c7.5-7.5 19.8-7.5 27.3 0 3.8 3.8 5.6 8.7 5.6 13.6s-1.9 9.9-5.7 13.7l-94.3 94c-7.6 6.9-19.3 6.7-26.6-.6l-95.7-95.4c-7.5-7.5-7.6-19.7 0-27.3 7.5-7.5 19.7-7.6 27.3 0l81.1 81.9 81-79.9z"></path>
+  </svg>
+);
+
+export default ExpandedIcon;

package/src/app/icons/HorizontalHierarchyIcon.jsx

@@ -0,0 +1,15 @@
+const HorizontalHierarchyIcon = props => (
+  <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>
+);
+
+export default HorizontalHierarchyIcon;

package/src/app/icons/InvalidIcon.jsx

@@ -0,0 +1,14 @@
+const InvalidIcon = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="25"
+    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>
+);
+
+export default InvalidIcon;

package/src/app/icons/PythonIcon.jsx

@@ -0,0 +1,52 @@
+const PythonIcon = props => (
+  <svg
+    width="45px"
+    height="45px"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+    <g
+      id="SVGRepo_tracerCarrier"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></g>
+    <g id="SVGRepo_iconCarrier">
+      <path
+        d="M31.885 16c-8.124 0-7.617 3.523-7.617 3.523l.01 3.65h7.752v1.095H21.197S16 23.678 16 31.876c0 8.196 4.537 7.906 4.537 7.906h2.708v-3.804s-.146-4.537 4.465-4.537h7.688s4.32.07 4.32-4.175v-7.019S40.374 16 31.885 16zm-4.275 2.454c.771 0 1.395.624 1.395 1.395s-.624 1.395-1.395 1.395a1.393 1.393 0 0 1-1.395-1.395c0-.771.624-1.395 1.395-1.395z"
+        fill="url(#a)"
+      ></path>
+      <path
+        d="M32.115 47.833c8.124 0 7.617-3.523 7.617-3.523l-.01-3.65H31.97v-1.095h10.832S48 40.155 48 31.958c0-8.197-4.537-7.906-4.537-7.906h-2.708v3.803s.146 4.537-4.465 4.537h-7.688s-4.32-.07-4.32 4.175v7.019s-.656 4.247 7.833 4.247zm4.275-2.454a1.393 1.393 0 0 1-1.395-1.395c0-.77.624-1.394 1.395-1.394s1.395.623 1.395 1.394c0 .772-.624 1.395-1.395 1.395z"
+        fill="url(#b)"
+      ></path>
+      <defs>
+        <linearGradient
+          id="a"
+          x1="19.075"
+          y1="18.782"
+          x2="34.898"
+          y2="34.658"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#387EB8"></stop>
+          <stop offset="1" stopColor="#366994"></stop>
+        </linearGradient>
+        <linearGradient
+          id="b"
+          x1="28.809"
+          y1="28.882"
+          x2="45.803"
+          y2="45.163"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFE052"></stop>
+          <stop offset="1" stopColor="#FFC331"></stop>
+        </linearGradient>
+      </defs>
+    </g>
+  </svg>
+);
+
+export default PythonIcon;

package/src/app/icons/TableIcon.jsx

@@ -0,0 +1,14 @@
+const TableIcon = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-table"
+    viewBox="0 0 16 16"
+  >
+    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z" />
+  </svg>
+);
+
+export default TableIcon;

package/src/app/icons/ValidIcon.jsx

@@ -0,0 +1,14 @@
+const ValidIcon = props => (
+  <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>
+);
+
+export default ValidIcon;

package/src/app/index.tsx

@@ -9,9 +9,9 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
+import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
 import { Root } from './pages/Root/Loadable';
-import { ListNamespacesPage } from './pages/ListNamespacesPage';
 import DJClientContext from './providers/djclient';
 import { DataJunctionAPI } from './services/DJService';
 
@@ -38,7 +38,7 @@ export function App() {
                   <Route path=":name" element={<NodePage />} />
                 </Route>
 
-                <Route path="/" element={<ListNamespacesPage />} key="index" />
+                <Route path="/" element={<NamespacePage />} key="index" />
                 <Route path="namespaces">
                   <Route
                     path=":namespace"
@@ -46,6 +46,7 @@ export function App() {
                     key="namespaces"
                   />
                 </Route>
+                <Route path="sql" key="sql" element={<SQLBuilderPage />} />
               </>
             }
           />

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

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import CollapsedIcon from '../../icons/CollapsedIcon';
+import ExpandedIcon from '../../icons/ExpandedIcon';
+
+const Explorer = ({ item = [], current }) => {
+  const [items, setItems] = useState([]);
+  const [expand, setExpand] = useState(false);
+  const [highlight, setHighlight] = useState(false);
+
+  useEffect(() => {
+    setItems(item);
+    setHighlight(current);
+    if (current === undefined || current?.startsWith(item.path)) {
+      setExpand(true);
+    } else setExpand(false);
+  }, [current, item]);
+
+  const handleClickOnParent = e => {
+    e.stopPropagation();
+    setExpand(prev => {
+      return !prev;
+    });
+  };
+
+  return (
+    <>
+      <div
+        className={`select-name ${
+          highlight === items.path ? 'select-name-highlight' : ''
+        }`}
+        onClick={handleClickOnParent}
+      >
+        {items.children && items.children.length > 0 ? (
+          <span>{!expand ? <CollapsedIcon /> : <ExpandedIcon />} </span>
+        ) : null}
+        <a href={`/namespaces/${items.path}`}>{items.namespace}</a>{' '}
+      </div>
+      {items.children
+        ? items.children.map((item, index) => (
+            <div
+              style={{
+                paddingLeft: '1.4rem',
+                marginLeft: '1rem',
+                borderLeft: '1px solid rgb(218 233 255)',
+              }}
+            >
+              <div className={`${expand ? '' : 'inactive'}`}>
+                <Explorer item={item} current={highlight} />
+              </div>
+            </div>
+          ))
+        : null}
+    </>
+  );
+};
+
+export default Explorer;

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

@@ -4,7 +4,6 @@ exports[`<NamespacePage /> should render and match the snapshot 1`] = `
 <div
   className="mid"
 >
-  <NamespaceHeader />
   <div
     className="card"
   >
@@ -12,19 +11,33 @@ exports[`<NamespacePage /> should render and match the snapshot 1`] = `
       className="card-header"
     >
       <h2>
-        Nodes
+        Explore
       </h2>
       <div
         className="table-responsive"
       >
+        <div
+          className="sidebar"
+        >
+          <span
+            style={
+              Object {
+                "color": "#95aac9",
+                "fontSize": "0.8125rem",
+                "fontWeight": "600",
+                "padding": "1rem 1rem 1rem 0",
+                "textTransform": "uppercase",
+              }
+            }
+          >
+            Namespaces
+          </span>
+        </div>
         <table
           className="card-table table"
         >
           <thead>
             <tr>
-              <th>
-                Namespace
-              </th>
               <th>
                 Name
               </th>
@@ -37,6 +50,12 @@ exports[`<NamespacePage /> should render and match the snapshot 1`] = `
               <th>
                 Mode
               </th>
+              <th>
+                Tags
+              </th>
+              <th>
+                Last Updated
+              </th>
             </tr>
           </thead>
           <tbody />

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

@@ -1,21 +1,63 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import { useContext, useEffect, useState } from 'react';
-import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeStatus from '../NodePage/NodeStatus';
 import DJClientContext from '../../providers/djclient';
+import Explorer from '../NamespacePage/Explorer';
 
 export function NamespacePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const { namespace } = useParams();
+  var { namespace } = useParams();
 
   const [state, setState] = useState({
     namespace: namespace,
     nodes: [],
   });
 
+  const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
+
+  const createNamespaceHierarchy = namespaceList => {
+    const hierarchy = [];
+
+    for (const item of namespaceList) {
+      const namespaces = item.namespace.split('.');
+      let currentLevel = hierarchy;
+
+      let path = '';
+      for (const ns of namespaces) {
+        path += ns;
+
+        let existingNamespace = currentLevel.find(el => el.namespace === ns);
+        if (!existingNamespace) {
+          existingNamespace = {
+            namespace: ns,
+            children: [],
+            path: path,
+          };
+          currentLevel.push(existingNamespace);
+        }
+
+        currentLevel = existingNamespace.children;
+        path += '.';
+      }
+    }
+    return hierarchy;
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const namespaces = await djClient.namespaces();
+      const hierarchy = createNamespaceHierarchy(namespaces);
+      setNamespaceHierarchy(hierarchy);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.namespaces]);
+
   useEffect(() => {
     const fetchData = async () => {
+      if (namespace === undefined && namespaceHierarchy !== undefined) {
+        namespace = namespaceHierarchy.children[0].path;
+      }
       const djNodes = await djClient.namespace(namespace);
       const nodes = djNodes.map(node => {
         return djClient.node(node);
@@ -27,13 +69,10 @@ export function NamespacePage() {
       });
     };
     fetchData().catch(console.error);
-  }, [djClient, namespace]);
+  }, [djClient, namespace, namespaceHierarchy]);
 
   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}
@@ -56,25 +95,54 @@ export function NamespacePage() {
       <td>
         <span className="status">{node.mode}</span>
       </td>
+      <td>
+        <span className="status">{node.tags}</span>
+      </td>
+      <td>
+        <span className="status">
+          {new Date(node.updated_at).toLocaleString('en-us')}
+        </span>
+      </td>
     </tr>
   ));
 
-  // @ts-ignore
   return (
     <div className="mid">
-      <NamespaceHeader namespace={namespace} />
       <div className="card">
         <div className="card-header">
-          <h2>Nodes</h2>
+          <h2>Explore</h2>
           <div className="table-responsive">
+            <div className={`sidebar`}>
+              <span
+                style={{
+                  textTransform: 'uppercase',
+                  fontSize: '0.8125rem',
+                  fontWeight: '600',
+                  color: '#95aac9',
+                  padding: '1rem 1rem 1rem 0',
+                }}
+              >
+                Namespaces
+              </span>
+              {namespaceHierarchy
+                ? namespaceHierarchy.map(child => (
+                    <Explorer
+                      item={child}
+                      current={state.namespace}
+                      defaultExpand={true}
+                    />
+                  ))
+                : null}
+            </div>
             <table className="card-table table">
               <thead>
                 <tr>
-                  <th>Namespace</th>
                   <th>Name</th>
                   <th>Type</th>
                   <th>Status</th>
                   <th>Mode</th>
+                  <th>Tags</th>
+                  <th>Last Updated</th>
                 </tr>
               </thead>
               <tbody>{nodesList}</tbody>

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

@@ -0,0 +1,30 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { useState } from 'react';
+import { nightOwl } from 'react-syntax-highlighter/src/styles/hljs';
+import PythonIcon from '../../icons/PythonIcon';
+
+export default function ClientCodePopover({ code }) {
+  const [codeAnchor, setCodeAnchor] = useState(false);
+
+  return (
+    <>
+      <button
+        className="code-button"
+        tabIndex="0"
+        height="45px"
+        onClick={() => setCodeAnchor(!codeAnchor)}
+      >
+        <PythonIcon />
+      </button>
+      <div
+        id={`node-create-code`}
+        onClose={() => setCodeAnchor(null)}
+        style={{ display: codeAnchor === false ? 'none' : 'block' }}
+      >
+        <SyntaxHighlighter language="python" style={nightOwl}>
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    </>
+  );
+}

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

@@ -1,8 +1,17 @@
-import { Component } from 'react';
+import { Component, useEffect, useState } from 'react';
+import ClientCodePopover from './ClientCodePopover';
 
-export default class NodeColumnTab extends Component {
-  columnList = node => {
-    return node.columns.map(col => (
+export default function NodeColumnTab({ node, djClient }) {
+  const [columns, setColumns] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      setColumns(await djClient.columns(node));
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+
+  const columnList = columns => {
+    return columns.map(col => (
       <tr>
         <td className="text-start">{col.name}</td>
         <td>
@@ -10,7 +19,16 @@ export default class NodeColumnTab extends Component {
             {col.type}
           </span>
         </td>
-        <td>{col.dimension ? col.dimension.name : ''}</td>
+        <td>
+          {col.dimension ? (
+            <>
+              <a href={`/nodes/${col.dimension.name}`}>{col.dimension.name}</a>
+              <ClientCodePopover code={col.clientCode} />
+            </>
+          ) : (
+            ''
+          )}{' '}
+        </td>
         <td>
           {col.attributes.find(
             attr => attr.attribute_type.name === 'dimension',
@@ -26,19 +44,17 @@ export default class NodeColumnTab extends Component {
     ));
   };
 
-  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>
-    );
-  }
+  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>
+        {columnList(columns)}
+      </table>
+    </div>
+  );
 }