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

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/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/styles/index.css

@@ -352,6 +352,8 @@ tbody th {
   padding: 0.44rem;
   border-radius: 0.375rem;
   cursor: crosshair;
+  word-wrap: break-word;
+  white-space: break-spaces;
 }
 
 /* Nodes */
@@ -379,8 +381,8 @@ tbody th {
 }
 
 .node_type__cube {
-  background-color: #c2180750 !important;
-  color: #c21807;
+  background-color: #dbafff !important;
+  color: #580076;
 }
 
 .status__valid {
@@ -498,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/tsconfig.json

@@ -21,7 +21,7 @@
     "removeComments": true,
     "sourceMap": true
   },
-  "include": ["src", "internals/startingTemplate/**/*"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "internals/startingTemplate/**/*"],
   "ts-node": {
     "compilerOptions": {
       "esModuleInterop": true,

package/webpack.config.js

@@ -1,6 +1,7 @@
+const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 var babelOptions = {
   presets: ['@babel/preset-react'],
@@ -10,17 +11,23 @@ module.exports = {
   cache: true,
   entry: {
     main: './src/index.tsx',
-    vendor: ['events', 'fbemitter', 'flux', 'react', 'react-dom'],
+    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: true,
+    historyApiFallback: {
+      disableDotRule: true,
+    },
   },
   resolve: {
     extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
@@ -31,6 +38,13 @@ module.exports = {
       fs: false,
       os: false,
       module: false,
+      http: false,
+      tls: false,
+      https: false,
+      url: false,
+      browser: false,
+      net: false,
+      process: false,
     },
   },
   module: {
@@ -84,6 +98,9 @@ module.exports = {
     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/dist/index.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="public/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <link rel="manifest" href="public/manifest.json" />
-    <meta property="og:title" content="React Boilerplate Example App" />
-    <meta property="og:description" content="" />
-    <title>DataJunction App</title>
-    <meta name="description" content="" />
-    <script defer src="main.js"></script>
-    <script defer src="vendor.js"></script>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-
-    <!-- Inter Font -->
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap"
-      rel="stylesheet"
-    />
-  </body>
-</html>