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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-a35.dev0",
+  "version": "0.0.1-a36",
   "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

@@ -120,7 +120,7 @@ describe('AddEditNodePage submission succeeded', () => {
       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(

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;
@@ -363,6 +364,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) {
+        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();
+};

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

@@ -0,0 +1,378 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { CubeBuilderPage } from '../index';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import React from 'react';
+
+const mockDjClient = {
+  metrics: jest.fn(),
+  commonDimensions: jest.fn(),
+  createCube: jest.fn(),
+  namespaces: jest.fn(),
+  cube: jest.fn(),
+};
+
+const mockMetrics = [
+  'default.num_repair_orders',
+  'default.avg_repair_price',
+  'default.total_repair_cost',
+];
+
+const mockCube = {
+  node_revision_id: 102,
+  node_id: 33,
+  type: 'cube',
+  name: 'default.repair_orders_cube',
+  display_name: 'Default: Repair Orders Cube',
+  version: 'v4.0',
+  description: 'Repairs cube',
+  availability: null,
+  cube_elements: [
+    {
+      name: 'default_DOT_total_repair_cost',
+      display_name: 'Total Repair Cost',
+      node_name: 'default.total_repair_cost',
+      type: 'metric',
+      partition: null,
+    },
+    {
+      name: 'default_DOT_num_repair_orders',
+      display_name: 'Num Repair Orders',
+      node_name: 'default.num_repair_orders',
+      type: 'metric',
+      partition: null,
+    },
+    {
+      name: 'country',
+      display_name: 'Country',
+      node_name: 'default.hard_hat',
+      type: 'dimension',
+      partition: null,
+    },
+    {
+      name: 'state',
+      display_name: 'State',
+      node_name: 'default.hard_hat',
+      type: 'dimension',
+      partition: null,
+    },
+  ],
+  query: '',
+  columns: [
+    {
+      name: 'default.total_repair_cost',
+      display_name: 'Total Repair Cost',
+      type: 'double',
+      attributes: [],
+      dimension: null,
+      partition: null,
+    },
+    {
+      name: 'default.num_repair_orders',
+      display_name: 'Num Repair Orders',
+      type: 'bigint',
+      attributes: [],
+      dimension: null,
+      partition: null,
+    },
+    {
+      name: 'default.hard_hat.country',
+      display_name: 'Country',
+      type: 'string',
+      attributes: [],
+      dimension: null,
+      partition: null,
+    },
+    {
+      name: 'default.hard_hat.state',
+      display_name: 'State',
+      type: 'string',
+      attributes: [],
+      dimension: null,
+      partition: null,
+    },
+  ],
+  updated_at: '2023-12-03T06:51:09.598532+00:00',
+  materializations: [],
+};
+
+const mockCommonDimensions = [
+  {
+    name: 'default.date_dim.dateint',
+    type: 'timestamp',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    is_primary_key: false,
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.dateint',
+    type: 'timestamp',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    is_primary_key: true,
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.day',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    is_primary_key: false,
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.day',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    is_primary_key: false,
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.month',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    is_primary_key: false,
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.month',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    is_primary_key: false,
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.year',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    is_primary_key: false,
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.year',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    is_primary_key: false,
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+];
+
+describe('CubeBuilderPage', () => {
+  beforeEach(() => {
+    mockDjClient.metrics.mockResolvedValue(mockMetrics);
+    mockDjClient.commonDimensions.mockResolvedValue(mockCommonDimensions);
+    mockDjClient.createCube.mockResolvedValue({ status: 201, json: {} });
+    mockDjClient.namespaces.mockResolvedValue(['default']);
+    mockDjClient.cube.mockResolvedValue(mockCube);
+
+    window.scrollTo = jest.fn();
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    expect(screen.getByText('Cube')).toBeInTheDocument();
+  });
+
+  it('renders the Metrics section', () => {
+    expect(screen.getByText('Metrics *')).toBeInTheDocument();
+  });
+
+  it('renders the Dimensions section', () => {
+    expect(screen.getByText('Dimensions *')).toBeInTheDocument();
+  });
+
+  it('creates a new cube', async () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.metrics).toHaveBeenCalled();
+    });
+
+    const selectMetrics = screen.getAllByTestId('select-metrics')[0];
+    expect(selectMetrics).toBeDefined();
+    expect(selectMetrics).not.toBeNull();
+    expect(screen.getAllByText('3 Available Metrics')[0]).toBeInTheDocument();
+
+    fireEvent.keyDown(selectMetrics.firstChild, { key: 'ArrowDown' });
+    for (const metric of mockMetrics) {
+      await waitFor(() => {
+        expect(screen.getByText(metric)).toBeInTheDocument();
+        fireEvent.click(screen.getByText(metric));
+      });
+    }
+    fireEvent.click(screen.getAllByText('Dimensions *')[0]);
+
+    expect(mockDjClient.commonDimensions).toHaveBeenCalled();
+
+    const selectDimensions = screen.getAllByTestId('select-dimensions')[0];
+    expect(selectDimensions).toBeDefined();
+    expect(selectDimensions).not.toBeNull();
+    expect(
+      screen.getByText(
+        'default.repair_order_details.repair_order_id → default.repair_order.hard_hat_id → default.hard_hat.birth_date',
+      ),
+    ).toBeInTheDocument();
+
+    const selectDimensionsDate = screen.getAllByTestId(
+      'dimensions-default.date_dim',
+    )[0];
+
+    fireEvent.keyDown(selectDimensionsDate.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Day'));
+    fireEvent.click(screen.getByText('Month'));
+    fireEvent.click(screen.getByText('Year'));
+    fireEvent.click(screen.getByText('Dateint'));
+
+    // Save
+    const createCube = screen.getAllByRole('button', {
+      name: 'CreateCube',
+    })[0];
+    expect(createCube).toBeInTheDocument();
+
+    await waitFor(() => {
+      fireEvent.click(createCube);
+    });
+    await waitFor(() => {
+      expect(mockDjClient.createCube).toHaveBeenCalledWith(
+        '',
+        '',
+        '',
+        'draft',
+        [
+          'default.num_repair_orders',
+          'default.avg_repair_price',
+          'default.total_repair_cost',
+        ],
+        [
+          'default.date_dim.day',
+          'default.date_dim.month',
+          'default.date_dim.year',
+          'default.date_dim.dateint',
+        ],
+        [],
+      );
+    });
+  });
+
+  const renderEditNode = element => {
+    return render(
+      <MemoryRouter initialEntries={['/nodes/default.repair_orders_cube/edit']}>
+        <Routes>
+          <Route path="nodes/:name/edit" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  it('updates an existing cube', async () => {
+    renderEditNode(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.metrics).toHaveBeenCalled();
+    });
+
+    const selectMetrics = screen.getAllByTestId('select-metrics')[0];
+    expect(selectMetrics).toBeDefined();
+    expect(selectMetrics).not.toBeNull();
+    expect(screen.getAllByText('3 Available Metrics')[0]).toBeInTheDocument();
+
+    fireEvent.click(screen.getAllByText('Dimensions *')[0]);
+
+    expect(mockDjClient.commonDimensions).toHaveBeenCalled();
+
+    const selectDimensions = screen.getAllByTestId('select-dimensions')[0];
+    expect(selectDimensions).toBeDefined();
+    expect(selectDimensions).not.toBeNull();
+    expect(
+      screen.getByText(
+        'default.repair_order_details.repair_order_id → default.repair_order.hard_hat_id → default.hard_hat.birth_date',
+      ),
+    ).toBeInTheDocument();
+
+    const selectDimensionsDate = screen.getAllByTestId(
+      'dimensions-default.date_dim',
+    )[0];
+
+    fireEvent.keyDown(selectDimensionsDate.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Day'));
+    fireEvent.click(screen.getByText('Month'));
+    fireEvent.click(screen.getByText('Year'));
+    fireEvent.click(screen.getByText('Dateint'));
+
+    // Save
+    const createCube = screen.getAllByRole('button', {
+      name: 'CreateCube',
+    })[0];
+    expect(createCube).toBeInTheDocument();
+
+    await waitFor(() => {
+      fireEvent.click(createCube);
+    });
+    await waitFor(() => {
+      expect(mockDjClient.createCube).toHaveBeenCalledWith(
+        '',
+        '',
+        '',
+        'draft',
+        [],
+        [],
+        [],
+      );
+    });
+  });
+});

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

@@ -0,0 +1,254 @@
+import React, { useContext, useEffect, useState } from 'react';
+import NamespaceHeader from '../../components/NamespaceHeader';
+import { DataJunctionAPI } from '../../services/DJService';
+import DJClientContext from '../../providers/djclient';
+import 'react-querybuilder/dist/query-builder.scss';
+import 'styles/styles.scss';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import { useParams } from 'react-router-dom';
+import { Action } from '../../components/forms/Action';
+import NodeNameField from '../../components/forms/NodeNameField';
+import NodeTagsInput from '../../components/forms/NodeTagsInput';
+import { MetricsSelect } from './MetricsSelect';
+import { DimensionsSelect } from './DimensionsSelect';
+
+export function CubeBuilderPage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  let { nodeType, initialNamespace, name } = useParams();
+  const action = name !== undefined ? Action.Edit : Action.Add;
+  const validator = ruleType => !!ruleType.value;
+
+  const initialValues = {
+    name: action === Action.Edit ? name : '',
+    namespace: action === Action.Add ? initialNamespace : '',
+    display_name: '',
+    description: '',
+    mode: 'draft',
+    metrics: [],
+    dimensions: [],
+    filters: [],
+  };
+
+  const handleSubmit = (values, { setSubmitting, setStatus }) => {
+    if (action === Action.Add) {
+      setTimeout(() => {
+        createNode(values, setStatus);
+        setSubmitting(false);
+      }, 400);
+    } else {
+      setTimeout(() => {
+        patchNode(values, setStatus);
+        setSubmitting(false);
+      }, 400);
+    }
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  };
+
+  const createNode = async (values, setStatus) => {
+    const { status, json } = await djClient.createCube(
+      values.name,
+      values.display_name,
+      values.description,
+      values.mode,
+      values.metrics,
+      values.dimensions,
+      values.filters || [],
+    );
+    if (status === 200 || status === 201) {
+      if (values.tags) {
+        await djClient.tagsNode(values.name, values.tags);
+      }
+      setStatus({
+        success: (
+          <>
+            Successfully created {json.type} node{' '}
+            <a href={`/nodes/${json.name}`}>{json.name}</a>!
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const patchNode = async (values, setStatus) => {
+    const { status, json } = await djClient.patchCube(
+      values.name,
+      values.display_name,
+      values.description,
+      values.mode,
+      values.metrics,
+      values.dimensions,
+      values.filters || [],
+    );
+    const tagsResponse = await djClient.tagsNode(
+      values.name,
+      values.tags.map(tag => tag),
+    );
+    if ((status === 200 || status === 201) && tagsResponse.status === 200) {
+      setStatus({
+        success: (
+          <>
+            Successfully updated {json.type} node{' '}
+            <a href={`/nodes/${json.name}`}>{json.name}</a>!
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const updateFieldsWithNodeData = (data, setFieldValue) => {
+    setFieldValue('display_name', data.display_name || '', false);
+    setFieldValue('description', data.description || '', false);
+    setFieldValue('mode', data.mode || 'draft', false);
+  };
+
+  const staticFieldsInEdit = () => (
+    <>
+      <div className="NodeNameInput NodeCreationInput">
+        <label htmlFor="name">Name</label> {name}
+      </div>
+      <div className="NodeNameInput NodeCreationInput">
+        <label htmlFor="name">Type</label> cube
+      </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>
+    </>
+  );
+
+  // @ts-ignore
+  return (
+    <>
+      <div className="mid">
+        <NamespaceHeader namespace="" />
+        <Formik
+          initialValues={initialValues}
+          validate={validator}
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue, props }) {
+            const [node, setNode] = useState([]);
+
+            // Get cube
+            useEffect(() => {
+              const fetchData = async () => {
+                if (name) {
+                  const node = await djClient.node(name);
+                  const cube = await djClient.cube(name);
+                  cube.tags = node.tags;
+                  setNode(cube);
+                  updateFieldsWithNodeData(cube, setFieldValue);
+                }
+              };
+              fetchData().catch(console.error);
+            }, [djClient, djClient.metrics, name]);
+
+            return (
+              <Form>
+                <div className="card">
+                  <div className="card-header">
+                    <h2>
+                      {action === Action.Edit ? 'Edit' : 'Create'}{' '}
+                      <span
+                        className={`node_type__cube node_type_creation_heading`}
+                      >
+                        Cube
+                      </span>
+                    </h2>
+                    {displayMessageAfterSubmit(status)}
+                    {action === Action.Add ? (
+                      <NodeNameField />
+                    ) : (
+                      staticFieldsInEdit(node)
+                    )}
+                    <div className="DescriptionInput NodeCreationInput">
+                      <ErrorMessage name="description" component="span" />
+                      <label htmlFor="Description">Description</label>
+                      <Field
+                        type="textarea"
+                        as="textarea"
+                        name="description"
+                        id="Description"
+                        placeholder="Describe your node"
+                      />
+                    </div>
+                    <div className="CubeCreationInput">
+                      <label htmlFor="react-select-3-input">Metrics *</label>
+                      <p>Select metrics to include in the cube.</p>
+                      <span
+                        data-testid="select-metrics"
+                        style={{ marginTop: '15px' }}
+                      >
+                        {action === Action.Edit ? (
+                          <MetricsSelect cube={node} />
+                        ) : (
+                          <MetricsSelect />
+                        )}
+                      </span>
+                    </div>
+                    <br />
+                    <br />
+                    <div className="CubeCreationInput">
+                      <label htmlFor="react-select-3-input">Dimensions *</label>
+                      <p>
+                        Select dimensions to include in the cube. As metrics are
+                        selected above, the list of available dimensions will be
+                        filtered to those shared by the selected metrics. If the
+                        dimensions list is empty, no shared dimensions were
+                        discovered.
+                      </p>
+                      <span data-testid="select-dimensions">
+                        {action === Action.Edit ? (
+                          <DimensionsSelect cube={node} />
+                        ) : (
+                          <DimensionsSelect />
+                        )}
+                      </span>
+                    </div>
+                    <div className="NodeModeInput NodeCreationInput">
+                      <ErrorMessage name="mode" component="span" />
+                      <label htmlFor="Mode">Mode</label>
+                      <Field as="select" name="mode" id="Mode">
+                        <option value="draft">Draft</option>
+                        <option value="published">Published</option>
+                      </Field>
+                    </div>
+                    <NodeTagsInput action={action} node={node} />
+                    <button
+                      type="submit"
+                      disabled={isSubmitting}
+                      aria-label="CreateCube"
+                    >
+                      {action === Action.Add ? 'Create Cube' : 'Save'}{' '}
+                      {nodeType}
+                    </button>
+                  </div>
+                </div>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}
+
+CubeBuilderPage.defaultProps = {
+  djClient: DataJunctionAPI,
+};

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

@@ -150,6 +150,11 @@ export function NamespacePage() {
                       Tag
                     </div>
                   </a>
+                  <a href={`/create/cube/${namespace}`}>
+                    <div className="node_type__cube node_type_creation_heading">
+                      Cube
+                    </div>
+                  </a>
                 </div>
               </div>
             </span>

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

@@ -76,7 +76,12 @@ export default function NodeInfoTab({ node }) {
         aria-label="CubeElement"
         aria-hidden="false"
       >
-        <a href={`/nodes/${cubeElem.node_name}`}>{cubeElem.display_name}</a>
+        <a href={`/nodes/${cubeElem.node_name}`}>
+          {cubeElem.type === 'dimension'
+            ? labelize(cubeElem.node_name.split('.').slice(-1)[0]) + ' → '
+            : ''}
+          {cubeElem.display_name}
+        </a>
         <span
           className={`badge node_type__${
             cubeElem.type === 'metric' ? cubeElem.type : 'dimension'

package/src/app/pages/NodePage/__tests__/AddBackfillPopover.test.jsx

@@ -36,7 +36,6 @@ describe('<AddBackfillPopover />', () => {
     fireEvent.click(getByLabelText('AddBackfill'));
 
     fireEvent.click(getByText('Save'));
-    getByText('Save').click();
 
     // Expect setAttributes to be called
     await waitFor(() => {

package/src/app/services/DJService.js

@@ -146,6 +146,61 @@ export const DataJunctionAPI = {
     }
   },
 
+  createCube: async function (
+    name,
+    display_name,
+    description,
+    mode,
+    metrics,
+    dimensions,
+    filters,
+  ) {
+    const response = await fetch(`${DJ_URL}/nodes/cube`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: name,
+        display_name: display_name,
+        description: description,
+        metrics: metrics,
+        dimensions: dimensions,
+        filters: filters,
+        mode: mode,
+      }),
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+
+  patchCube: async function (
+    name,
+    display_name,
+    description,
+    mode,
+    metrics,
+    dimensions,
+    filters,
+  ) {
+    const response = await fetch(`${DJ_URL}/nodes/${name}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        display_name: display_name,
+        description: description,
+        metrics: metrics,
+        dimensions: dimensions,
+        filters: filters || [],
+        mode: mode,
+      }),
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+
   registerTable: async function (catalog, schema, table) {
     const response = await fetch(
       `${DJ_URL}/register/table/${catalog}/${schema}/${table}`,

package/src/app/services/__tests__/DJService.test.jsx

@@ -140,6 +140,73 @@ describe('DataJunctionAPI', () => {
     });
   });
 
+  it('calls createCube correctly', async () => {
+    const sampleArgs = [
+      'default.node_name',
+      'Node Display Name',
+      'Some readable description',
+      'draft',
+      ['default.num_repair_orders'],
+      [
+        'default.date_dim.year',
+        'default.date_dim.month',
+        'default.date_dim.day',
+      ],
+      [],
+    ];
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.createCube(...sampleArgs);
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/nodes/cube`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: sampleArgs[0],
+        display_name: sampleArgs[1],
+        description: sampleArgs[2],
+        metrics: sampleArgs[4],
+        dimensions: sampleArgs[5],
+        filters: sampleArgs[6],
+        mode: sampleArgs[3],
+      }),
+      credentials: 'include',
+    });
+  });
+
+  it('calls patchCube correctly', async () => {
+    const sampleArgs = [
+      'default.node_name',
+      'Node Display Name',
+      'Some readable description',
+      'draft',
+      ['default.num_repair_orders'],
+      [
+        'default.date_dim.year',
+        'default.date_dim.month',
+        'default.date_dim.day',
+      ],
+      [],
+    ];
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.patchCube(...sampleArgs);
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/nodes/default.node_name`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        display_name: sampleArgs[1],
+        description: sampleArgs[2],
+        metrics: sampleArgs[4],
+        dimensions: sampleArgs[5],
+        filters: sampleArgs[6],
+        mode: sampleArgs[3],
+      }),
+      credentials: 'include',
+    });
+  });
+
   it('calls upstreams correctly', async () => {
     const nodeName = 'sampleNode';
     fetch.mockResponseOnce(JSON.stringify({}));

package/src/styles/index.css

@@ -543,6 +543,10 @@ tbody th {
   font-size: 12px;
 }
 
+.dimension_option_subheading:empty {
+  display: none;
+}
+
 .upstreams {
   width: 260px;
   display: flex;

package/src/styles/node-creation.scss

@@ -39,6 +39,13 @@ form {
     padding: 0 20px;
   }
 
+  .CubeCreationInput {
+    margin: 0.5rem 0;
+    display: inline-grid;
+    width: 75%;
+    padding: 0 20px;
+  }
+
   .DisplayNameInput,
   .FullNameInput,
   .NamespaceInput {
@@ -195,3 +202,8 @@ form {
   width: 20%;
   padding: 0 20px;
 }
+
+.HighlightPath {
+  background: #f5efff;
+  padding: 5px;
+}