datajunction-ui 0.0.1-rc.10 → 0.0.1-rc.11

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

@@ -1,34 +1,28 @@
 import { Component } from 'react';
+import ValidIcon from '../../icons/ValidIcon';
+import InvalidIcon from '../../icons/InvalidIcon';
 
 export default class NodeStatus extends Component {
   render() {
     const { node } = this.props;
     return (
-      <span className="status__valid status" style={{ alignContent: 'center' }}>
+      <>
         {node?.status === 'valid' ? (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="25"
-            height="25"
-            fill="currentColor"
-            className="bi bi-check-circle-fill"
-            viewBox="0 0 16 16"
+          <span
+            className="status__valid status"
+            style={{ alignContent: 'center' }}
           >
-            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
-          </svg>
+            <ValidIcon />
+          </span>
         ) : (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            className="bi bi-x-circle-fill"
-            viewBox="0 0 16 16"
+          <span
+            className="status__invalid status"
+            style={{ alignContent: 'center' }}
           >
-            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
-          </svg>
+            <InvalidIcon />
+          </span>
         )}
-      </span>
+      </>
     );
   }
 }

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

@@ -6,7 +6,11 @@ import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeInfoTab from './NodeInfoTab';
 import NodeColumnTab from './NodeColumnTab';
 import NodeLineage from './NodeGraphTab';
+import NodeHistory from './NodeHistory';
 import DJClientContext from '../../providers/djclient';
+import NodeSQLTab from './NodeSQLTab';
+import NodeMaterializationTab from './NodeMaterializationTab';
+import ClientCodePopover from './ClientCodePopover';
 
 export function NodePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -37,7 +41,18 @@ export function NodePage() {
   useEffect(() => {
     const fetchData = async () => {
       const data = await djClient.node(name);
+      data.createNodeClientCode = await djClient.clientCode(name);
       setNode(data);
+      if (data.type === 'metric') {
+        const metric = await djClient.metric(name);
+        data.dimensions = metric.dimensions;
+        setNode(data);
+      }
+      if (data.type === 'cube') {
+        const cube = await djClient.cube(name);
+        data.cube_elements = cube.cube_elements;
+        setNode(data);
+      }
     };
     fetchData().catch(console.error);
   }, [djClient, name]);
@@ -55,6 +70,18 @@ export function NodePage() {
       id: 2,
       name: 'Graph',
     },
+    {
+      id: 3,
+      name: 'History',
+    },
+    {
+      id: 4,
+      name: 'SQL',
+    },
+    {
+      id: 5,
+      name: 'Materializations',
+    },
   ];
   //
   //
@@ -64,11 +91,21 @@ export function NodePage() {
       tabToDisplay = node ? <NodeInfoTab node={node} /> : '';
       break;
     case 1:
-      tabToDisplay = <NodeColumnTab node={node} />;
+      tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
       break;
     case 2:
       tabToDisplay = <NodeLineage djNode={node} djClient={djClient} />;
       break;
+    case 3:
+      tabToDisplay = <NodeHistory node={node} djClient={djClient} />;
+      break;
+    case 4:
+      tabToDisplay =
+        node.type === 'metric' ? <NodeSQLTab djNode={node} /> : <br />;
+      break;
+    case 5:
+      tabToDisplay = <NodeMaterializationTab node={node} djClient={djClient} />;
+      break;
     default:
       tabToDisplay = <NodeInfoTab node={node} />;
   }
