datajunction-ui 0.0.1-a1 → 0.0.1-a101

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.properties?.includes('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 = {};
+          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.properties?.includes('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,77 @@
+/**
+ * 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 })));
+    };
+    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}
+        />
+      );
+    }
+  };
+  return render();
+};

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

@@ -0,0 +1,405 @@
+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(),
+  node: jest.fn(),
+  listTags: jest.fn(),
+  tagsNode: jest.fn(),
+  patchCube: 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',
+    properties: [],
+    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',
+    properties: [],
+    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',
+    properties: [],
+    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',
+    properties: [],
+    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',
+    properties: [],
+    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',
+    properties: [],
+    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',
+    properties: [],
+    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',
+    properties: [],
+    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);
+    mockDjClient.node.mockResolvedValue(mockCube);
+    mockDjClient.listTags.mockResolvedValue([]);
+    mockDjClient.tagsNode.mockResolvedValue([]);
+    mockDjClient.patchCube.mockResolvedValue({ status: 201, json: {} });
+
+    window.scrollTo = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+    expect(screen.getByText('Cube')).toBeInTheDocument();
+  });
+
+  it('renders the Metrics section', () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+    expect(screen.getByText('Metrics *')).toBeInTheDocument();
+  });
+
+  it('renders the Dimensions section', () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+    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(
+        '',
+        '',
+        '',
+        'published',
+        [
+          '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-cube']}
+      >
+        <Routes>
+          <Route path="nodes/:name/edit-cube" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  it('updates an existing cube', async () => {
+    renderEditNode(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+    expect(screen.getAllByText('Edit')[0]).toBeInTheDocument();
+    await waitFor(() => {
+      expect(mockDjClient.cube).toHaveBeenCalled();
+    });
+    await waitFor(() => {
+      expect(mockDjClient.metrics).toHaveBeenCalled();
+    });
+
+    const selectMetrics = screen.getAllByTestId('select-metrics')[0];
+    expect(selectMetrics).toBeDefined();
+    expect(selectMetrics).not.toBeNull();
+    expect(screen.getByText('default.num_repair_orders')).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.patchCube).toHaveBeenCalledWith(
+        'default.repair_orders_cube',
+        'Default: Repair Orders Cube',
+        'Repairs cube',
+        'draft',
+        ['default.total_repair_cost', 'default.num_repair_orders'],
+        [
+          'default.date_dim.day',
+          'default.date_dim.month',
+          'default.date_dim.year',
+          'default.date_dim.dateint',
+        ],
+        [],
+      );
+    });
+  });
+});