datajunction-ui 0.0.1-a87 → 0.0.1-a87.dev0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a87",
+  "version": "0.0.1-a87.dev0",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/public/index.html

@@ -6,7 +6,7 @@
     <link rel="icon" href="public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="manifest" href="public/manifest.json" />
+    <link rel="manifest" href="manifest.json" />
     <link rel="manifest" href="src/styles/index.css" />
     <meta property="og:title" content="DataJunction UI" />
     <meta property="og:description" content="" />

package/src/app/components/forms/NodeNameField.jsx

@@ -33,7 +33,7 @@ export default function NodeNameField() {
     <>
       <div className="NamespaceInput">
         <ErrorMessage name="namespace" component="span" />
-        <label htmlFor="react-select-3-input">Namespace *</label>
+        <label htmlFor="namespace">Namespace *</label>
         <FormikSelect
           selectOptions={namespaces}
           formikFieldName="namespace"

package/src/app/icons/WrenchIcon.jsx

@@ -0,0 +1,36 @@
+const WrenchIcon = props => (
+  <svg
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_24_77)">
+      <rect
+        width="16"
+        height="16"
+        transform="translate(0 0.649803)"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.41665 5.44985C6.41665 2.8265 8.5433 0.699852 11.1667 0.699852C11.4613 0.699852 11.7504 0.726773 12.0313 0.778484C12.5762 0.878798 12.9364 1.28101 13.0406 1.74377C13.1406 2.18774 13.0066 2.67055 12.6619 3.01531L11.2273 4.44985L12.1667 5.38919L13.6012 3.95465C13.946 3.60989 14.4288 3.47589 14.8728 3.57591C15.3355 3.68017 15.7377 4.04033 15.838 4.58525C15.8898 4.86615 15.9167 5.15519 15.9167 5.44985C15.9167 8.0732 13.79 10.1999 11.1667 10.1999C10.658 10.1999 10.167 10.1196 9.70625 9.97091L3.50172 16.1754C2.94847 16.7287 2.05149 16.7287 1.49825 16.1754L0.441055 15.1183C-0.112189 14.565 -0.112186 13.668 0.441056 13.1148L6.64559 6.91025C6.49685 6.44951 6.41665 5.9585 6.41665 5.44985ZM11.1667 2.19985C9.37172 2.19985 7.91665 3.65492 7.91665 5.44985C7.91665 5.92812 8.01948 6.38034 8.20352 6.7873L8.41725 7.25991L8.05048 7.62667L1.56064 14.1165L2.49998 15.0559L8.98982 8.56601L9.35659 8.19925L9.8292 8.41298C10.2362 8.59702 10.6884 8.69985 11.1667 8.69985C12.9616 8.69985 14.4167 7.24477 14.4167 5.44985C14.4167 5.38796 14.415 5.32654 14.4116 5.26562L12.697 6.98018L12.1667 7.51051L11.6363 6.98018L9.63632 4.98018L9.10599 4.44985L9.63632 3.91952L11.3509 2.20496C11.29 2.20157 11.2286 2.19985 11.1667 2.19985Z"
+        fill="black"
+        fill-opacity="0.9"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_24_77">
+        <rect
+          width="16"
+          height="16"
+          fill="white"
+          transform="translate(0 0.649803)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default WrenchIcon;

package/src/app/pages/AddEditNodePage/ColumnMetadata.jsx

@@ -0,0 +1,61 @@
+/**
+ * Component for arbitrary column metadata
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const ColumnMetadata = ({ name, label, defaultValue }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // The available columns, determined from validating the node query
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const selectableOptions = useMemo(() => {
+    if (availableColumns && availableColumns.length > 0) {
+      return availableColumns;
+    }
+  }, [availableColumns]);
+
+  // When focus is on the input field, refresh the list of available columns for selection
+  const refreshColumns = event => {
+    async function fetchData() {
+      // eslint-disable-next-line no-unused-vars
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      setAvailableColumns(
+        json.columns.map(col => {
+          return { value: col.name, label: col.name };
+        }),
+      );
+    }
+    fetchData();
+  };
+
+  return (
+    <div className="NodeCreationInput" style={{ width: '25%' }}>
+      <ErrorMessage name={name} component="span" />
+      <label htmlFor="react-select-3-input">{label}</label>
+      <span data-testid={`select-${name}`}>
+        <FormikSelect
+          className="SelectInput"
+          style={{ width: '100px' }}
+          defaultValue={defaultValue}
+          selectOptions={selectableOptions}
+          formikFieldName={name}
+          //   placeholder={`Choose ${label}`}
+          onFocus={event => refreshColumns(event)}
+          isMulti={false}
+        />
+      </span>
+    </div>
+  );
+};

package/src/app/pages/AddEditNodePage/ColumnsMetadataInput.jsx

@@ -0,0 +1,72 @@
+/**
+ * Column metadata configuration component
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState, useEffect } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+import WrenchIcon from 'app/icons/WrenchIcon';
+
+export const ColumnsMetadataInput = ({ columns }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // The available columns, determined from validating the node query
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const selectableOptions = useMemo(() => {
+    if (availableColumns && availableColumns.length > 0) {
+      return availableColumns;
+    }
+  }, [availableColumns]);
+
+  // When focus is on the primary key field, refresh the list of available
+  // primary key columns for selection
+  useEffect(() => {
+    const fetchData = async () => {
+      // eslint-disable-next-line no-unused-vars
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      setAvailableColumns(
+        json.columns.map(col => {
+          return { value: col.name, label: col.name };
+        }),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, name]);
+
+  return (
+    <div
+      className="ColumnsMetadataInput NodeCreationInput"
+      style={{ border: 'dashed 1px #ccc', padding: '20px' }}
+    >
+      <ErrorMessage name="mode" component="span" />
+      <label htmlFor="Mode">Columns Metadata</label>
+      <table>
+        <thead>
+          <tr>
+            <th>Column</th>
+            <th>Metadata</th>
+          </tr>
+        </thead>
+        <tbody>
+          {availableColumns.map(col => (
+            <tr key={col.value}>
+              <td>{col.value}</td>
+              <td>
+                <WrenchIcon />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/src/app/pages/AddEditNodePage/ColumnsSelect.jsx

@@ -50,12 +50,12 @@ export const ColumnsSelect = ({
     fetchColumns();
   }, [values.type, values.name, values.query]);
 
-  return selectableOptions === undefined ? (
-    ''
-  ) : (
+  return (
     <div className="CubeCreationInput">
       <ErrorMessage name={fieldName} component="span" />
-      <label htmlFor={fieldName} style={labelStyle}>{label}</label>
+      <label htmlFor={fieldName} style={labelStyle}>
+        {label}
+      </label>
       <span data-testid={`select-${fieldName}`}>
         <FormikSelect
           className={isMulti ? 'MultiSelectInput' : 'SelectInput'}

package/src/app/pages/AddEditNodePage/FormikSelect.jsx

@@ -39,6 +39,7 @@ export const FormikSelect = ({
       styles={style}
       isMulti={isMulti}
       onFocus={event => onFocus(event)}
+      id={field.name}
     />
   );
 };

package/src/app/pages/AddEditNodePage/NamespaceField.jsx

@@ -25,7 +25,7 @@ export const NamespaceField = ({ initialNamespace }) => {
   return (
     <div className="NamespaceInput">
       <ErrorMessage name="namespace" component="span" />
-      <label htmlFor="react-select-3-input">Namespace *</label>
+      <label htmlFor="namespace">Namespace *</label>
       <FormikSelect
         selectOptions={namespaces}
         formikFieldName="namespace"

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

@@ -93,10 +93,10 @@ export function AddEditNodePage({ extensions = {} }) {
   const staticFieldsInEdit = node => (
     <>
       <div className="NodeNameInput NodeCreationInput">
-        <label htmlFor="name">Name</label> {name}
+        <label>Name</label> {name}
       </div>
       <div className="NodeNameInput NodeCreationInput">
-        <label htmlFor="name">Type</label> {node.type}
+        <label>Type</label> {node.type}
       </div>
     </>
   );
@@ -295,13 +295,15 @@ export function AddEditNodePage({ extensions = {} }) {
         isMulti={true}
       />,
     );
-    setSelectRequiredDims(
-      <RequiredDimensionsSelect
-        defaultValue={data.required_dimensions.map(dim => {
-          return { value: dim, label: dim };
-        })}
-      />,
-    );
+    if (data.required_dimensions) {
+      setSelectRequiredDims(
+        <RequiredDimensionsSelect
+          defaultValue={data.required_dimensions.map(dim => {
+            return { value: dim, label: dim };
+          })}
+        />,
+      );
+    }
     setSelectUpstreamNode(
       <UpstreamNodeField
         defaultValue={{
@@ -418,7 +420,12 @@ export function AddEditNodePage({ extensions = {} }) {
                           action === Action.Edit ? (
                             selectPrimaryKey
                           ) : (
-                            <ColumnsSelect />
+                            <ColumnsSelect
+                              defaultValue={[]}
+                              fieldName="primary_key"
+                              label="Primary Key"
+                              isMulti={true}
+                            />
                           )
                         ) : action === Action.Edit ? (
                           selectRequiredDims

package/src/app/pages/CubeBuilderPage/MetricsSelect.jsx

@@ -23,7 +23,7 @@ export const MetricsSelect = ({ cube }) => {
   // Get metrics
   useEffect(() => {
     const fetchData = async () => {
-      if (cube && cube !== []) {
+      if (cube) {
         const cubeMetrics = cube?.cube_elements
           .filter(element => element.type === 'metric')
           .map(metric => {

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

@@ -202,7 +202,7 @@ export function CubeBuilderPage() {
                       />
                     </div>
                     <div className="CubeCreationInput">
-                      <label htmlFor="react-select-3-input">Metrics *</label>
+                      <label>Metrics *</label>
                       <p>Select metrics to include in the cube.</p>
                       <span
                         data-testid="select-metrics"
@@ -218,7 +218,7 @@ export function CubeBuilderPage() {
                     <br />
                     <br />
                     <div className="CubeCreationInput">
-                      <label htmlFor="react-select-3-input">Dimensions *</label>
+                      <label>Dimensions *</label>
                       <p>
                         Select dimensions to include in the cube. As metrics are
                         selected above, the list of available dimensions will be

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

@@ -151,7 +151,7 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
                 />
                 <span data-testid="edit-partition">
                   <label htmlFor="strategy">Strategy</label>
-                  <Field as="select" name="strategy">
+                  <Field as="select" name="strategy" id="strategy">
                     <>
                       <option key={'full'} value={'full'}>
                         Full
@@ -179,7 +179,7 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
                 <br />
                 <div className="DescriptionInput">
                   <ErrorMessage name="description" component="span" />
-                  <label htmlFor="Config">Lookback Window</label>
+                  <label htmlFor="lookback_window">Lookback Window</label>
                   <Field
                     type="text"
                     name="lookback_window"

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

@@ -0,0 +1,141 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Field, Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import LoadingIcon from '../../icons/LoadingIcon';
+import { MetricQueryField } from '../AddEditNodePage/MetricQueryField';
+
+export default function LinkComplexDimensionPopover({ link, onSubmit }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setPopoverAnchor]);
+
+  const handleSubmit = async (
+    { node, column, dimension },
+    { setSubmitting, setStatus },
+  ) => {
+    if (referencedDimensionNode && dimension === 'Remove') {
+      await unlinkDimension(
+        node,
+        column,
+        referencedDimensionNode,
+        setStatus,
+      ).then(_ => setSubmitting(false));
+    } else {
+      await linkDimension(node, column, dimension, setStatus).then(_ =>
+        setSubmitting(false),
+      );
+    }
+    onSubmit();
+  };
+
+  const linkDimension = async (node, column, dimension, setStatus) => {
+    const response = await djClient.linkDimension(node, column, dimension);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  const unlinkDimension = async (node, column, currentDimension, setStatus) => {
+    const response = await djClient.unlinkDimension(
+      node,
+      column,
+      currentDimension,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Removed dimension link!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="LinkDimension"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={
+            {
+              // column: column.name,
+              // node: node.name,
+              // dimension: '',
+              // currentDimension: referencedDimensionNode,
+            }
+          }
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="link-dimension">
+                  <label>Join Type</label>
+                  <FormikSelect
+                    selectOptions={[{ value: 'left', label: 'LEFT' }]}
+                    formikFieldName="join_type"
+                    placeholder="Select join type"
+                    className="join_type"
+                    defaultValue={link.join_type || ''}
+                    isMulti={false}
+                  />
+                  {console.log('link, ', link)}
+
+                  <label>Join On</label>
+                  <MetricQueryField
+                    djClient={djClient}
+                    value={link.join_sql ? link.join_sql : ''}
+                  />
+                </span>
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveComplexDimension"
+                  aria-hidden="false"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -15,7 +15,9 @@ export default function NodeColumnTab({ node, djClient }) {
 
   useEffect(() => {
     const fetchData = async () => {
-      setColumns(await djClient.columns(node));
+      if (node) {
+        setColumns(await djClient.columns(node));
+      }
     };
     fetchData().catch(console.error);
   }, [djClient, node]);
@@ -60,28 +62,16 @@ export default function NodeColumnTab({ node, djClient }) {
     if (col.partition) {
       return (
         <>
-          <span
-            className="node_type badge node_type__blank"
-            key={`col-attr-partition-type`}
-          >
-            <span
-              className="partition_value badge"
-              key={`col-attr-partition-type`}
-            >
+          <span className="node_type badge node_type__blank">
+            <span className="partition_value badge">
               <b>Type:</b> {col.partition.type_}
             </span>
             <br />
-            <span
-              className="partition_value badge"
-              key={`col-attr-partition-type`}
-            >
+            <span className="partition_value badge">
               <b>Format:</b> <code>{col.partition.format}</code>
             </span>
             <br />
-            <span
-              className="partition_value badge"
-              key={`col-attr-partition-type`}
-            >
+            <span className="partition_value badge">
               <b>Granularity:</b> <code>{col.partition.granularity}</code>
             </span>
           </span>
@@ -227,7 +217,7 @@ export default function NodeColumnTab({ node, djClient }) {
           <tbody>
             {node?.dimension_links.map(link => {
               return (
-                <tr>
+                <tr key={link.dimension.name}>
                   <td>
                     <a href={'/nodes/' + link.dimension.name}>
                       {link.dimension.name}

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

@@ -14,15 +14,17 @@ export default function NodeDependenciesTab({ node, djClient }) {
 
   useEffect(() => {
     const fetchData = async () => {
-      let upstreams = await djClient.upstreams(node.name);
-      let downstreams = await djClient.downstreams(node.name);
-      let dimensions = await djClient.nodeDimensions(node.name);
-      setNodeDAG({
-        upstreams: upstreams,
-        downstreams: downstreams,
-        dimensions: dimensions,
-      });
-      setRetrieved(true);
+      if (node) {
+        let upstreams = await djClient.upstreams(node.name);
+        let downstreams = await djClient.downstreams(node.name);
+        let dimensions = await djClient.nodeDimensions(node.name);
+        setNodeDAG({
+          upstreams: upstreams,
+          downstreams: downstreams,
+          dimensions: dimensions,
+        });
+        setRetrieved(true);
+      }
     };
     fetchData().catch(console.error);
   }, [djClient, node]);
@@ -102,12 +104,12 @@ export function NodeDimensionsList({ rawDimensions }) {
           };
         });
         return (
-          <details>
+          <details key={grouping[0]}>
             <summary style={{ marginBottom: '10px' }}>{groupHeader}</summary>
             <div className="dimensionsList">
               {dimensionGroupOptions.map(dimension => {
                 return (
-                  <div>
+                  <div key={dimension.value}>
                     {dimension.label.split('[').slice(0)[0]} ⇢{' '}
                     <code className="DimensionAttribute">
                       {dimension.value}
@@ -127,7 +129,11 @@ export function NodeList({ nodes }) {
   return nodes && nodes.length > 0 ? (
     <ul className="backfills">
       {nodes?.map(node => (
-        <li className="backfill" style={{ marginBottom: '5px' }}>
+        <li
+          className="backfill"
+          style={{ marginBottom: '5px' }}
+          key={node.name}
+        >
           <span
             className={`node_type__${node.type} badge node_type`}
             style={{ marginRight: '5px' }}

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

@@ -110,8 +110,10 @@ const NodeGraphTab = djNode => {
   };
 
   const dagFetch = async (getLayoutedElements, setNodes, setEdges) => {
-    let related_nodes = await djClient.node_dag(djNode.djNode.name);
-    var djNodes = [djNode.djNode];
+    let related_nodes = djNode.djNode
+      ? await djClient.node_dag(djNode.djNode.name)
+      : [];
+    var djNodes = djNode.djNode ? [djNode.djNode] : [];
     for (const iterable of [related_nodes]) {
       for (const item of iterable) {
         if (item.type !== 'cube') {

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

@@ -47,7 +47,10 @@ export default function NodeInfoTab({ node }) {
           The following functions used in the metric definition may not be
           compatible with Druid SQL:{' '}
           {node?.incompatible_druid_functions.map(func => (
-            <li style={{ listStyleType: 'none', margin: '0.7rem 0.7rem' }}>
+            <li
+              style={{ listStyleType: 'none', margin: '0.7rem 0.7rem' }}
+              key={func}
+            >
               ⇢{' '}
               <span style={{ background: '#fff', padding: '0.3rem' }}>
                 {func}

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

@@ -80,7 +80,7 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
               <Form>
                 {displayMessageAfterSubmit(status)}
                 <span data-testid="edit-partition">
-                  <label htmlFor="react-select-3-input">Partition Type</label>
+                  <label htmlFor="partitionType">Partition Type</label>
                   <Field
                     as="select"
                     name="partition_type"
@@ -108,9 +108,7 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
                 <br />
                 {values.partition_type === 'temporal' ? (
                   <>
-                    <label htmlFor="react-select-3-input">
-                      Partition Format
-                    </label>
+                    <label htmlFor="partitionFormat">Partition Format</label>
                     <Field
                       type="text"
                       name="format"
@@ -119,7 +117,7 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
                     />
                     <br />
                     <br />
-                    <label htmlFor="react-select-3-input">
+                    <label htmlFor="partitionGranularity">
                       Partition Granularity
                     </label>
                     <Field