@@ -79,17 +116,15 @@ export function NodePage() {
       <NamespaceHeader namespace={name.split('.').slice(0, -1).join('.')} />
       <div className="card">
         <div className="card-header">
-          <h3 className="card-title align-items-start flex-column">
+          <h3
+            className="card-title align-items-start flex-column"
+            style={{ display: 'inline-block' }}
+          >
             <span className="card-label fw-bold text-gray-800">
               {node?.display_name}
             </span>
           </h3>
-          <span
-            className="fs-6 fw-semibold text-gray-400"
-            style={{ marginTop: '-4rem' }}
-          >
-            Updated {new Date(node?.updated_at).toDateString()}
-          </span>
+          <ClientCodePopover code={node?.createNodeClientCode} />
           <div className="align-items-center row">
             {TabsJson.map(buildTabs)}
           </div>

package/src/app/pages/Root/index.tsx

@@ -27,6 +27,11 @@ export function Root() {
                   <a href="/">Explore</a>
                 </span>
               </span>
+              <span className="menu-link">
+                <span className="menu-title">
+                  <a href="/sql">SQL</a>
+                </span>
+              </span>
               <span className="menu-link">
                 <span className="menu-title">
                   <a href="/">Help</a>

package/src/app/pages/SQLBuilderPage/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 SQLBuilderPage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.SQLBuilderPage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};

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

@@ -0,0 +1,344 @@
+import { useContext, useEffect, useState } from 'react';
+import NamespaceHeader from '../../components/NamespaceHeader';
+import { DataJunctionAPI } from '../../services/DJService';
+import DJClientContext from '../../providers/djclient';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import { format } from 'sql-formatter';
+import Select from 'react-select';
+import QueryInfo from '../../components/QueryInfo';
+
+export function SQLBuilderPage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [stagedMetrics, setStagedMetrics] = useState([]);
+  const [metrics, setMetrics] = useState([]);
+  const [commonDimensionsList, setCommonDimensionsList] = useState([]);
+  const [selectedDimensions, setSelectedDimensions] = useState([]);
+  const [stagedDimensions, setStagedDimensions] = useState([]);
+  const [selectedMetrics, setSelectedMetrics] = useState([]);
+  const [query, setQuery] = useState('');
+  const [submittedQueryInfo, setSubmittedQueryInfo] = useState(null);
+  const [data, setData] = useState(null);
+  const [loadingData, setLoadingData] = useState(false);
+  const [viewData, setViewData] = useState(false);
+  const [showHelp, setShowHelp] = useState(true);
+  const [showNumRows, setShowNumRows] = useState(100);
+  const [displayedRows, setDisplayedRows] = useState(<></>);
+  const numRowsOptions = [
+    {
+      value: 10,
+      label: '10 Rows',
+      isFixed: true,
+    },
+    {
+      value: 100,
+      label: '100 Rows',
+      isFixed: true,
+    },
+    {
+      value: 1000,
+      label: '1,000 Rows',
+      isFixed: true,
+    },
+  ];
+  const toggleViewData = () => setViewData(current => !current);
+
+  // Get data for the current selection of metrics and dimensions
+  const getData = () => {
+    setLoadingData(true);
+    const fetchData = async () => {
+      setData(null);
+      const queryInfo = await djClient.data(
+        selectedMetrics,
+        selectedDimensions,
+      );
+      setLoadingData(false);
+      setSubmittedQueryInfo(queryInfo);
+      queryInfo.numRows = 0;
+      if (queryInfo.results && queryInfo.results?.length) {
+        setData(queryInfo.results);
+        queryInfo.numRows = queryInfo.results[0].rows.length;
+        setViewData(true);
+        setShowNumRows(100);
+      }
+    };
+    fetchData().catch(console.error);
+  };
+
+  const resetView = () => {
+    setQuery('');
+    setData(null);
+    setViewData(false);
+  };
+  const handleMetricSelect = event => {
+    const metrics = event.map(m => m.value);
+    resetView();
+    setStagedMetrics(metrics);
+  };
+
+  const handleMetricSelectorClose = () => {
+    setSelectedMetrics(stagedMetrics);
+  };
+
+  const handleDimensionSelect = event => {
+    const dimensions = event.map(d => d.value);
+    resetView();
+    setStagedDimensions(dimensions);
+  };
+
+  const handleDimensionSelectorClose = () => {
+    setSelectedDimensions(stagedDimensions);
+  };
+
+  // Get metrics
+  useEffect(() => {
+    const fetchData = async () => {
+      const metrics = await djClient.metrics();
+      setMetrics(metrics.map(m => ({ value: m, label: m })));
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.metrics]);
+
+  // Get common dimensions
+  useEffect(() => {
+    const fetchData = async () => {
+      if (selectedMetrics.length) {
+        const commonDimensions = await djClient.commonDimensions(
+          selectedMetrics,
+        );
+        setCommonDimensionsList(
+          commonDimensions.map(d => ({
+            value: d.name,
+            label: d.name,
+            path: d.path.join(' ▶ '),
+          })),
+        );
+      } else {
+        setCommonDimensionsList([]);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [selectedMetrics, djClient]);
+
+  // Get SQL
+  useEffect(() => {
+    const fetchData = async () => {
+      if (selectedMetrics.length && selectedDimensions.length) {
+        const query = await djClient.sqls(selectedMetrics, selectedDimensions);
+        setShowHelp(false);
+        setQuery(query);
+      } else {
+        resetView();
+        setShowHelp(true);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [selectedMetrics, selectedDimensions, djClient]);
+
+  // Set number of rows to display
+  useEffect(() => {
+    if (data) {
+      setDisplayedRows(
+        data[0].rows.slice(0, showNumRows).map((rowData, index) => (
+          <tr key={`data-row:${index}`}>
+            {rowData.map(rowValue => (
+              <td key={rowValue}>{rowValue}</td>
+            ))}
+          </tr>
+        )),
+      );
+    }
+  }, [showNumRows, data]);
+  const formatOptionLabel = ({ value, label, path }) => (
+    <div className={`badge dimension_option`}>
+      <div>{label}</div>
+      <span className={`badge dimension_option_subheading`}>{path}</span>
+    </div>
+  );
+
+  // @ts-ignore
+  return (
+    <>
+      <div className="mid">
+        <NamespaceHeader namespace="" />
+        <div className="card">
+          <div className="card-header">
+            <h4>Metrics</h4>
+            <Select
+              name="metrics"
+              options={metrics}
+              noOptionsMessage={() => 'No metrics found.'}
+              placeholder={`${metrics.length} Available Metrics`}
+              isMulti
+              isClearable
+              closeMenuOnSelect={false}
+              onChange={handleMetricSelect}
+              onMenuClose={handleMetricSelectorClose}
+            />
+            <h4>Group By</h4>
+            <Select
+              name="dimensions"
+              formatOptionLabel={formatOptionLabel}
+              options={commonDimensionsList}
+              noOptionsMessage={() =>
+                'No shared dimensions found. Try selecting different metrics.'
+              }
+              placeholder={`${commonDimensionsList.length} Shared Dimensions`}
+              isMulti
+              isClearable
+              closeMenuOnSelect={false}
+              onChange={handleDimensionSelect}
+              onMenuClose={handleDimensionSelectorClose}
+            />
+            <h4>Filter By</h4>
+            <Select
+              name="filters"
+              className="filters"
+              formatOptionLabel={formatOptionLabel}
+              options={commonDimensionsList}
+              noOptionsMessage={() =>
+                'No shared dimensions found. Try selecting different metrics.'
+              }
+              placeholder={`${commonDimensionsList.length} Shared Dimensions`}
+              isClearable
+              closeMenuOnSelect={true}
+              // onChange={handleDimensionSelect}
+              // onMenuClose={handleDimensionSelectorClose}
+            />
+            <Select
+              name="filters"
+              className="filters-operator"
+              // formatOptionLabel={formatOptionLabel}
+              options={[{value: '=', label: '='}, {value: '>', label: '>'}, {value: '>', label: '>'}]}
+              placeholder={`Operator`}
+              closeMenuOnSelect={true}
+              // onChange={handleDimensionSelect}
+              // onMenuClose={handleDimensionSelectorClose}
+            />
+            <input value={`Value`}></input>
+          </div>
+          <div className="card-header">
+            {showHelp ? (
+              <div className="card-light-shadow">
+                <h6>Using the SQL Builder</h6>
+                <p>
+                  The sql builder allows you to group multiple metrics along
+                  with their shared dimensions. Using your selections,
+                  DataJunction will generate the corresponding SQL.
+                </p>
+                <ol>
+                  <li>
+                    <b>Select Metrics:</b> Start by selecting one or more
+                    metrics from the metrics dropdown.
+                  </li>
+                  <li>
+                    <b>Select Dimensions:</b> Next, select the dimension
+                    attributes you would like to include. As you select
+                    additional metrics, 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.
+                  </li>
+                  <li>
+                    <b>View the generated SQL Query:</b> As you make your
+                    selections, the SQL required to retrieve the set of metrics
+                    and dimensions will be generated below.
+                  </li>
+                  <li>
+                    <b>Run the Query:</b> If query running is enabled by your
+                    server, you can also run the generated SQL query to view a
+                    sample of 100 records.
+                  </li>
+                </ol>
+              </div>
+            ) : (
+              <></>
+            )}
+            {query ? (
+              <>
+                {loadingData ? (
+                  <span className="button-3 executing-button">
+                    {'Running Query'}
+                  </span>
+                ) : (
+                  <span className="button-3 execute-button" onClick={getData}>
+                    {'Run Query'}
+                  </span>
+                )}
+                {data ? (
+                  viewData ? (
+                    <>
+                      <span
+                        className="button-3 neutral-button"
+                        onClick={toggleViewData}
+                      >
+                        {'View Query'}
+                      </span>
+                      <span style={{ display: 'inline-block' }}>
+                        <Select
+                          name="num-rows"
+                          defaultValue={numRowsOptions[1]}
+                          options={numRowsOptions}
+                          onChange={e => setShowNumRows(e.value)}
+                        />
+                      </span>
+                    </>
+                  ) : (
+                    <span
+                      className="button-3 neutral-button"
+                      onClick={toggleViewData}
+                    >
+                      {'View Data'}
+                    </span>
+                  )
+                ) : (
+                  <></>
+                )}
+              </>
+            ) : (
+              <></>
+            )}
+            {submittedQueryInfo ? <QueryInfo {...submittedQueryInfo} /> : <></>}
+            <div>
+              {/*{query.dialect}*/}
+              {query && !viewData ? (
+                <SyntaxHighlighter language="sql" style={foundation}>
+                  {format(query.sql, {
+                    language: 'spark',
+                    tabWidth: 2,
+                    keywordCase: 'upper',
+                    denseOperators: true,
+                    logicalOperatorNewline: 'before',
+                    expressionWidth: 10,
+                  })}
+                </SyntaxHighlighter>
+              ) : (
+                ''
+              )}
+            </div>
+            {data && viewData ? (
+              <div className="table-responsive">
+                <table className="card-inner-table table">
+                  <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+                    <tr>
+                      {data[0].columns.map(columnName => (
+                        <th key={columnName.name}>{columnName.name}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>{displayedRows}</tbody>
+                </table>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+SQLBuilderPage.defaultProps = {
+  djClient: DataJunctionAPI,
+};

package/src/app/services/DJService.js

@@ -1,10 +1,17 @@
 import { MarkerType } from 'reactflow';
 
-const DJ_URL = 'http://localhost:8000'; //process.env.REACT_APP_DJ_URL;
+const DJ_URL = process.env.REACT_APP_DJ_URL
+  ? process.env.REACT_APP_DJ_URL
+  : 'http://localhost:8000';
 
 export const DataJunctionAPI = {
   node: async function (name) {
     const data = await (await fetch(DJ_URL + '/nodes/' + name + '/')).json();
+    data.primary_key = data.columns
+      .filter(col =>
+        col.attributes.some(attr => attr.attribute_type.name === 'primary_key'),
+      )
+      .map(col => col.name);
     return data;
   },
 
@@ -22,11 +29,64 @@ export const DataJunctionAPI = {
     return data;
   },
 
+  node_dag: async function (name) {
+    const data = await (
+      await fetch(DJ_URL + '/nodes/' + name + '/dag/')
+    ).json();
+    return data;
+  },
+
   metric: async function (name) {
     const data = await (await fetch(DJ_URL + '/metrics/' + name + '/')).json();
     return data;
   },
 
+  clientCode: async function (name) {
+    const data = await (
+      await fetch(DJ_URL + '/client/python/new_node/' + name)
+    ).json();
+    return data;
+  },
+
+  cube: async function (name) {
+    const data = await (await fetch(DJ_URL + '/cubes/' + name + '/')).json();
+    return data;
+  },
+
+  metrics: async function (name) {
+    const data = await (await fetch(DJ_URL + '/metrics/')).json();
+    return data;
+  },
+
+  commonDimensions: async function (metrics) {
+    const metricsQuery = '?' + metrics.map(m => `metric=${m}`).join('&');
+    const data = await (
+      await fetch(DJ_URL + '/metrics/common/dimensions/' + metricsQuery)
+    ).json();
+    return data;
+  },
+
+  history: async function (type, name, offset, limit) {
+    const data = await (
+      await fetch(
+        DJ_URL +
+          '/history/' +
+          type +
+          '/' +
+          name +
+          `/?offset=${offset ? offset : 0}&limit=${limit ? limit : 100}`,
+      )
+    ).json();
+    return data;
+  },
+
+  revisions: async function (name) {
+    const data = await (
+      await fetch(DJ_URL + '/nodes/' + name + '/revisions/')
+    ).json();
+    return data;
+  },
+
   namespace: async function (nmspce) {
     const data = await (
       await fetch(DJ_URL + '/namespaces/' + nmspce + '/')
@@ -39,8 +99,72 @@ export const DataJunctionAPI = {
     return data;
   },
 
+  sql: async function (metric_name, selection) {
+    const data = await (
+      await fetch(
+        DJ_URL + '/sql/' + metric_name + '?' + new URLSearchParams(selection),
+      )
+    ).json();
+    return data;
+  },
+
+  materializations: async function (node) {
+    const data = await (
+      await fetch(DJ_URL + `/nodes/${node}/materializations/`)
+    ).json();
+
+    return await Promise.all(
+      data.map(async materialization => {
+        materialization.clientCode = await (
+          await fetch(
+            DJ_URL +
+              `/client/python/add_materialization/${node}/${materialization.name}`,
+          )
+        ).json();
+        return materialization;
+      }),
+    );
+  },
+
+  columns: async function (node) {
+    return await Promise.all(
+      node.columns.map(async col => {
+        col.clientCode = await (
+          await fetch(
+            DJ_URL +
+              `/client/python/link_dimension/${node.name}/${col.name}/${col.dimension?.name}`,
+          )
+        ).json();
+        return col;
+      }),
+    );
+  },
+
+  sqls: async function (metricSelection, dimensionSelection) {
+    const params = new URLSearchParams();
+    metricSelection.map(metric => params.append('metrics', metric));
+    dimensionSelection.map(dimension => params.append('dimensions', dimension));
+    const data = await (await fetch(DJ_URL + '/sql/?' + params)).json();
+    return data;
+  },
+
+  data: async function (metricSelection, dimensionSelection) {
+    const params = new URLSearchParams();
+    metricSelection.map(metric => params.append('metrics', metric));
+    dimensionSelection.map(dimension => params.append('dimensions', dimension));
+    const data = await (
+      await fetch(DJ_URL + '/data/?' + params + '&limit=100&async_=true')
+    ).json();
+    return data;
+  },
+
   lineage: async function (node) {},
 
+  compiledSql: async function (node) {
+    const data = await (await fetch(DJ_URL + `/sql/${node}/`)).json();
+    return data;
+  },
+
   dag: async function (namespace = 'default') {
     const edges = [];
     const data = await (await fetch(DJ_URL + '/nodes/')).json();