datajunction-ui 0.0.1-rc.17 → 0.0.1-rc.18

package/.env

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.17",
+  "version": "0.0.1-rc.18",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -43,27 +43,31 @@
     "chalk": "4.1.2",
     "cronstrue": "2.27.0",
     "cross-env": "7.0.3",
-    "css-loader": "6.7.3",
+    "css-loader": "6.8.1",
     "dagre": "^0.8.5",
     "datajunction": "0.0.1-rc.0",
     "file-loader": "6.2.0",
     "fontfaceobserver": "2.3.0",
+    "formik": "2.4.3",
     "husky": "8.0.1",
     "i18next": "21.9.2",
     "i18next-browser-languagedetector": "6.1.5",
     "i18next-scanner": "4.0.0",
     "inquirer": "7.3.3",
     "inquirer-directory": "2.2.0",
+    "js-cookie": "3.0.5",
     "lint-staged": "13.0.3",
     "node-plop": "0.26.3",
     "plop": "2.7.6",
     "prettier": "2.7.1",
     "react": "18.2.0",
     "react-app-polyfill": "3.0.0",
+    "react-cookie": "4.1.1",
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-i18next": "11.18.6",
     "react-is": "18.2.0",
+    "react-querybuilder": "6.5.1",
     "react-redux": "7.2.8",
     "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1",
@@ -75,10 +79,12 @@
     "redux-saga": "1.2.1",
     "rimraf": "3.0.2",
     "sanitize.css": "13.0.0",
+    "sass": "1.66.1",
+    "sass-loader": "13.3.2",
     "serve": "14.0.1",
     "shelljs": "0.8.5",
     "sql-formatter": "^12.2.0",
-    "style-loader": "3.3.2",
+    "style-loader": "3.3.3",
     "stylelint": "14.12.0",
     "stylelint-config-recommended": "9.0.0",
     "ts-loader": "9.4.2",
@@ -160,6 +166,6 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "html-webpack-plugin": "5.5.1",
     "jest": "^29.5.0",
-    "mini-css-extract-plugin": "2.7.5"
+    "mini-css-extract-plugin": "2.7.6"
   }
 }

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

