datajunction-ui 0.0.1-a35.dev0 → 0.0.1-a37

package/package.json

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

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

@@ -0,0 +1,8 @@
+export class Action {
+  static Add = new Action('add');
+  static Edit = new Action('edit');
+
+  constructor(name) {
+    this.name = name;
+  }
+}

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

@@ -0,0 +1,64 @@
+import { ErrorMessage, Field } from 'formik';
+import { FormikSelect } from '../../pages/AddEditNodePage/FormikSelect';
+import { FullNameField } from '../../pages/AddEditNodePage/FullNameField';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { useParams } from 'react-router-dom';
+
+/*
+ * This component creates the namespace selector, display name input, and
+ * derived name fields in a form. It can be reused any time we need to create
+ * a new node.
+ */
+
+export default function NodeNameField() {
+  const [namespaces, setNamespaces] = useState([]);
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  let { initialNamespace } = useParams();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const namespaces = await djClient.namespaces();
+      setNamespaces(
+        namespaces.map(m => ({
+          value: m['namespace'],
+          label: m['namespace'],
+        })),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.metrics]);
+
+  return (
+    <>
+      <div className="NamespaceInput">
+        <ErrorMessage name="namespace" component="span" />
+        <label htmlFor="react-select-3-input">Namespace *</label>
+        <FormikSelect
+          selectOptions={namespaces}
+          formikFieldName="namespace"
+          placeholder="Choose Namespace"
+          defaultValue={{
+            value: initialNamespace,
+            label: initialNamespace,
+          }}
+        />
+      </div>
+      <div className="DisplayNameInput NodeCreationInput">
+        <ErrorMessage name="display_name" component="span" />
+        <label htmlFor="displayName">Display Name *</label>
+        <Field
+          type="text"
+          name="display_name"
+          id="displayName"
+          placeholder="Human readable display name"
+        />
+      </div>
+      <div className="FullNameInput NodeCreationInput">
+        <ErrorMessage name="name" component="span" />
+        <label htmlFor="FullName">Full Name</label>
+        <FullNameField type="text" name="name" />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { ErrorMessage } from 'formik';
+import { FormikSelect } from '../../pages/AddEditNodePage/FormikSelect';
+import { Action } from './Action';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+
+export default function NodeTagsInput({ action, node }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [tags, setTags] = useState([]);
+
+  // Get list of tags
+  useEffect(() => {
+    const fetchData = async () => {
+      const tags = await djClient.listTags();
+      setTags(
+        tags.map(tag => ({
+          value: tag.name,
+          label: tag.display_name,
+        })),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.listTags]);
+
+  return (
+    <div
+      className="TagsInput"
+      style={{ width: '25%', margin: '1rem 0 1rem 1.2rem' }}
+    >
+      <ErrorMessage name="tags" component="span" />
+      <label htmlFor="react-select-3-input">Tags</label>
+      <span data-testid="select-tags">
+        {action === Action.Edit && node?.tags?.length >= 0 ? (
+          <FormikSelect
+            className=""
+            isMulti={true}
+            selectOptions={tags}
+            formikFieldName="tags"
+            placeholder="Choose Tags"
+            defaultValue={node?.tags?.map(t => {
+              return { value: t.name, label: t.display_name };
+            })}
+          />
+        ) : (
+          ''
+        )}
+        {action === Action.Add ? (
+          <FormikSelect
+            className=""
+            isMulti={true}
+            selectOptions={tags}
+            formikFieldName="tags"
+            placeholder="Choose Tags"
+          />
+        ) : (
+          ''
+        )}
+      </span>
+    </div>
+  );
+}

package/src/app/index.tsx

@@ -10,6 +10,7 @@ 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 { CubeBuilderPage } from './pages/CubeBuilderPage/Loadable';
 import { TagPage } from './pages/TagPage/Loadable';
 import { AddEditNodePage } from './pages/AddEditNodePage/Loadable';
 import { AddEditTagPage } from './pages/AddEditTagPage/Loadable';
@@ -52,6 +53,11 @@ export function App() {
                           key="edit"
                           element={<AddEditNodePage />}
                         />
+                        <Route
+                          path=":name/edit-cube"
+                          key="edit-cube"
+                          element={<CubeBuilderPage />}
+                        />
                       </Route>
 
                       <Route path="/" element={<NamespacePage />} key="index" />
@@ -72,6 +78,18 @@ export function App() {
                         key="register"
                         element={<RegisterTablePage />}
                       ></Route>
+                      <Route path="/create/cube">
+                        <Route
+                          path=":initialNamespace"
+                          key="create"
+                          element={<CubeBuilderPage />}
+                        />
+                        <Route
+                          path=""
+                          key="create"
+                          element={<CubeBuilderPage />}
+                        />
+                      </Route>
                       <Route path="create/:nodeType">
                         <Route
                           path=":initialNamespace"

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormFailed.test.jsx

@@ -93,7 +93,7 @@ describe('AddEditNodePage submission failed', () => {
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalled();
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
         'default.num_repair_orders',
-        ['purpose'],
+        [{ display_name: 'Purpose', name: 'purpose' }],
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toReturnWith({
         json: { message: 'Some tags were not found' },

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormSuccess.test.jsx

@@ -113,22 +113,19 @@ describe('AddEditNodePage submission succeeded', () => {
         'Number of repair orders!!!',
         'SELECT count(repair_order_id) default_DOT_num_repair_orders FROM default.repair_orders',
         'published',
-        ['repair_order_id', 'country'],
+        null,
         'neutral',
         'unitless',
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
         'default.num_repair_orders',
-        ['purpose'],
+        [{ display_name: 'Purpose', name: 'purpose' }],
       );
 
       expect(mockDjClient.DataJunctionAPI.listMetricMetadata).toBeCalledTimes(
         1,
       );
-      expect(
-        await screen.getByDisplayValue('repair_order_id, country'),
-      ).toBeInTheDocument();
       expect(
         await screen.getByText(/Successfully updated metric node/),
       ).toBeInTheDocument();

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

@@ -10,7 +10,7 @@ import { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../../providers/djclient';
 import 'styles/node-creation.scss';
 import AlertIcon from '../../icons/AlertIcon';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { FullNameField } from './FullNameField';
 import { FormikSelect } from './FormikSelect';
 import { NodeQueryField } from './NodeQueryField';
@@ -27,6 +27,7 @@ class Action {
 
 export function AddEditNodePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const navigate = useNavigate();
 
   let { nodeType, initialNamespace, name } = useParams();
   const action = name !== undefined ? Action.Edit : Action.Add;
@@ -201,13 +202,18 @@ export function AddEditNodePage() {
       'mode',
       'tags',
     ];
+    const primaryKey = data.columns
+      .filter(
+        col =>
+          col.attributes &&
+          col.attributes.filter(
+            attr => attr.attribute_type.name === 'primary_key',
+          ).length > 0,
+      )
+      .map(col => col.name);
     fields.forEach(field => {
-      if (
-        field === 'primary_key' &&
-        data[field] !== undefined &&
-        Array.isArray(data[field])
-      ) {
-        data[field] = data[field].join(', ');
+      if (field === 'primary_key') {
+        setFieldValue(field, primaryKey.join(', '));
       } else {
         setFieldValue(field, data[field] || '', false);
       }
@@ -363,6 +369,9 @@ export function AddEditNodePage() {
                       // Check if node type can be edited
                       if (!nodeCanBeEdited(data.type)) {
                         setNode(null);
+                        if (data.type === 'cube') {
+                          navigate(`/nodes/${data.name}/edit-cube`);
+                        }
                         setMessage(
                           `Node ${name} is of type ${data.type} and cannot be edited`,
                         );

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

@@ -0,0 +1,154 @@
+/**
+ * A select component for picking dimensions
+ */
+import { useField, useFormikContext } from 'formik';
+import Select from 'react-select';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { labelize } from '../../../utils/form';
+
+export const DimensionsSelect = ({ cube }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const { values, setFieldValue } = useFormikContext();
+
+  // eslint-disable-next-line no-unused-vars
+  const [field, _, helpers] = useField('dimensions');
+  const { setValue } = helpers;
+
+  // All common dimensions for the selected metrics, grouped by the dimension node and path
+  const [allDimensionsOptions, setAllDimensionsOptions] = useState([]);
+
+  // The selected dimensions, also grouped by dimension node and path
+  const [selectedDimensionsByGroup, setSelectedDimensionsByGroup] = useState(
+    {},
+  );
+
+  // The existing cube node's dimensions, if editing a cube
+  const [defaultDimensions, setDefaultDimensions] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      let cubeDimensions = undefined;
+      if (cube) {
+        cubeDimensions = cube?.cube_elements
+          .filter(element => element.type === 'dimension')
+          .map(cubeDim => {
+            return {
+              value: cubeDim.node_name + '.' + cubeDim.name,
+              label:
+                labelize(cubeDim.name) +
+                (cubeDim.is_primary_key ? ' (PK)' : ''),
+            };
+          });
+        setDefaultDimensions(cubeDimensions);
+        setValue(cubeDimensions.map(m => m.value));
+      }
+
+      if (values.metrics && values.metrics.length > 0) {
+        // Populate the common dimensions list based on the selected metrics
+        const commonDimensions = await djClient.commonDimensions(
+          values.metrics,
+        );
+        const grouped = Object.entries(
+          commonDimensions.reduce((group, dimension) => {
+            group[dimension.node_name + dimension.path] =
+              group[dimension.node_name + dimension.path] ?? [];
+            group[dimension.node_name + dimension.path].push(dimension);
+            return group;
+          }, {}),
+        );
+        setAllDimensionsOptions(grouped);
+
+        // Set the selected cube dimensions if an existing cube is being edited
+        if (cube) {
+          const currentSelectedDimensionsByGroup = selectedDimensionsByGroup;
+          grouped.forEach(grouping => {
+            const dimensionsInGroup = grouping[1];
+            currentSelectedDimensionsByGroup[dimensionsInGroup[0].node_name] =
+              getValue(
+                cubeDimensions.filter(
+                  dim =>
+                    dimensionsInGroup.filter(x => {
+                      return dim.value === x.name;
+                    }).length > 0,
+                ),
+              );
+            setSelectedDimensionsByGroup(currentSelectedDimensionsByGroup);
+            setValue(Object.values(currentSelectedDimensionsByGroup).flat(2));
+          });
+        }
+      } else {
+        setAllDimensionsOptions([]);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, setFieldValue, setValue, values.metrics, cube]);
+
+  // Retrieves the selected values as a list (since it is a multi-select)
+  const getValue = options => {
+    if (options) {
+      return options.map(option => option.value);
+    } else {
+      return [];
+    }
+  };
+
+  // Builds the block of dimensions selectors, grouped by node name + path
+  return allDimensionsOptions.map(grouping => {
+    const dimensionsInGroup = grouping[1];
+    const groupHeader = (
+      <h5
+        style={{
+          fontWeight: 'normal',
+          marginBottom: '5px',
+          marginTop: '15px',
+        }}
+      >
+        <a href={`/nodes/${dimensionsInGroup[0].node_name}`}>
+          <b>{dimensionsInGroup[0].node_display_name}</b>
+        </a>{' '}
+        via{' '}
+        <span className="HighlightPath">
+          {dimensionsInGroup[0].path.join(' → ')}
+        </span>
+      </h5>
+    );
+    const dimensionGroupOptions = dimensionsInGroup.map(dim => {
+      return {
+        value: dim.name,
+        label:
+          labelize(dim.name.split('.').slice(-1)[0]) +
+          (dim.is_primary_key ? ' (PK)' : ''),
+      };
+    });
+    //
+    const cubeDimensions = defaultDimensions.filter(
+      dim =>
+        dimensionGroupOptions.filter(x => {
+          return dim.value === x.value;
+        }).length > 0,
+    );
+    return (
+      <>
+        {groupHeader}
+        <span data-testid={'dimensions-' + dimensionsInGroup[0].node_name}>
+          <Select
+            className=""
+            name={'dimensions-' + dimensionsInGroup[0].node_name}
+            defaultValue={cubeDimensions}
+            options={dimensionGroupOptions}
+            isMulti
+            isClearable
+            closeMenuOnSelect={false}
+            onChange={selected => {
+              selectedDimensionsByGroup[dimensionsInGroup[0].node_name] =
+                getValue(selected);
+              setSelectedDimensionsByGroup(selectedDimensionsByGroup);
+              setValue(Object.values(selectedDimensionsByGroup).flat(2));
+            }}
+          />
+        </span>
+      </>
+    );
+  });
+};

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

@@ -0,0 +1,16 @@
+/**
+ * Asynchronously loads the component for the Node page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+export const CubeBuilderPage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.CubeBuilderPage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};

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

@@ -0,0 +1,79 @@
+/**
+ * A select component for picking metrics.
+ */
+import { useField, useFormikContext } from 'formik';
+import Select from 'react-select';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+
+export const MetricsSelect = ({ cube }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const { values } = useFormikContext();
+
+  // eslint-disable-next-line no-unused-vars
+  const [field, _, helpers] = useField('metrics');
+  const { setValue } = helpers;
+
+  // All metrics options
+  const [metrics, setMetrics] = useState([]);
+
+  // The existing cube's metrics, if editing a cube
+  const [defaultMetrics, setDefaultMetrics] = useState([]);
+
+  // Get metrics
+  useEffect(() => {
+    const fetchData = async () => {
+      if (cube && cube !== []) {
+        const cubeMetrics = cube?.cube_elements
+          .filter(element => element.type === 'metric')
+          .map(metric => {
+            return {
+              value: metric.node_name,
+              label: metric.node_name,
+            };
+          });
+        setDefaultMetrics(cubeMetrics);
+        await setValue(cubeMetrics.map(m => m.value));
+      }
+
+      const metrics = await djClient.metrics();
+      setMetrics(metrics.map(m => ({ value: m, label: m })));
+      console.log('metrics', metrics);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.metrics, cube]);
+
+  const getValue = options => {
+    if (options) {
+      return options.map(option => option.value);
+    } else {
+      return [];
+    }
+  };
+
+  const render = () => {
+    if (
+      metrics.length > 0 ||
+      (cube !== undefined && defaultMetrics.length > 0 && metrics.length > 0)
+    ) {
+      return (
+        <Select
+          defaultValue={defaultMetrics}
+          options={metrics}
+          name="metrics"
+          placeholder={`${metrics.length} Available Metrics`}
+          onBlur={field.onBlur}
+          onChange={selected => {
+            setValue(getValue(selected));
+          }}
+          noOptionsMessage={() => 'No metrics found.'}
+          isMulti
+          isClearable
+          closeMenuOnSelect={false}
+          isDisabled={!!(values.metrics.length && values.dimensions.length)}
+        />
+      );
+    }
+  };
+  return render();
+};