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

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

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,11 @@ 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';
 
 export function App() {
   return (
@@ -25,21 +27,32 @@ export function App() {
           content="DataJunction serves as a semantic layer to help manage metrics"
         />
       </Helmet>
+      <DJClientContext.Provider value={{ DataJunctionAPI }}>
+        <Routes>
+          <Route
+            path="/"
+            element={<Root />}
+            children={
+              <>
+                <Route path="nodes" key="nodes">
+                  <Route path=":name" element={<NodePage />} />
+                </Route>
 
-      <Routes>
-        <Route
-          path="/"
-          element={<Root />}
-          children={
-            <>
-              <Route path="nodes/:name" element={<NodePage />} />
-              <Route path="namespaces" element={<ListNamespacesPage />} />
-              <Route path="namespaces/:namespace" element={<NamespacePage />} />
-            </>
-          }
-        />
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
+                <Route path="/" element={<NamespacePage />} key="index" />
+                <Route path="namespaces">
+                  <Route
+                    path=":namespace"
+                    element={<NamespacePage />}
+                    key="namespaces"
+                  />
+                </Route>
+                <Route path="sql" key="sql" element={<SQLBuilderPage />} />
+              </>
+            }
+          />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </DJClientContext.Provider>
     </BrowserRouter>
   );
 }

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/Loadable.jsx

@@ -5,10 +5,12 @@
 import * as React from 'react';
 import { lazyLoad } from '../../../utils/loadable';
 
-export const NamespacePage = lazyLoad(
-  () => import('./index'),
-  module => module.NamespacePage,
-  {
-    fallback: <div></div>,
-  },
-);
+export const NamespacePage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.NamespacePage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};

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,31 +11,54 @@ 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>
-            <th>
-              Namespace
-            </th>
-            <th>
-              Name
-            </th>
-            <th>
-              Type
-            </th>
-            <th>
-              Status
-            </th>
-            <th>
-              Mode
-            </th>
+            <tr>
+              <th>
+                Name
+              </th>
+              <th>
+                Type
+              </th>
+              <th>
+                Status
+              </th>
+              <th>
+                Mode
+              </th>
+              <th>
+                Tags
+              </th>
+              <th>
+                Last Updated
+              </th>
+            </tr>
           </thead>
+          <tbody />
         </table>
       </div>
     </div>