@@ -1,88 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<App /> should render and match the snapshot 1`] = `
-<BrowserRouter>
-  <Helmet
-    defaultTitle="DataJunction: A Metrics Platform"
-    defer={true}
-    encodeSpecialCharacters={true}
-    prioritizeSeoTags={false}
-    titleTemplate="DataJunction: %s"
-  >
-    <meta
-      content="DataJunction serves as a semantic layer to help manage metrics"
-      name="description"
-    />
-  </Helmet>
-  <Context.Provider
-    value={
-      Object {
-        "DataJunctionAPI": Object {
-          "clientCode": [Function],
-          "columns": [Function],
-          "commonDimensions": [Function],
-          "compiledSql": [Function],
-          "cube": [Function],
-          "dag": [Function],
-          "data": [Function],
-          "downstreams": [Function],
-          "history": [Function],
-          "lineage": [Function],
-          "materializations": [Function],
-          "metric": [Function],
-          "metrics": [Function],
-          "namespace": [Function],
-          "namespaces": [Function],
-          "node": [Function],
-          "node_dag": [Function],
-          "node_lineage": [Function],
-          "nodesWithDimension": [Function],
-          "revisions": [Function],
-          "sql": [Function],
-          "sqls": [Function],
-          "stream": [Function],
-          "upstreams": [Function],
-        },
-      }
-    }
-  >
-    <Routes>
-      <Route
-        element={<Unknown />}
-        path="/"
-      >
-        <React.Fragment>
-          <Route
-            path="nodes"
-          >
-            <Route
-              element={<NodePage />}
-              path=":name"
-            />
-          </Route>
-          <Route
-            element={<NamespacePage />}
-            path="/"
-          />
-          <Route
-            path="namespaces"
-          >
-            <Route
-              element={<NamespacePage />}
-              path=":namespace"
-            />
-          </Route>
-          <Route
-            element={<SQLBuilderPage />}
-            path="sql"
-          />
-        </React.Fragment>
-      </Route>
-      <Route
-        element={<Unknown />}
-        path="*"
-      />
-    </Routes>
-  </Context.Provider>
-</BrowserRouter>
+<CookiesProvider>
+  <BrowserRouter>
+    <LoginPage />
+  </BrowserRouter>
+</CookiesProvider>
 `;

package/src/app/components/djgraph/DJNode.jsx

@@ -1,4 +1,4 @@
-import { memo, useLayoutEffect, useRef, useState } from 'react';
+import { memo } from 'react';
 import { Handle, Position } from 'reactflow';
 import Collapse from './Collapse';
 

package/src/app/components/djgraph/LayoutFlow.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
   addEdge,
   MiniMap,

package/src/app/constants.js

@@ -0,0 +1,2 @@
+export const DJ_AUTH_COOKIE = '__dj';
+export const DJ_LOGGED_IN_FLAG_COOKIE = '__djlif';

package/src/app/index.tsx

@@ -11,48 +11,64 @@ import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
 import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
+import { LoginPage } from './pages/LoginPage';
 import { Root } from './pages/Root/Loadable';
 import DJClientContext from './providers/djclient';
 import { DataJunctionAPI } from './services/DJService';
+import { CookiesProvider, useCookies } from 'react-cookie';
+import * as Constants from './constants';
 
 export function App() {
+  const [cookies] = useCookies([Constants.DJ_LOGGED_IN_FLAG_COOKIE]);
   return (
-    <BrowserRouter>
-      <Helmet
-        titleTemplate="DataJunction: %s"
-        defaultTitle="DataJunction: A Metrics Platform"
-      >
-        <meta
-          name="description"
-          content="DataJunction serves as a semantic layer to help manage metrics"
-        />
-      </Helmet>
-      <DJClientContext.Provider value={{ DataJunctionAPI }}>
-        <Routes>
-          <Route
-            path="/"
-            element={<Root />}
-            children={
-              <>
-                <Route path="nodes" key="nodes">
-                  <Route path=":name" element={<NodePage />} />
-                </Route>
+    <CookiesProvider>
+      <BrowserRouter>
+        {cookies.__djlif || process.env.REACT_DISABLE_AUTH === 'true' ? (
+          <>
+            <Helmet
+              titleTemplate="DataJunction: %s"
+              defaultTitle="DataJunction: A Metrics Platform"
+            >
+              <meta
+                name="description"
+                content="DataJunction serves as a semantic layer to help manage metrics"
+              />
+            </Helmet>
+            <DJClientContext.Provider value={{ DataJunctionAPI }}>
+              <Routes>
+                <Route
+                  path="/"
+                  element={<Root />}
+                  children={
+                    <>
+                      <Route path="nodes" key="nodes">
+                        <Route path=":name" element={<NodePage />} />
+                      </Route>
 
-                <Route path="/" element={<NamespacePage />} key="index" />
-                <Route path="namespaces">
-                  <Route
-                    path=":namespace"
-                    element={<NamespacePage />}
-                    key="namespaces"
-                  />
-                </Route>
-                <Route path="sql" key="sql" element={<SQLBuilderPage />} />
-              </>
-            }
-          />
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
-      </DJClientContext.Provider>
-    </BrowserRouter>
+                      <Route path="/" element={<NamespacePage />} key="index" />
+                      <Route path="namespaces">
+                        <Route
+                          path=":namespace"
+                          element={<NamespacePage />}
+                          key="namespaces"
+                        />
+                      </Route>
+                      <Route
+                        path="sql"
+                        key="sql"
+                        element={<SQLBuilderPage />}
+                      />
+                    </>
+                  }
+                />
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </DJClientContext.Provider>
+          </>
+        ) : (
+          <LoginPage />
+        )}
+      </BrowserRouter>
+    </CookiesProvider>
   );
 }

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

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import '../../../styles/login.css';
+import logo from '../Root/assets/dj-logo.png';
+import GitHubLoginButton from './assets/sign-in-with-github.png';
+
+export function LoginPage() {
+  const [, setError] = useState('');
+  const githubLoginURL = new URL('/github/login/', process.env.REACT_APP_DJ_URL)
+    .href;
+
+  const handleBasicLogin = async ({ username, password }) => {
+    const data = new FormData();
+    data.append('username', username);
+    data.append('password', password);
+    await fetch(`${process.env.REACT_APP_DJ_URL}/basic/login/`, {
+      method: 'POST',
+      body: data,
+      credentials: 'include',
+    }).catch(error => {
+      setError(error ? JSON.stringify(error) : '');
+    });
+    window.location.reload();
+  };
+
+  return (
+    <div className="container">
+      <div className="login">
+        <center>
+          <Formik
+            initialValues={{ username: '', password: '' }}
+            validate={values => {
+              const errors = {};
+              if (!values.username) {
+                errors.username = 'Required';
+              }
+              if (!values.password) {
+                errors.password = 'Required';
+              }
+              return errors;
+            }}
+            onSubmit={(values, { setSubmitting }) => {
+              setTimeout(() => {
+                handleBasicLogin(values);
+                setSubmitting(false);
+              }, 400);
+            }}
+          >
+            {({ isSubmitting }) => (
+              <Form>
+                <div className="logo-title">
+                  <img src={logo} alt="DJ Logo" width="75px" height="75px" />
+                  <h2>DataJunction</h2>
+                </div>
+                <div className="inputContainer">
+                  <ErrorMessage name="username" component="span" />
+                  <Field type="text" name="username" placeholder="Username" />
+                </div>
+                <div>
+                  <ErrorMessage name="password" component="span" />
+                  <Field
+                    type="password"
+                    name="password"
+                    placeholder="Password"
+                  />
+                </div>
+                <button type="submit" disabled={isSubmitting}>
+                  Login
+                </button>
+                {process.env.REACT_ENABLE_GITHUB_OAUTH === 'true' ? (
+                  <div>
+                    <a href={githubLoginURL}>
+                      <img
+                        src={GitHubLoginButton}
+                        alt="Sign in with GitHub"
+                        width="200px"
+                      />
+                    </a>
+                  </div>
+                ) : (
+                  ''
+                )}
+              </Form>
+            )}
+          </Formik>
+        </center>
+      </div>
+    </div>
+  );
+}

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

@@ -53,9 +53,6 @@ exports[`<NamespacePage /> should render and match the snapshot 1`] = `
               <th>
                 Mode
               </th>
