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

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import ReactFlow, {
   addEdge,
   MiniMap,
@@ -8,12 +8,15 @@ import ReactFlow, {
   useEdgesState,
   MarkerType,
 } from 'reactflow';
+
+import '../../../styles/dag.css';
 import 'reactflow/dist/style.css';
 import DJNode from '../../components/djgraph/DJNode';
-import { DataJunctionAPI } from '../../services/DJService';
 import dagre from 'dagre';
+import DJClientContext from '../../providers/djclient';
 
 const NodeLineage = djNode => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const nodeTypes = useMemo(() => ({ DJNode: DJNode }), []);
 
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
@@ -63,9 +66,14 @@ const NodeLineage = djNode => {
     };
 
     const dagFetch = async () => {
-      let upstreams = await DataJunctionAPI.upstreams(djNode.djNode.name);
-      let downstreams = await DataJunctionAPI.downstreams(djNode.djNode.name);
-      let djNodes = [...new Set([...upstreams, ...downstreams, djNode.djNode])];
+      let upstreams = await djClient.upstreams(djNode.djNode.name);
+      let downstreams = await djClient.downstreams(djNode.djNode.name);
+      var djNodes = [djNode.djNode];
+      for (const iterable of [upstreams, downstreams]) {
+        for (const item of iterable) {
+          djNodes.push(item);
+        }
+      }
       let edges = [];
       djNodes.forEach(obj => {
         obj.parents.forEach(parent => {
@@ -111,7 +119,7 @@ const NodeLineage = djNode => {
             label:
               node.table !== null
                 ? String(node.schema_ + '.' + node.table)
-                : String(node.name),
+                : 'default.' + node.name,
             table: node.table,
             name: String(node.name),
             display_name: String(node.display_name),
@@ -124,14 +132,13 @@ const NodeLineage = djNode => {
           // extent: 'parent',
         };
       });
-
       setNodes(nodes);
       setEdges(edges);
       setElementsLayout(nodes, edges);
     };
 
     dagFetch();
-  }, [dagreGraph, djNode.djNode, setEdges, setNodes]);
+  }, [dagreGraph, djClient, djNode.djNode, setEdges, setNodes]);
 
   const onConnect = useCallback(
     params => setEdges(eds => addEdge(params, eds)),

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

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { DataJunctionAPI } from '../../services/DJService';
+import { useContext, useEffect, useState } from 'react';
 import Tab from '../../components/Tab';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeInfoTab from './NodeInfoTab';
 import NodeColumnTab from './NodeColumnTab';
 import NodeLineage from './NodeGraphTab';
+import DJClientContext from '../../providers/djclient';
 
 export function NodePage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [state, setState] = useState({
     selectedTab: 0,
   });
@@ -35,11 +36,11 @@ export function NodePage() {
 
   useEffect(() => {
     const fetchData = async () => {
-      const data = await DataJunctionAPI.node(name);
+      const data = await djClient.node(name);
       setNode(data);
     };
     fetchData().catch(console.error);
-  }, [name]);
+  }, [djClient, name]);
 
   const TabsJson = [
     {
@@ -66,7 +67,7 @@ export function NodePage() {
       tabToDisplay = <NodeColumnTab node={node} />;
       break;
     case 2:
-      tabToDisplay = <NodeLineage djNode={node} />;
+      tabToDisplay = <NodeLineage djNode={node} djClient={djClient} />;
       break;
     default:
       tabToDisplay = <NodeInfoTab node={node} />;

package/src/app/pages/NotFoundPage/Loadable.tsx

@@ -3,7 +3,7 @@
  */
 
 import * as React from 'react';
-import { lazyLoad } from 'utils/loadable';
+import { lazyLoad } from '../../../utils/loadable';
 
 export const NotFoundPage = lazyLoad(
   () => import('./index'),

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

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import styled from 'styled-components/macro';
-import { P } from './P';
 import { Helmet } from 'react-helmet-async';
 
 export function NotFoundPage() {
@@ -10,36 +8,16 @@ export function NotFoundPage() {
         <title>404 Page Not Found</title>
         <meta name="description" content="Page not found" />
       </Helmet>
-      <Wrapper>
-        <Title>
+      <div>
+        <label>
           4
           <span role="img" aria-label="Crying Face">
             😢
           </span>
           4
-        </Title>
-        <P>Page not found.</P>
-      </Wrapper>
+        </label>
+        <p>Page not found.</p>
+      </div>
     </>
   );
 }
-
-const Wrapper = styled.div`
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  min-height: 320px;
-`;
-
-const Title = styled.div`
-  margin-top: -8vh;
-  font-weight: bold;
-  color: ${p => p.theme.text};
-  font-size: 3.375rem;
-
-  span {
-    font-size: 3.125rem;
-  }
-`;

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

@@ -3,21 +3,12 @@
  */
 
 import * as React from 'react';
-import { lazyLoad } from 'utils/loadable';
-import styled from 'styled-components/macro';
-
-const LoadingWrapper = styled.div`
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
+import { lazyLoad } from '../../../utils/loadable';
 
 export const Root = lazyLoad(
   () => import('./index'),
   module => module.Root,
   {
-    fallback: <LoadingWrapper></LoadingWrapper>,
+    fallback: <></>,
   },
 );

package/src/app/providers/djclient.jsx

@@ -0,0 +1,5 @@
+import { DataJunctionAPI } from '../services/DJService';
+import * as React from 'react';
+
+const DJClientContext = React.createContext({ DataJunctionAPI });
+export default DJClientContext;

package/src/index.tsx

@@ -14,11 +14,12 @@ import FontFaceObserver from 'fontfaceobserver';
 
 // Use consistent styling
 import 'sanitize.css/sanitize.css';
+import './styles/index.css';
 
-import { App } from 'app';
+import { App } from './app';
 
 import { HelmetProvider } from 'react-helmet-async';
-import reportWebVitals from 'reportWebVitals';
+import reportWebVitals from './reportWebVitals';
 
 // Observe loading of Inter (to remove 'Inter', remove the <link> tag in
 // the index.html file and this observer)

package/src/setupTests.ts

@@ -4,5 +4,3 @@ import '@testing-library/jest-dom/extend-expect';
 
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
-
-import 'jest-styled-components';

package/src/styles/dag.css

@@ -0,0 +1,118 @@
+.react-flow__node-custom {
+  font-size: 1.2em;
+  width: 180px;
+  background: #f5f5f6;
+  color: #222;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 15%), 0 2px 4px -1px rgb(0 0 0 / 8%);
+  border-radius: 2px;
+}
+.react-flow {
+  width: 100%;
+  height: 800px;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+.react-flow__node-custom .react-flow__handle {
+  top: 24px;
+  right: -15px;
+  width: 6px;
+  height: 10px;
+  border-radius: 2px;
+  background-color: #778899;
+}
+
+.react-flow__node.circle {
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 700;
+}
+
+.react-flow__node.annotation {
+  border-radius: 0;
+  text-align: left;
+  background: white;
+  border: none;
+  line-height: 1.4;
+  width: 225px;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 15%), 0 2px 4px -1px rgb(0 0 0 / 8%);
+}
+
+.react-flow__node.annotation .react-flow__handle {
+  display: none;
+}
+
+.dj-node__header {
+  font-weight: 400;
+  text-transform: uppercase;
+  font-family: 'jetbrains-mono', monospace;
+  font-size: 1.5em;
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
+  padding-left: 0.75em;
+  padding-top: 0.35rem;
+  padding-bottom: 0.35rem;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: #c4cbd1;
+}
+
+.dj-node__body {
+  background-color: rgb(254, 254, 254);
+  padding: 0.5em 0.7em 0.9em 0.7em;
+  font-family: 'nt-dapper', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-size: 1.7em;
+}
+
+.dj-node__full {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-width: 1px;
+  border-style: solid;
+  border-image: initial;
+  border-color: #b0b9c2;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
+    rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+}
+
+.dj-node__metadata {
+  padding: 1em;
+  font-family: 'nt-dapper', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-size: 1em;
+}
+
+.collapse-button {
+  display: block;
+  width: 100%;
+  font: 0.8em 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-transform: uppercase;
+  border: none;
+  margin-top: 0.2em;
+  padding: 0.35em;
+}
+.collapse {
+  padding-top: 10px;
+}
+.collapse-content.collapsed {
+  display: none;
+}
+.collapsed-content.expanded {
+  display: block;
+}
+.collapse tr td {
+  padding-left: 5px;
+  padding-bottom: 5px;
+}
+.serif {
+  font-family: 'jetbrains-mono', monospace;
+  text-transform: lowercase;
+}

package/src/styles/index.css

@@ -25,8 +25,21 @@ p {
 a,
 a:hover {
   text-decoration: none;
+  color: #005c72;
   font-family: 'Cerebri Sans', sans-serif;
 }
+a:hover {
+  text-decoration: underline;
+}
+button.nav-link {
+  background: none;
+  color: #007acc;
+  border: inherit;
+  padding: inherit;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
 code {
   font-family: Consolas, source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
@@ -339,6 +352,8 @@ tbody th {
   padding: 0.44rem;
   border-radius: 0.375rem;
   cursor: crosshair;
+  word-wrap: break-word;
+  white-space: break-spaces;
 }
 
 /* Nodes */
@@ -366,8 +381,8 @@ tbody th {
 }
 
 .node_type__cube {
-  background-color: #c2180750 !important;
-  color: #c21807;
+  background-color: #dbafff !important;
+  color: #580076;
 }
 
 .status__valid {
@@ -485,8 +500,8 @@ pre {
   flex-grow: 0 !important;
 }
 .logo img {
-  padding: 10px;
-  margin-bottom: -1.2rem;
+  padding: 15px;
+  margin-bottom: 0.2rem;
 }
 
 .menu-lg-row > .menu-item {

package/src/utils/__tests__/loadable.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { lazyLoad } from 'utils/loadable';
+import { lazyLoad } from '../loadable';
 
 const LoadingIndicator = () => <div>Loading</div>;
 

package/tsconfig.json

@@ -2,29 +2,32 @@
   "compilerOptions": {
     "noImplicitAny": false,
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "esnext", "es2015"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
+    "module": "commonjs",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "noFallthroughCasesInSwitch": true,
     "jsx": "react-jsx",
-    "baseUrl": "./src"
+    "baseUrl": "./src",
+    "preserveConstEnums": true,
+    "removeComments": true,
+    "sourceMap": true
   },
-  "include": ["src", "internals/startingTemplate/**/*"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "internals/startingTemplate/**/*"],
   "ts-node": {
     "compilerOptions": {
       "esModuleInterop": true,
       "module": "commonjs",
       "moduleResolution": "node",
-      "noEmit": true,
+      "noEmit": false,
       "allowSyntheticDefaultImports": true
     }
   }

package/webpack.config.js

@@ -0,0 +1,108 @@
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+var babelOptions = {
+  presets: ['@babel/preset-react'],
+};
+
+module.exports = {
+  cache: true,
+  entry: {
+    main: './src/index.tsx',
+    vendor: ['events', 'react', 'react-dom'],
+  },
+  target: 'web',
+  mode: 'development',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    filename: 'static/[name].[fullhash].js',
+    library: 'datajunction-ui',
+    libraryTarget: 'umd',
+    globalObject: 'this',
+    umdNamedDefine: true,
+    publicPath: '/',
+  },
+  devServer: {
+    historyApiFallback: {
+      disableDotRule: true,
+    },
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+    fallback: {
+      path: false,
+      buffer: false,
+      assert: false,
+      fs: false,
+      os: false,
+      module: false,
+      http: false,
+      tls: false,
+      https: false,
+      url: false,
+      browser: false,
+      net: false,
+      process: false,
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx|jsx)$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+          {
+            loader: 'ts-loader',
+            options: {
+              compilerOptions: {
+                noEmit: false,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+          },
+        ],
+      },
+      {
+        test: /node_modules[\\|/](name-of-the-umd-package)/,
+        use: { loader: 'umd-compat-loader' },
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'public', 'index.html'),
+    }),
+    new webpack.DefinePlugin({
+      REACT_APP_DJ_URL: 'http://localhost:8000',
+    }),
+    // new MiniCssExtractPlugin({
+    //   filename: './styles/index.css',
+    // }),
+  ],
+};

package/src/app/pages/NotFoundPage/P.ts

@@ -1,8 +0,0 @@
-import styled from 'styled-components/macro';
-
-export const P = styled.p`
-  font-size: 1rem;
-  line-height: 1.5;
-  color: ${p => p.theme.textSecondary};
-  margin: 0.625rem 0 1.5rem 0;
-`;

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

@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<NotFoundPage /> should match snapshot 1`] = `
-.c2 {
-  font-size: 1rem;
-  line-height: 1.5;
-  margin: 0.625rem 0 1.5rem 0;
-}
-
-.c0 {
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  min-height: 320px;
-}
-
-.c1 {
-  margin-top: -8vh;
-  font-weight: bold;
-  font-size: 3.375rem;
-}
-
-.c1 span {
-  font-size: 3.125rem;
-}
-
-<div
-  className="c0"
->
-  <div
-    className="c1"
-  >
-    4
-    <span
-      aria-label="Crying Face"
-      role="img"
-    >
-      😢
-    </span>
-    4
-  </div>
-  <p
-    className="c2"
-  >
-    Page not found.
-  </p>
-</div>
-`;

package/src/app/pages/NotFoundPage/__tests__/index.test.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { NotFoundPage } from '..';
-import { MemoryRouter } from 'react-router-dom';
-import { HelmetProvider } from 'react-helmet-async';
-import renderer from 'react-test-renderer';
-
-const renderPage = () =>
-  renderer.create(
-    <MemoryRouter>
-      <HelmetProvider>
-        <NotFoundPage />
-      </HelmetProvider>
-    </MemoryRouter>,
-  );
-
-describe('<NotFoundPage />', () => {
-  it('should match snapshot', () => {
-    const notFoundPage = renderPage();
-    expect(notFoundPage.toJSON()).toMatchSnapshot();
-  });
-});