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

package/.env

@@ -1 +1,2 @@
 REACT_APP_DJ_URL=http://localhost:8000
+REACT_USE_SSE=true

package/package.json

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

package/src/app/__tests__/__snapshots__/index.test.tsx.snap

@@ -35,9 +35,11 @@ exports[`<App /> should render and match the snapshot 1`] = `
           "namespaces": [Function],
           "node": [Function],
           "node_dag": [Function],
+          "nodesWithDimension": [Function],
           "revisions": [Function],
           "sql": [Function],
           "sqls": [Function],
+          "stream": [Function],
           "upstreams": [Function],
         },
       }

package/src/app/components/QueryInfo.jsx

@@ -10,38 +10,6 @@ export default function QueryInfo({
   started,
   numRows,
 }) {
-  const stateIcon =
-    state === 'FINISHED' ? (
-      <span className="status__valid status" style={{ alignContent: 'center' }}>
-        <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"
-        >
-          <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>
-      </span>
-    ) : (
-      <span
-        className="status__invalid status"
-        style={{ alignContent: 'center' }}
-      >
-        <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"
-        >
-          <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>
-      </span>
-    );
-
   return (
     <div className="table-responsive">
       <table className="card-inner-table table">
@@ -70,11 +38,11 @@ export default function QueryInfo({
                 {engine_version}
               </span>
             </td>
-            <td>{stateIcon}</td>
+            <td>{state}</td>
             <td>{scheduled}</td>
             <td>{started}</td>
             <td>
-              {errors.length ? (
+              {errors?.length ? (
                 errors.map(e => (
                   <p>
                     <span className="rounded-pill badge bg-secondary-error">

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

@@ -20,7 +20,7 @@ export function NamespacePage() {
     const hierarchy = [];
 
     for (const item of namespaceList) {
-      const namespaces = item.namespace.split('.');
+      const namespaces = item.split('.');
       let currentLevel = hierarchy;
 
       let path = '';

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

@@ -13,6 +13,107 @@ export default function NodeHistory({ node, djClient }) {
     };
     fetchData().catch(console.error);
   }, [djClient, node]);
+
+  const eventData = event => {
+    console.log('event', event);
+    if (
+      event.activity_type === 'set_attribute' &&
+      event.entity_type === 'column_attribute'
+    ) {
+      return event.details.attributes
+        .map(attr => (
+          <div>
+            Set{' '}
+            <span className={`badge partition_value`}>{attr.column_name}</span>{' '}
+            as{' '}
+            <span className={`badge partition_value_highlight`}>
+              {attr.attribute_type_name}
+            </span>
+          </div>
+        ))
+        .reduce((prev, curr) => [prev, <br />, curr]);
+    }
+    if (event.activity_type === 'create' && event.entity_type === 'link') {
+      return (
+        <div>
+          Linked{' '}
+          <span className={`badge partition_value`}>
+            {event.details.column}
+          </span>{' '}
+          to
+          <span className={`badge partition_value_highlight`}>
+            {event.details.dimension}
+          </span>{' '}
+          via
+          <span className={`badge partition_value`}>
+            {event.details.dimension_column}
+          </span>
+        </div>
+      );
+    }
+    if (
+      event.activity_type === 'create' &&
+      event.entity_type === 'materialization'
+    ) {
+      return (
+        <div>
+          Initialized materialization{' '}
+          <span className={`badge partition_value`}>
+            {event.details.materialization}
+          </span>
+        </div>
+      );
+    }
+    if (
+      event.activity_type === 'create' &&
+      event.entity_type === 'availability'
+    ) {
+      return (
+        <div>
+          Materialized at{' '}
+          <span className={`badge partition_value_highlight`}>
+            {event.post.catalog}.{event.post.schema_}.{event.post.table}
+          </span>
+          from{' '}
+          <span className={`badge partition_value`}>
+            {event.post.min_temporal_partition}
+          </span>{' '}
+          to
+          <span className={`badge partition_value`}>
+            {event.post.max_temporal_partition}
+          </span>
+        </div>
+      );
+    }
+    if (
+      event.activity_type === 'status_change' &&
+      event.entity_type === 'node'
+    ) {
+      const expr = (
+        <div>
+          Caused by a change in upstream{' '}
+          <a href={`/nodes/${event.details['upstream_node']}`}>
+            {event.details['upstream_node']}
+          </a>
+        </div>
+      );
+      return (
+        <div>
+          Status changed from{' '}
+          <span className={`status__${event.pre['status']}`}>
+            {event.pre['status']}
+          </span>{' '}
+          to{' '}
+          <span className={`status__${event.post['status']}`}>
+            {event.post['status']}
+          </span>{' '}
+          {event.details['upstream_node'] !== undefined ? expr : ''}
+        </div>
+      );
+    }
+    return '';
+  };
+
   const tableData = history => {
     return history.map(event => (
       <tr>
@@ -24,9 +125,9 @@ export default function NodeHistory({ node, djClient }) {
           </span>
         </td>
         <td>{event.entity_type}</td>
-        <td>{event.entity_name}</td>
         <td>{event.user ? event.user : 'unknown'}</td>
         <td>{event.created_at}</td>
+        <td>{eventData(event)}</td>
       </tr>
     ));
   };
@@ -45,7 +146,7 @@ export default function NodeHistory({ node, djClient }) {
     ));
   };
   return (
-    <div className="table-responsive">
+    <div className="table-vertical">
       <table className="card-inner-table table">
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
           <th className="text-start">Version</th>
@@ -60,9 +161,9 @@ export default function NodeHistory({ node, djClient }) {
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
           <th className="text-start">Activity</th>
           <th>Type</th>
-          <th>Name</th>
           <th>User</th>
           <th>Timestamp</th>
+          <th>Details</th>
         </thead>
         {tableData(history)}
       </table>

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

@@ -2,7 +2,6 @@ import { useState, useContext, useEffect } from 'react';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
-import { format } from 'sql-formatter';
 import NodeStatus from './NodeStatus';
 import ListGroupItem from '../../components/ListGroupItem';
 import ToggleSwitch from '../../components/ToggleSwitch';
@@ -50,23 +49,7 @@ export default function NodeInfoTab({ node }) {
             <></>
           )}
           <SyntaxHighlighter language="sql" style={foundation}>
-            {checked
-              ? format(compiledSQL, {
-                  language: 'spark',
-                  tabWidth: 2,
-                  keywordCase: 'upper',
-                  denseOperators: true,
-                  logicalOperatorNewline: 'before',
-                  expressionWidth: 10,
-                })
-              : format(node?.query, {
-                  language: 'spark',
-                  tabWidth: 2,
-                  keywordCase: 'upper',
-                  denseOperators: true,
-                  logicalOperatorNewline: 'before',
-                  expressionWidth: 10,
-                })}
+            {checked ? compiledSQL : node?.query}
           </SyntaxHighlighter>
         </div>
       </div>

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

@@ -82,14 +82,7 @@ const NodeSQLTab = djNode => {
         >
           <h6 className="mb-0 w-100">Query</h6>
           <SyntaxHighlighter language="sql" style={foundation}>
-            {format(query, {
-              language: 'spark',
-              tabWidth: 2,
-              keywordCase: 'upper',
-              denseOperators: true,
-              logicalOperatorNewline: 'before',
-              expressionWidth: 10,
-            })}
+            {query}
           </SyntaxHighlighter>
         </div>
       </div>

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

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+
+export default function NodesWithDimension({ node, djClient }) {
+  const [availableNodes, setAvailableNodes] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await djClient.nodesWithDimension(node.name);
+      setAvailableNodes(data);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+  return (
+    <div className="table-responsive">
+      <table className="card-inner-table table">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <th className="text-start">Name</th>
+          <th>Type</th>
+        </thead>
+        <tbody>
+          {availableNodes.map(node => (
+            <tr>
+              <td>
+                <a href={`/nodes/${node.name}`}>{node.display_name}</a>
+              </td>
+              <td>
+                <span
+                  className={'node_type__' + node.type + ' badge node_type'}
+                >
+                  {node.type}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -11,6 +11,7 @@ import DJClientContext from '../../providers/djclient';
 import NodeSQLTab from './NodeSQLTab';
 import NodeMaterializationTab from './NodeMaterializationTab';
 import ClientCodePopover from './ClientCodePopover';
+import NodesWithDimension from './NodesWithDimension';
 
 export function NodePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -25,7 +26,7 @@ export function NodePage() {
   };
 
   const buildTabs = tab => {
-    return (
+    return tab.display ? (
       <Tab
         key={tab.id}
         id={tab.id}
@@ -33,7 +34,7 @@ export function NodePage() {
         onClick={onClickTab(tab.id)}
         selectedTab={state.selectedTab}
       />
-    );
+    ) : null;
   };
 
   const { name } = useParams();
@@ -57,32 +58,46 @@ export function NodePage() {
     fetchData().catch(console.error);
   }, [djClient, name]);
 
-  const TabsJson = [
-    {
-      id: 0,
-      name: 'Info',
-    },
-    {
-      id: 1,
-      name: 'Columns',
-    },
-    {
-      id: 2,
-      name: 'Graph',
-    },
-    {
-      id: 3,
-      name: 'History',
-    },
-    {
-      id: 4,
-      name: 'SQL',
-    },
-    {
-      id: 5,
-      name: 'Materializations',
-    },
-  ];
+  const tabsList = node => {
+    return [
+      {
+        id: 0,
+        name: 'Info',
+        display: true,
+      },
+      {
+        id: 1,
+        name: 'Columns',
+        display: true,
+      },
+      {
+        id: 2,
+        name: 'Graph',
+        display: true,
+      },
+      {
+        id: 3,
+        name: 'History',
+        display: true,
+      },
+      {
+        id: 4,
+        name: 'SQL',
+        display: node?.type !== 'dimension' && node?.type !== 'source',
+      },
+      {
+        id: 5,
+        name: 'Materializations',
+        display: node?.type !== 'source',
+      },
+      {
+        id: 6,
+        name: 'Linked Nodes',
+        display: node?.type === 'dimension',
+      },
+    ];
+  };
+
   //
   //
   let tabToDisplay = null;
@@ -106,6 +121,9 @@ export function NodePage() {
     case 5:
       tabToDisplay = <NodeMaterializationTab node={node} djClient={djClient} />;
       break;
+    case 6:
+      tabToDisplay = <NodesWithDimension node={node} djClient={djClient} />;
+      break;
     default:
       tabToDisplay = <NodeInfoTab node={node} />;
   }
@@ -121,12 +139,15 @@ export function NodePage() {
             style={{ display: 'inline-block' }}
           >
             <span className="card-label fw-bold text-gray-800">
-              {node?.display_name}
+              {node?.display_name}{' '}
+              <span className={'node_type__' + node?.type + ' badge node_type'}>
+                {node?.type}
+              </span>
             </span>
           </h3>
           <ClientCodePopover code={node?.createNodeClientCode} />
           <div className="align-items-center row">
-            {TabsJson.map(buildTabs)}
+            {tabsList(node).map(buildTabs)}
           </div>
           {tabToDisplay}
         </div>

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

@@ -9,6 +9,7 @@ import Select from 'react-select';
 import QueryInfo from '../../components/QueryInfo';
 
 export function SQLBuilderPage() {
+  const DEFAULT_NUM_ROWS = 100;
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [stagedMetrics, setStagedMetrics] = useState([]);
   const [metrics, setMetrics] = useState([]);
@@ -17,12 +18,11 @@ export function SQLBuilderPage() {
   const [stagedDimensions, setStagedDimensions] = useState([]);
   const [selectedMetrics, setSelectedMetrics] = useState([]);
   const [query, setQuery] = useState('');
-  const [submittedQueryInfo, setSubmittedQueryInfo] = useState(null);
+  const [queryInfo, setQueryInfo] = useState({});
   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 [showNumRows, setShowNumRows] = useState(DEFAULT_NUM_ROWS);
   const [displayedRows, setDisplayedRows] = useState(<></>);
   const numRowsOptions = [
     {
@@ -46,20 +46,39 @@ export function SQLBuilderPage() {
   // Get data for the current selection of metrics and dimensions
   const getData = () => {
     setLoadingData(true);
+    setQueryInfo({});
     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);
+      if (process.env.REACT_USE_SSE) {
+        const sse = await djClient.stream(selectedMetrics, selectedDimensions);
+        sse.onmessage = e => {
+          const messageData = JSON.parse(JSON.parse(e.data));
+          setQueryInfo(messageData);
+          if (messageData.results) {
+            setLoadingData(false);
+            setData(messageData.results);
+            messageData.numRows = messageData.results?.length
+              ? messageData.results[0].rows.length
+              : [];
+            setViewData(true);
+            setShowNumRows(DEFAULT_NUM_ROWS);
+          }
+        };
+        sse.onerror = () => sse.close();
+      } else {
+        const response = await djClient.data(
+          selectedMetrics,
+          selectedDimensions,
+        );
+        setQueryInfo(response);
+        if (response.results) {
+          setLoadingData(false);
+          setData(response.results);
+          response.numRows = response.results?.length
+            ? response.results[0].rows.length
+            : [];
+          setViewData(true);
+          setShowNumRows(DEFAULT_NUM_ROWS);
+        }
       }
     };
     fetchData().catch(console.error);
@@ -69,25 +88,7 @@ export function SQLBuilderPage() {
     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);
+    setQueryInfo({});
   };
 
   // Get metrics
@@ -125,11 +126,9 @@ export function SQLBuilderPage() {
     const fetchData = async () => {
       if (selectedMetrics.length && selectedDimensions.length) {
         const query = await djClient.sqls(selectedMetrics, selectedDimensions);
-        setShowHelp(false);
-        setQuery(query);
+        setQuery(query.sql);
       } else {
         resetView();
-        setShowHelp(true);
       }
     };
     fetchData().catch(console.error);
@@ -139,7 +138,7 @@ export function SQLBuilderPage() {
   useEffect(() => {
     if (data) {
       setDisplayedRows(
-        data[0].rows.slice(0, showNumRows).map((rowData, index) => (
+        data[0]?.rows.slice(0, showNumRows).map((rowData, index) => (
           <tr key={`data-row:${index}`}>
             {rowData.map(rowValue => (
               <td key={rowValue}>{rowValue}</td>
@@ -167,13 +166,26 @@ export function SQLBuilderPage() {
             <Select
               name="metrics"
               options={metrics}
+              isDisabled={
+                selectedMetrics.length && selectedDimensions.length
+                  ? true
+                  : false
+              }
               noOptionsMessage={() => 'No metrics found.'}
               placeholder={`${metrics.length} Available Metrics`}
               isMulti
               isClearable
               closeMenuOnSelect={false}
-              onChange={handleMetricSelect}
-              onMenuClose={handleMetricSelectorClose}
+              onChange={e => {
+                setSelectedDimensions([]);
+                resetView();
+                setStagedMetrics(e.map(m => m.value));
+              }}
+              onMenuClose={() => {
+                resetView();
+                setSelectedDimensions([]);
+                setSelectedMetrics(stagedMetrics);
+              }}
             />
             <h4>Group By</h4>
             <Select
@@ -187,38 +199,17 @@ export function SQLBuilderPage() {
               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}
+              onChange={e => {
+                resetView();
+                setStagedDimensions(e.map(d => d.value));
+              }}
+              onMenuClose={() => {
+                setSelectedDimensions(stagedDimensions);
+              }}
             />
-            <input value={`Value`}></input>
           </div>
           <div className="card-header">
-            {showHelp ? (
+            {!viewData && !query ? (
               <div className="card-light-shadow">
                 <h6>Using the SQL Builder</h6>
                 <p>
@@ -277,7 +268,7 @@ export function SQLBuilderPage() {
                       <span style={{ display: 'inline-block' }}>
                         <Select
                           name="num-rows"
-                          defaultValue={numRowsOptions[1]}
+                          defaultValue={numRowsOptions[0]}
                           options={numRowsOptions}
                           onChange={e => setShowNumRows(e.value)}
                         />
@@ -298,19 +289,11 @@ export function SQLBuilderPage() {
             ) : (
               <></>
             )}
-            {submittedQueryInfo ? <QueryInfo {...submittedQueryInfo} /> : <></>}
+            {queryInfo && queryInfo.id ? <QueryInfo {...queryInfo} /> : <></>}
             <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,
-                  })}
+                  {query}
                 </SyntaxHighlighter>
               ) : (
                 ''
@@ -321,7 +304,7 @@ export function SQLBuilderPage() {
                 <table className="card-inner-table table">
                   <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
                     <tr>
-                      {data[0].columns.map(columnName => (
+                      {data[0]?.columns.map(columnName => (
                         <th key={columnName.name}>{columnName.name}</th>
                       ))}
                     </tr>

package/src/app/services/DJService.js

@@ -43,7 +43,7 @@ export const DataJunctionAPI = {
 
   clientCode: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/client/python/new_node/' + name)
+      await fetch(DJ_URL + '/datajunction-clients/python/new_node/' + name)
     ).json();
     return data;
   },
@@ -70,11 +70,9 @@ export const DataJunctionAPI = {
     const data = await (
       await fetch(
         DJ_URL +
-          '/history/' +
-          type +
-          '/' +
+          '/history?node=' +
           name +
-          `/?offset=${offset ? offset : 0}&limit=${limit ? limit : 100}`,
+          `&offset=${offset ? offset : 0}&limit=${limit ? limit : 100}`,
       )
     ).json();
     return data;
@@ -108,6 +106,13 @@ export const DataJunctionAPI = {
     return data;
   },
 
+  nodesWithDimension: async function (name) {
+    const data = await (
+      await fetch(DJ_URL + '/dimensions/' + name + '/nodes/')
+    ).json();
+    return data;
+  },
+
   materializations: async function (node) {
     const data = await (
       await fetch(DJ_URL + `/nodes/${node}/materializations/`)
@@ -118,7 +123,7 @@ export const DataJunctionAPI = {
         materialization.clientCode = await (
           await fetch(
             DJ_URL +
-              `/client/python/add_materialization/${node}/${materialization.name}`,
+              `/datajunction-clients/python/add_materialization/${node}/${materialization.name}`,
           )
         ).json();
         return materialization;
@@ -129,12 +134,14 @@ export const DataJunctionAPI = {
   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();
+        if (col.dimension !== null) {
+          col.clientCode = await (
+            await fetch(
+              DJ_URL +
+                `/datajunction-clients/python/link_dimension/${node.name}/${col.name}/${col.dimension?.name}`,
+            )
+          ).json();
+        }
         return col;
       }),
     );
@@ -153,11 +160,20 @@ export const DataJunctionAPI = {
     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')
+      await fetch(DJ_URL + '/data/?' + params + '&limit=10000')
     ).json();
     return data;
   },
 
+  stream: async function (metricSelection, dimensionSelection) {
+    const params = new URLSearchParams();
+    metricSelection.map(metric => params.append('metrics', metric));
+    dimensionSelection.map(dimension => params.append('dimensions', dimension));
+    return new EventSource(
+      DJ_URL + '/stream/?' + params + '&limit=10000&async_=true',
+    );
+  },
+
   lineage: async function (node) {},
 
   compiledSql: async function (node) {

package/src/styles/index.css

@@ -265,15 +265,18 @@ tr {
   left: 0;
 }
 
-.table-responsive {
+.table-responsive,
+.table-vertical {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   display: grid;
-
   grid-template-columns: auto auto auto;
   grid-gap: 8px;
   padding: 8px;
 }
+.table-vertical {
+  display: contents;
+}
 .table > thead {
   vertical-align: bottom;
 }
@@ -430,12 +433,12 @@ tbody th {
   color: #00b368;
 }
 
-.history_type__deactvate {
-  background-color: #a8a8a8 !important;
-  color: #855e5e;
+.history_type__delete {
+  background-color: #ffc8c8 !important;
+  color: #9b5a5a;
 }
 
-.history_type__activate {
+.history_type__restore {
   background-color: #ccf7e5 !important;
   color: #00b368;
 }
@@ -456,8 +459,13 @@ tbody th {
 }
 
 .history_type__set_attribute {
-  background-color: #a8a8a8 !important;
-  color: #855e5e;
+  background-color: #e6f5ff !important;
+  color: #487c8c;
+}
+
+.history_type__status_change {
+  background-color: #ffe9db !important;
+  color: #573d3d;
 }
 
 .partition_value {
@@ -865,13 +873,3 @@ pre {
 .inactive {
   display: none;
 }
-
-.filters {
-  width: 500px;
-  display: inline-table;
-}
-
-.filters-operator {
-  width: 200px;
-  display: inline-table;
-}