datajunction-ui 0.0.1-a48 → 0.0.1-a49

package/package.json

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

package/src/app/components/QueryInfo.jsx

@@ -1,3 +1,7 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { solarizedDark } from 'react-syntax-highlighter/src/styles/hljs';
+import React from 'react';
+
 export default function QueryInfo({
   id,
   state,
@@ -8,9 +12,11 @@ export default function QueryInfo({
   output_table,
   scheduled,
   started,
+  finished,
   numRows,
+  isList = false,
 }) {
-  return (
+  return isList === false ? (
     <div className="table-responsive">
       <table className="card-inner-table table">
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
@@ -73,5 +79,94 @@ export default function QueryInfo({
         </tbody>
       </table>
     </div>
+  ) : (
+    <div className="rightbottom">
+      <ul style={{ padding: '20px' }}>
+        <li className={'query-info'}>
+          <label>Query ID</label>{' '}
+          <span className="tag_value rounded-pill badge">
+            {links?.length ? (
+              <a
+                href={links[links.length - 1]}
+                target={'_blank'}
+                rel="noreferrer"
+              >
+                {id}
+              </a>
+            ) : (
+              id
+            )}
+          </span>
+        </li>
+        <li className={'query-info'}>
+          <label>State</label>
+          <span className="tag_value rounded-pill badge">{state}</span>
+        </li>
+        <li className={'query-info'}>
+          <label>Engine</label>{' '}
+          <span className="tag_value rounded-pill badge">
+            {engine_name}
+            {' - '}
+            {engine_version}
+          </span>
+        </li>
+        <li className={'query-info'}>
+          <label>Scheduled</label> {scheduled}
+        </li>
+        <li className={'query-info'}>
+          <label>Started</label> {started}
+        </li>
+        <li className={'query-info'}>
+          <label>Finished</label> {finished}
+        </li>
+        <li className={'query-info'}>
+          <label>Logs</label>{' '}
+          {errors?.length ? (
+            errors.map(error => (
+              <div
+                style={{
+                  height: '800px',
+                  width: '80%',
+                  overflow: 'scroll',
+                  borderRadius: '0',
+                  border: '1px solid #ccc',
+                }}
+                className="queryrunner-query"
+              >
+                <SyntaxHighlighter
+                  language="javascript"
+                  style={solarizedDark}
+                  wrapLines={true}
+                >
+                  {error}
+                </SyntaxHighlighter>
+              </div>
+            ))
+          ) : (
+            <></>
+          )}
+        </li>
+        <li className={'query-info'}>
+          <label>Links:</label>{' '}
+          {links?.length ? (
+            links.map((link, idx) => (
+              <p key={idx}>
+                <a href={link} target="_blank" rel="noreferrer">
+                  {link}
+                </a>
+              </p>
+            ))
+          ) : (
+            <></>
+          )}
+        </li>
+        <li className={'query-info'}>
+          <label>Output Table:</label> {output_table}
+        </li>
+        <li className={'query-info'}>
+          <label>Rows:</label> {numRows}
+        </li>
+      </ul>
+    </div>
   );
 }

package/src/app/icons/LoadingIcon.jsx

@@ -3,7 +3,7 @@ import '../../styles/loading.css';
 export default function LoadingIcon() {
   return (
     <center>
-      <div class="lds-ring">
+      <div className="lds-ring">
         <div></div>
         <div></div>
         <div></div>

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

@@ -0,0 +1,93 @@
+import { useContext, useEffect, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import CreatableSelect from 'react-select/creatable';
+
+export default function DimensionFilter({ dimension, onChange }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [dimensionValues, setDimensionValues] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const dimensionNode = await djClient.node(dimension.metadata.node_name);
+
+      // Only include the primary keys as filterable dimensions for now, until we figure out how
+      // to build a manageable UI experience around all dimensional attributes
+      if (dimensionNode && dimensionNode.type === 'dimension') {
+        const primaryKey =
+          dimensionNode.name +
+          '.' +
+          dimensionNode.columns
+            .filter(col =>
+              col.attributes.some(
+                attr => attr.attribute_type.name === 'primary_key',
+              ),
+            )
+            .map(col => col.name);
+        const label =
+          dimensionNode.name +
+          '.' +
+          dimensionNode.columns
+            .filter(col =>
+              col.attributes.some(attr => attr.attribute_type.name === 'label'),
+            )
+            .map(col => col.name);
+
+        // TODO: we're disabling this for now because it's unclear how performant the dimensions node
+        // data endpoints are. To re-enable, uncomment the following line:
+        // const data = await djClient.nodeData(dimension.metadata.node_name);
+        const data = { results: [] };
+
+        // TODO: when the above is enabled, this will use each dimension node's 'Label' column
+        // to build the display label for the dropdown, while continuing to pass the primary
+        // key in for filtering
+        /* istanbul ignore if */
+        if (dimensionNode && data.results && data.results.length > 0) {
+          const columnNames = data.results[0].columns.map(
+            column => column.semantic_entity,
+          );
+          const dimValues = data.results[0].rows.map(row => {
+            const rowData = { value: '', label: '' };
+            row.forEach((value, index) => {
+              if (columnNames[index] === primaryKey) {
+                rowData.value = value;
+                if (rowData.label === '') {
+                  rowData.label = value;
+                }
+              } else if (columnNames[index] === label) {
+                rowData.label = value;
+              }
+            });
+            return rowData;
+          });
+          setDimensionValues(dimValues);
+        }
+      }
+    };
+    fetchData().catch(console.error);
+  }, [dimension.metadata.node_name, djClient]);
+
+  return (
+    <div key={dimension.metadata.node_name}>
+      {dimension.label.split('[').slice(0)[0]} (
+      {
+        <a href={`/nodes/${dimension.metadata.node_name}`}>
+          {dimension.metadata.node_display_name}
+        </a>
+      }
+      )
+      <CreatableSelect
+        name="dimensions"
+        options={dimensionValues}
+        isMulti
+        isClearable
+        onChange={event => {
+          onChange({
+            dimension: dimension.value,
+            values: event,
+          });
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,370 @@
+import React, { useEffect, useState } from 'react';
+import Select from 'react-select';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import { labelize } from '../../../utils/form';
+import { Form, Formik } from 'formik';
+import DimensionFilter from './DimensionFilter';
+import QueryInfo from '../../components/QueryInfo';
+import LoadingIcon from '../../icons/LoadingIcon';
+
+export default function NodeValidateTab({ node, djClient }) {
+  const [query, setQuery] = useState('');
+  const [lookup, setLookup] = useState([]);
+  const [running, setRunning] = useState(false);
+
+  // These are a list of dimensions that are available for this node
+  const [dimensions, setDimensions] = useState([]);
+
+  // A separate structure used to store the selected dimensions to filter by and their values
+  const [selectedFilters, setSelectedFilters] = useState({});
+
+  // The set of dimensions and filters to pass to the /sql or /data endpoints for the node
+  const [selection, setSelection] = useState({
+    dimensions: [],
+    filters: [],
+  });
+
+  // Any query result info retrieved when a node query is run
+  const [queryInfo, setQueryInfo] = useState(null);
+
+  const initialValues = {};
+
+  const [state, setState] = useState({
+    selectedTab: 'results',
+  });
+
+  const switchTab = tabName => {
+    setState({ selectedTab: tabName });
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (node) {
+        // Find all the dimensions for this node
+        const dimensions = await djClient.nodeDimensions(node.name);
+
+        // Create a dimensions lookup object
+        const lookup = {};
+        dimensions.forEach(dimension => {
+          lookup[dimension.name] = dimension;
+        });
+        setLookup(lookup);
+
+        // Group the dimensions by dimension node
+        const grouped = Object.entries(
+          dimensions.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;
+          }, {}),
+        );
+        setDimensions(grouped);
+
+        // Build the query for this node based on the user-provided dimensions and filters
+        const query = await djClient.sql(node.name, selection);
+        setQuery(query.sql);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node, selection]);
+
+  const dimensionsList = dimensions.flatMap(grouping => {
+    const dimensionsInGroup = grouping[1];
+    return dimensionsInGroup
+      .filter(dim => dim.is_primary_key === true)
+      .map(dim => {
+        return {
+          value: dim.name,
+          label: (
+            <span>
+              {labelize(dim.name.split('.').slice(-1)[0])}{' '}
+              <small>{dim.name}</small>
+            </span>
+          ),
+        };
+      });
+  });
+
+  // Run the query and use SSE to stream the status of the query execution results
+  const runQuery = async (values, setStatus, setSubmitting) => {
+    setRunning(true);
+    const sse = await djClient.streamNodeData(node?.name, selection);
+    sse.onmessage = e => {
+      const messageData = JSON.parse(JSON.parse(e.data));
+      if (messageData.results && messageData.results?.length > 0) {
+        messageData.numRows = messageData.results?.length
+          ? messageData.results[0].rows.length
+          : [];
+        switchTab('results');
+      } else {
+        switchTab('info');
+      }
+      setQueryInfo(messageData);
+    };
+    sse.onerror = () => sse.close();
+    setRunning(false);
+  };
+
+  // Handle form submission (runs the query)
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
+    await runQuery(values, setStatus, setSubmitting).then(_ => {
+      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+      setSubmitting(false);
+    });
+  };
+
+  // Handle when filter values are updated. This is available for all nodes.
+  const handleAddFilters = event => {
+    const updatedFilters = selectedFilters;
+    if (event.dimension in updatedFilters) {
+      updatedFilters[event.dimension].operator = event.operator;
+      updatedFilters[event.dimension].values = event.values;
+    } else {
+      updatedFilters[event.dimension] = {
+        operator: event.operator,
+        values: event.values,
+      };
+    }
+    setSelectedFilters(updatedFilters);
+    const updatedDimensions = selection.dimensions.concat([event.dimension]);
+    setSelection({
+      filters: Object.entries(updatedFilters).map(obj =>
+        obj[1].values
+          ? `${obj[0]} IN (${obj[1].values
+              .map(val =>
+                ['int', 'bigint', 'float', 'double', 'long'].includes(
+                  lookup[obj[0]].type,
+                )
+                  ? val.value
+                  : "'" + val.value + "'",
+              )
+              .join(', ')})`
+          : '',
+      ),
+      dimensions: updatedDimensions,
+    });
+  };
+
+  // Handle when one or more dimensions are selected from the dropdown
+  // Note that this is only available to metrics
+  const handleAddDimensions = event => {
+    const updatedDimensions = event.map(
+      selectedDimension => selectedDimension.value,
+    );
+    setSelection({
+      filters: selection.filters,
+      dimensions: updatedDimensions,
+    });
+  };
+
+  const filters = dimensions.map(grouping => {
+    const dimensionsInGroup = grouping[1];
+    const dimensionGroupOptions = dimensionsInGroup
+      .filter(dim => dim.is_primary_key === true)
+      .map(dim => {
+        return {
+          value: dim.name,
+          label: labelize(dim.name.split('.').slice(-1)[0]),
+          metadata: dim,
+        };
+      });
+    return (
+      <>
+        <div className="dimensionsList">
+          {dimensionGroupOptions.map(dimension => {
+            return (
+              <DimensionFilter
+                dimension={dimension}
+                onChange={handleAddFilters}
+              />
+            );
+          })}
+        </div>
+      </>
+    );
+  });
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {function Render({ isSubmitting, status, setFieldValue }) {
+        return (
+          <Form>
+            <div className={'queryrunner'}>
+              <div className="queryrunner-filters left">
+                {node?.type === 'metric' ? (
+                  <>
+                    <span>
+                      <label>Group By</label>
+                    </span>
+                    <Select
+                      name="dimensions"
+                      options={dimensionsList}
+                      isMulti
+                      isClearable
+                      onChange={handleAddDimensions}
+                    />
+                    <br />
+                  </>
+                ) : null}
+                <span>
+                  <label>Add Filters</label>
+                </span>
+                {filters}
+              </div>
+              <div className={'righttop'}>
+                <label>Generated Query</label>
+                <div
+                  style={{
+                    height: '200px',
+                    width: '80%',
+                    overflow: 'scroll',
+                    borderRadius: '0',
+                    border: '1px solid #ccc',
+                  }}
+                  className="queryrunner-query"
+                >
+                  <SyntaxHighlighter
+                    language="sql"
+                    style={foundation}
+                    wrapLines={true}
+                  >
+                    {query}
+                  </SyntaxHighlighter>
+                </div>
+                <button
+                  type="submit"
+                  disabled={
+                    running ||
+                    (queryInfo !== null &&
+                      queryInfo?.state !== 'FINISHED' &&
+                      queryInfo?.state !== 'CANCELED' &&
+                      queryInfo?.state !== 'FAILED')
+                  }
+                  className="button-3 execute-button"
+                  style={{ marginTop: '1rem' }}
+                >
+                  {running ||
+                  (queryInfo !== null &&
+                    queryInfo?.state !== 'FINISHED' &&
+                    queryInfo?.state !== 'CANCELED' &&
+                    queryInfo?.state !== 'FAILED') ? (
+                    <LoadingIcon />
+                  ) : (
+                    '► Run'
+                  )}
+                </button>
+              </div>
+              <div
+                style={{
+                  width: window.innerWidth * 0.8,
+                  marginTop: '1rem',
+                  marginLeft: '0.5rem',
+                  height: 'calc(70% - 5.5px)',
+                }}
+                className={'rightbottom'}
+              >
+                <div
+                  className={'align-items-center row'}
+                  style={{
+                    borderBottom: '1px solid #dddddd',
+                    width: '86%',
+                  }}
+                >
+                  <div
+                    className={
+                      'tab-item' +
+                      (state.selectedTab === 'results' ? ' active' : '')
+                    }
+                    onClick={_ => switchTab('results')}
+                  >
+                    Results
+                  </div>
+                  <div
+                    className={
+                      'tab-item' +
+                      (state.selectedTab === 'info' ? ' active' : '')
+                    }
+                    aria-label={'QueryInfo'}
+                    role={'button'}
+                    onClick={_ => switchTab('info')}
+                  >
+                    Info
+                  </div>
+                </div>
+                {state.selectedTab === 'info' ? (
+                  <div>
+                    {queryInfo && queryInfo.id ? (
+                      <QueryInfo {...queryInfo} isList={true} />
+                    ) : (
+                      <></>
+                    )}
+                  </div>
+                ) : null}
+                {state.selectedTab === 'results' ? (
+                  <div>
+                    {queryInfo !== null && queryInfo.state !== 'FINISHED' ? (
+                      <div style={{ padding: '2rem' }}>
+                        The query has status {queryInfo.state}! Check the INFO
+                        tab for more details.
+                      </div>
+                    ) : queryInfo !== null &&
+                      queryInfo.results !== null &&
+                      queryInfo.results.length === 0 ? (
+                      <div style={{ padding: '2rem' }}>
+                        The query finished but output no results.
+                      </div>
+                    ) : queryInfo !== null &&
+                      queryInfo.results !== null &&
+                      queryInfo.results.length > 0 ? (
+                      <div
+                        className="table-responsive"
+                        style={{
+                          gridGap: '0',
+                          width: '86%',
+                          padding: '0',
+                          maxHeight: '50%',
+                        }}
+                      >
+                        <table
+                          style={{ marginTop: '0 !important' }}
+                          className="table"
+                        >
+                          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+                            <tr>
+                              {queryInfo.results[0]?.columns.map(columnName => (
+                                <th key={columnName.name}>
+                                  {columnName.column}
+                                </th>
+                              ))}
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {queryInfo.results[0]?.rows
+                              .slice(0, 100)
+                              .map((rowData, index) => (
+                                <tr key={`data-row:${index}`}>
+                                  {rowData.map(rowValue => (
+                                    <td key={rowValue}>{rowValue}</td>
+                                  ))}
+                                </tr>
+                              ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    ) : (
+                      <div style={{ padding: '2rem' }}>
+                        Click "Run" to execute the query.
+                      </div>
+                    )}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+}

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DJClientContext from '../../../providers/djclient';
+import DimensionFilter from '../DimensionFilter';
+
+// Mock DJClientContext
+const mockDJClient = {
+  DataJunctionAPI: {
+    node: jest.fn(),
+    nodeData: jest.fn(),
+  },
+};
+
+const mockDimension = {
+  label: 'Dimension Label [Test]',
+  value: 'dimension_value',
+  metadata: {
+    node_name: 'test_node',
+    node_display_name: 'Test Node',
+  },
+};
+
+const getByTextStartsWith = (container, text) => {
+  return Array.from(container.querySelectorAll('*')).find(element => {
+    return element.textContent.trim().startsWith(text);
+  });
+};
+
+describe('DimensionFilter', () => {
+  it('fetches dimension data and renders correctly', async () => {
+    // Mock node response
+    const mockNodeResponse = {
+      type: 'dimension',
+      name: 'test_node',
+      columns: [
+        {
+          name: 'id',
+          attributes: [{ attribute_type: { name: 'primary_key' } }],
+        },
+        { name: 'name', attributes: [{ attribute_type: { name: 'label' } }] },
+      ],
+    };
+    mockDJClient.DataJunctionAPI.node.mockResolvedValue(mockNodeResponse);
+
+    // Mock node data response
+    const mockNodeDataResponse = {
+      results: [
+        {
+          columns: [{ semantic_entity: 'id' }, { semantic_entity: 'name' }],
+          rows: [
+            [1, 'Value 1'],
+            [2, 'Value 2'],
+          ],
+        },
+      ],
+    };
+    mockDJClient.DataJunctionAPI.nodeData.mockResolvedValue(
+      mockNodeDataResponse,
+    );
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDJClient}>
+        <DimensionFilter dimension={mockDimension} onChange={jest.fn()} />
+      </DJClientContext.Provider>,
+    );
+
+    // Check if the dimension label and node display name are rendered
+    expect(
+      getByTextStartsWith(container, 'Dimension Label'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Test Node')).toBeInTheDocument();
+  });
+});