datajunction-ui 0.0.1-rc.12 → 0.0.1-rc.14

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

@@ -4,11 +4,11 @@ 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 DEFAULT_NUM_ROWS = 100;
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [stagedMetrics, setStagedMetrics] = useState([]);
   const [metrics, setMetrics] = useState([]);
@@ -17,12 +17,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 +45,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(10);
+      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 +87,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 +125,9 @@ export function SQLBuilderPage() {
     const fetchData = async () => {
       if (selectedMetrics.length && selectedDimensions.length) {
         const query = await djClient.sqls(selectedMetrics, selectedDimensions);
-        setShowHelp(false);
         setQuery(query.sql);
       } else {
         resetView();
-        setShowHelp(true);
       }
     };
     fetchData().catch(console.error);
@@ -139,7 +137,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,15 +165,28 @@ 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>Shared Dimensions</h4>
+            <h4>Group By</h4>
             <Select
               name="dimensions"
               formatOptionLabel={formatOptionLabel}
@@ -187,12 +198,17 @@ export function SQLBuilderPage() {
               isMulti
               isClearable
               closeMenuOnSelect={false}
-              onChange={handleDimensionSelect}
-              onMenuClose={handleDimensionSelectorClose}
+              onChange={e => {
+                resetView();
+                setStagedDimensions(e.map(d => d.value));
+              }}
+              onMenuClose={() => {
+                setSelectedDimensions(stagedDimensions);
+              }}
             />
           </div>
           <div className="card-header">
-            {showHelp ? (
+            {!viewData && !query ? (
               <div className="card-light-shadow">
                 <h6>Using the SQL Builder</h6>
                 <p>
@@ -272,18 +288,11 @@ export function SQLBuilderPage() {
             ) : (
               <></>
             )}
-            {submittedQueryInfo ? <QueryInfo {...submittedQueryInfo} /> : <></>}
+            {queryInfo && queryInfo.id ? <QueryInfo {...queryInfo} /> : <></>}
             <div>
               {query && !viewData ? (
                 <SyntaxHighlighter language="sql" style={foundation}>
-                  {format(query, {
-                    language: 'spark',
-                    tabWidth: 2,
-                    keywordCase: 'upper',
-                    denseOperators: true,
-                    logicalOperatorNewline: 'before',
-                    expressionWidth: 10,
-                  })}
+                  {query}
                 </SyntaxHighlighter>
               ) : (
                 ''
@@ -294,7 +303,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

@@ -36,6 +36,13 @@ export const DataJunctionAPI = {
     return data;
   },
 
+  node_lineage: async function (name) {
+    const data = await (
+      await fetch(DJ_URL + '/nodes/' + name + '/lineage/')
+    ).json();
+    return data;
+  },
+
   metric: async function (name) {
     const data = await (await fetch(DJ_URL + '/metrics/' + name + '/')).json();
     return data;
@@ -43,7 +50,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 +77,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 +113,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 +130,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 +141,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 +167,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 {

package/webpack.config.js

@@ -99,6 +99,7 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, 'public', 'index.html'),
+      favicon: path.resolve(__dirname, 'public', 'favicon.ico'),
     }),
     new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),