-              <th>
-                Tags
-              </th>
               <th>
                 Last Updated
               </th>

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

@@ -20,7 +20,7 @@ export function NamespacePage() {
     const hierarchy = [];
 
     for (const item of namespaceList) {
-      const namespaces = item.split('.');
+      const namespaces = item.namespace.split('.');
       let currentLevel = hierarchy;
 
       let path = '';
@@ -58,10 +58,7 @@ export function NamespacePage() {
       if (namespace === undefined && namespaceHierarchy !== undefined) {
         namespace = namespaceHierarchy.children[0].path;
       }
-      const djNodes = await djClient.namespace(namespace);
-      const nodes = djNodes.map(node => {
-        return djClient.node(node);
-      });
+      const nodes = await djClient.namespace(namespace);
       const foundNodes = await Promise.all(nodes);
       setState({
         namespace: namespace,
@@ -100,9 +97,6 @@ export function NamespacePage() {
       <td>
         <span className="status">{node.mode}</span>
       </td>
-      <td>
-        <span className="status">{node.tags}</span>
-      </td>
       <td>
         <span className="status">
           {new Date(node.updated_at).toLocaleString('en-us')}
@@ -147,7 +141,6 @@ export function NamespacePage() {
                   <th>Type</th>
                   <th>Status</th>
                   <th>Mode</th>
-                  <th>Tags</th>
                   <th>Last Updated</th>
                 </tr>
               </thead>

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

@@ -1,9 +1,8 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { MarkerType } from 'reactflow';
 
 import '../../../styles/dag.css';
 import 'reactflow/dist/style.css';
-import DJNode from '../../components/djgraph/DJNode';
 import DJClientContext from '../../providers/djclient';
 import LayoutFlow from '../../components/djgraph/LayoutFlow';
 

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

@@ -1,8 +1,16 @@
+import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
 import logo from './assets/dj-logo.png';
 import { Helmet } from 'react-helmet-async';
+import DJClientContext from '../../providers/djclient';
 
 export function Root() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const handleLogout = async () => {
+    await djClient.logout();
+    window.location.reload();
+  };
   return (
     <>
       <Helmet>
@@ -46,6 +54,15 @@ export function Root() {
             </div>
           </div>
         </div>
+        {process.env.REACT_DISABLE_AUTH === 'true' ? (
+          ''
+        ) : (
+          <span className="menu-link">
+            <span className="menu-title">
+              <button onClick={handleLogout}>Logout</button>
+            </span>
+          </span>
+        )}
       </div>
       <Outlet />
     </>

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

@@ -6,10 +6,14 @@ import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 import Select from 'react-select';
 import QueryInfo from '../../components/QueryInfo';
+import 'react-querybuilder/dist/query-builder.scss';
+import QueryBuilder, { formatQuery } from 'react-querybuilder';
+import 'styles/styles.scss';
 
 export function SQLBuilderPage() {
   const DEFAULT_NUM_ROWS = 100;
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const validator = ruleType => !!ruleType.value;
   const [stagedMetrics, setStagedMetrics] = useState([]);
   const [metrics, setMetrics] = useState([]);
   const [commonDimensionsList, setCommonDimensionsList] = useState([]);
@@ -17,6 +21,8 @@ export function SQLBuilderPage() {
   const [stagedDimensions, setStagedDimensions] = useState([]);
   const [selectedMetrics, setSelectedMetrics] = useState([]);
   const [query, setQuery] = useState('');
+  const [fields, setFields] = useState([]);
+  const [filters, setFilters] = useState({ combinator: 'and', rules: [] });
   const [queryInfo, setQueryInfo] = useState({});
   const [data, setData] = useState(null);
   const [loadingData, setLoadingData] = useState(false);
@@ -48,7 +54,11 @@ export function SQLBuilderPage() {
     setQueryInfo({});
     const fetchData = async () => {
       if (process.env.REACT_USE_SSE) {
-        const sse = await djClient.stream(selectedMetrics, selectedDimensions);
+        const sse = await djClient.stream(
+          selectedMetrics,
+          selectedDimensions,
+          formatQuery(filters, { format: 'sql', parseNumbers: true }),
+        );
         sse.onmessage = e => {
           const messageData = JSON.parse(JSON.parse(e.data));
           setQueryInfo(messageData);
@@ -99,6 +109,24 @@ export function SQLBuilderPage() {
     fetchData().catch(console.error);
   }, [djClient, djClient.metrics]);
 
+  const attributeToFormInput = dimension => {
+    const attribute = {
+      name: dimension.name,
+      label: `${dimension.name} (via ${dimension.path.join(' ▶ ')})`,
+      placeholder: `from ${dimension.path}`,
+      defaultOperator: '=',
+      validator,
+    };
+    if (dimension.type === 'bool') {
+      attribute.valueEditorType = 'checkbox';
+    }
+    if (dimension.type === 'timestamp') {
+      attribute.inputType = 'datetime-local';
+      attribute.defaultOperator = 'between';
+    }
+    return [dimension.name, attribute];
+  };
+
   // Get common dimensions
   useEffect(() => {
     const fetchData = async () => {
@@ -113,8 +141,15 @@ export function SQLBuilderPage() {
             path: d.path.join(' ▶ '),
           })),
         );
+        const uniqueFields = Object.fromEntries(
+          new Map(
+            commonDimensions.map(dimension => attributeToFormInput(dimension)),
+          ),
+        );
+        setFields(Object.keys(uniqueFields).map(f => uniqueFields[f]));
       } else {
         setCommonDimensionsList([]);
+        setFields([]);
       }
     };
     fetchData().catch(console.error);
@@ -123,15 +158,22 @@ export function SQLBuilderPage() {
   // Get SQL
   useEffect(() => {
     const fetchData = async () => {
-      if (selectedMetrics.length && selectedDimensions.length) {
-        const query = await djClient.sqls(selectedMetrics, selectedDimensions);
-        setQuery(query.sql);
+      if (
+        selectedMetrics.length > 0 &&
+        (selectedDimensions.length > 0 || filters.rules.length > 0)
+      ) {
+        const result = await djClient.sqls(
+          selectedMetrics,
+          selectedDimensions,
+          formatQuery(filters, { format: 'sql', parseNumbers: true }),
+        );
+        setQuery(result.sql);
       } else {
         resetView();
       }
     };
     fetchData().catch(console.error);
-  }, [selectedMetrics, selectedDimensions, djClient]);
+  }, [djClient, filters, selectedDimensions, selectedMetrics]);
 
   // Set number of rows to display
   useEffect(() => {
@@ -166,9 +208,7 @@ export function SQLBuilderPage() {
               name="metrics"
               options={metrics}
               isDisabled={
-                selectedMetrics.length && selectedDimensions.length
-                  ? true
-                  : false
+                !!(selectedMetrics.length && selectedDimensions.length)
               }
               noOptionsMessage={() => 'No metrics found.'}
               placeholder={`${metrics.length} Available Metrics`}
@@ -206,6 +246,12 @@ export function SQLBuilderPage() {
                 setSelectedDimensions(stagedDimensions);
               }}
             />
+            <h4>Filter By</h4>
+            <QueryBuilder
+              fields={fields}
+              query={filters}
+              onQueryChange={q => setFilters(q)}
+            />
           </div>
           <div className="card-header">
             {!viewData && !query ? (

package/src/app/services/DJService.js

@@ -5,8 +5,26 @@ const DJ_URL = process.env.REACT_APP_DJ_URL
   : 'http://localhost:8000';
 
 export const DataJunctionAPI = {
+  whoami: async function () {
+    const data = await (
+      await fetch(`${DJ_URL}/whoami/`, { credentials: 'include' })
+    ).json();
+    return data;
+  },
+
+  logout: async function () {
+    await await fetch(`${DJ_URL}/basic/logout/`, {
+      credentials: 'include',
+      method: 'POST',
+    });
+  },
+
   node: async function (name) {
-    const data = await (await fetch(DJ_URL + '/nodes/' + name + '/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/nodes/${name}/`, {
+        credentials: 'include',
+      })
+    ).json();
     data.primary_key = data.columns
       .filter(col =>
         col.attributes.some(attr => attr.attribute_type.name === 'primary_key'),
@@ -17,58 +35,82 @@ export const DataJunctionAPI = {
 
   upstreams: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/nodes/' + name + '/upstream/')
+      await fetch(`${DJ_URL}/nodes/${name}/upstream/`, {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   downstreams: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/nodes/' + name + '/downstream/')
+      await fetch(`${DJ_URL}/nodes/` + name + '/downstream/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   node_dag: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/nodes/' + name + '/dag/')
+      await fetch(`${DJ_URL}/nodes/` + name + '/dag/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   node_lineage: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/nodes/' + name + '/lineage/')
+      await fetch(`${DJ_URL}/nodes/` + name + '/lineage/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   metric: async function (name) {
-    const data = await (await fetch(DJ_URL + '/metrics/' + name + '/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/metrics/` + name + '/', {
+        credentials: 'include',
+      })
+    ).json();
     return data;
   },
 
   clientCode: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/datajunction-clients/python/new_node/' + name)
+      await fetch(`${DJ_URL}/datajunction-clients/python/new_node/` + name, {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   cube: async function (name) {
-    const data = await (await fetch(DJ_URL + '/cubes/' + name + '/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/cubes/` + name + '/', {
+        credentials: 'include',
+      })
+    ).json();
     return data;
   },
 
   metrics: async function (name) {
-    const data = await (await fetch(DJ_URL + '/metrics/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/metrics/`, {
+        credentials: 'include',
+      })
+    ).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)
+      await fetch(`${DJ_URL}/metrics/common/dimensions/` + metricsQuery, {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
@@ -76,10 +118,12 @@ export const DataJunctionAPI = {
   history: async function (type, name, offset, limit) {
     const data = await (
       await fetch(
-        DJ_URL +
-          '/history?node=' +
+        `${DJ_URL}/history?node=` +
           name +
           `&offset=${offset ? offset : 0}&limit=${limit ? limit : 100}`,
+        {
+          credentials: 'include',
+        },
       )
     ).json();
     return data;
@@ -87,27 +131,36 @@ export const DataJunctionAPI = {
 
   revisions: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/nodes/' + name + '/revisions/')
+      await fetch(`${DJ_URL}/nodes/` + name + '/revisions/')
     ).json();
     return data;
   },
 
   namespace: async function (nmspce) {
     const data = await (
-      await fetch(DJ_URL + '/namespaces/' + nmspce + '/')
+      await fetch(`${DJ_URL}/namespaces/` + nmspce + '/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   namespaces: async function () {
-    const data = await (await fetch(DJ_URL + '/namespaces/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/namespaces/`, {
+        credentials: 'include',
+      })
+    ).json();
     return data;
   },
 
   sql: async function (metric_name, selection) {
     const data = await (
       await fetch(
-        DJ_URL + '/sql/' + metric_name + '?' + new URLSearchParams(selection),
+        `${DJ_URL}/sql/` + metric_name + '?' + new URLSearchParams(selection),
+        {
+          credentials: 'include',
+        },
       )
     ).json();
     return data;
@@ -115,22 +168,28 @@ export const DataJunctionAPI = {
 
   nodesWithDimension: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/dimensions/' + name + '/nodes/')
+      await fetch(`${DJ_URL}/dimensions/` + name + '/nodes/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   materializations: async function (node) {
     const data = await (
-      await fetch(DJ_URL + `/nodes/${node}/materializations/`)
+      await fetch(`${DJ_URL}/nodes/${node}/materializations/`, {
+        credentials: 'include',
+      })
     ).json();
 
     return await Promise.all(
       data.map(async materialization => {
         materialization.clientCode = await (
           await fetch(
-            DJ_URL +
-              `/datajunction-clients/python/add_materialization/${node}/${materialization.name}`,
+            `${DJ_URL}/datajunction-clients/python/add_materialization/${node}/${materialization.name}`,
+            {
+              credentials: 'include',
+            },
           )
         ).json();
         return materialization;
@@ -144,8 +203,10 @@ export const DataJunctionAPI = {
         if (col.dimension) {
           col.clientCode = await (
             await fetch(
-              DJ_URL +
-                `/datajunction-clients/python/link_dimension/${node.name}/${col.name}/${col.dimension?.name}`,
+              `${DJ_URL}/datajunction-clients/python/link_dimension/${node.name}/${col.name}/${col.dimension?.name}`,
+              {
+                credentials: 'include',
+              },
             )
           ).json();
         }
@@ -154,12 +215,16 @@ export const DataJunctionAPI = {
     );
   },
 
-  sqls: async function (metricSelection, dimensionSelection) {
+  sqls: async function (metricSelection, dimensionSelection, filters) {
     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;
+    params.append('filters', filters);
+    return await (
+      await fetch(`${DJ_URL}/sql/?${params}`, {
+        credentials: 'include',
+      })
+    ).json();
   },
 
   data: async function (metricSelection, dimensionSelection) {
@@ -167,32 +232,44 @@ 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=10000')
+      await fetch(`${DJ_URL}/data/?` + params + '&limit=10000', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
-  stream: async function (metricSelection, dimensionSelection) {
+  stream: async function (metricSelection, dimensionSelection, filters) {
     const params = new URLSearchParams();
     metricSelection.map(metric => params.append('metrics', metric));
     dimensionSelection.map(dimension => params.append('dimensions', dimension));
+    params.append('filters', filters);
     return new EventSource(
-      DJ_URL + '/stream/?' + params + '&limit=10000&async_=true',
+      `${DJ_URL}/stream/?${params}&limit=10000&async_=true`,
+      {
+        withCredentials: true,
+      },
     );
   },
 
   lineage: async function (node) {},
 
   compiledSql: async function (node) {
-    const data = await (await fetch(DJ_URL + `/sql/${node}/`)).json();
+    const data = await (
+      await fetch(`${DJ_URL}/sql/${node}/`, {
+        credentials: 'include',
+      })
+    ).json();
     return data;
   },
 
   dag: async function (namespace = 'default') {
     const edges = [];
-    const data = await (await fetch(DJ_URL + '/nodes/')).json();
-
-    // const metrics = await (await fetch(DJ_URL + '/metrics/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/nodes/`, {
+        credentials: 'include',
+      })
+    ).json();
 
     data.forEach(obj => {
       obj.parents.forEach(parent => {

package/src/styles/login.css

@@ -0,0 +1,67 @@
+.login form {
+  border-radius: 25px;
+  border: 2px solid #000000;
+  background: linear-gradient(120deg, #ffed7c, #fef7c8);
+  width: 40vw;
+  height: 30rem;
+  box-sizing: border-box;
+  padding: 2rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.login form button {
+  width: 15vw;
+  margin: auto;
+}
+
+.login form span {
+  padding: 0.5rem;
+}
+
+.login input[type='text'] {
+  width: 20vw;
+  padding: 12px 20px;
+  margin: auto;
+  display: inline-block;
+  border: 2px solid #000000;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.login input[type='password'] {
+  -webkit-text-security: disc;
+  width: 20vw;
+  padding: 12px 20px;
+  margin: auto;
+  display: inline-block;
+  border: 2px solid #000000;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.login button[type='submit'] {
+  width: 10vw;
+  background-color: #01b268;
+  border: 2px solid #000000;
+  color: white;
+  padding: 14px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.login .logo-title {
+  display: flex;
+  margin: auto;
+}
+
+.login .logo-title img {
+  padding: 0.5rem;
+}

package/src/styles/styles.scss

@@ -0,0 +1,44 @@
+@use 'sass:color';
+
+.svg-font-color svg > path {
+  fill: var(--ifm-font-color-base);
+}
+select {
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-top: 0.25rem;
+  max-width: 20vw;
+}
+.queryBuilder {
+  min-width: 420px;
+
+  .ruleGroup div select,
+  .ruleGroup div input {
+    -webkit-text-security: none;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    padding-bottom: 0.35rem;
+    padding-left: 0.5rem;
+    padding-top: 0.35rem;
+    border: none;
+  }
+
+  .ruleGroup div button {
+    background-color: #f0f8ff;
+    color: #24518f;
+    border: 1px solid #365b8f;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 0.25rem 0.5rem;
+    text-align: center;
+    text-decoration: none;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+}

package/webpack.config.js

@@ -2,6 +2,8 @@ const webpack = require('webpack');
 const dotenv = require('dotenv').config();
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 require('dotenv').config({ path: './.env' });
 
 var babelOptions = {
@@ -31,7 +33,7 @@ module.exports = {
     },
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.scss'],
     modules: ['src', 'node_modules'],
     fallback: {
       path: false,
@@ -72,6 +74,10 @@ module.exports = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.(s(a|c)ss)$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
       {
         test: /\.js$/,
         exclude: /node_modules/,
@@ -104,5 +110,9 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),
     }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css', // isDevelopment ? '[name].css' : '[name].[hash].css',
+      chunkFilename: '[id].css', // isDevelopment ? '[id].css' : '[id].[hash].css'
+    }),
   ],
 };