Merge pull request #44 from zenml-io/feature/pipeline-run-dag

Pipeline run dag

Author: danialraza03

.prettierrc.js

@@ -1,6 +1,7 @@
-module.exports =  {
-  semi:  true,
-  trailingComma:  'all',
-  singleQuote:  true,
-  tabWidth:  2,
-};
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  tabWidth: 2,
+  endOfLine: 'auto',
+};

package.json

@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^12.1.0",
     "@types/classnames": "^2.2.10",
     "@types/country-list": "^2.1.0",
+    "@types/dagre": "^0.7.48",
     "@types/jest": "^26.0.8",
     "@types/lodash": "^4.14.158",
     "@types/node": "^14.0.27",
@@ -28,6 +29,7 @@
     "bootstrap": "^4.5.0",
     "classnames": "^2.2.6",
     "country-list": "^2.2.0",
+    "dagre": "^0.8.5",
     "date-fns": "^2.15.0",
     "eslint-import-resolver-babel-module": "^5.1.2",
     "eslint-plugin-react-hooks": "^4.0.8",
@@ -41,6 +43,7 @@
     "react-bootstrap": "^1.3.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^16.13.1",
+    "react-flow-renderer": "^10.3.16",
     "react-outside-click-handler": "^1.3.0",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
@@ -81,12 +84,14 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^3.7.1",
     "@typescript-eslint/parser": "^3.7.1",
+    "autoprefixer": "^10.4.8",
     "babel-plugin-inline-react-svg": "^1.1.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.5",
     "eslint-plugin-redux-saga": "^1.1.3",
+    "postcss": "^8.4.16",
     "prettier": "^2.0.5",
     "react-hooks-testing-library": "^0.6.0",
     "react-test-renderer": "^16.13.1"

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.css

@@ -13,7 +13,10 @@
   src: url('./ui/assets/SourceCodePro-Regular.ttf') format('truetype');
 }
 
-html  , #root, body, .App {
+html,
+#root,
+body,
+.App {
   height: 100%;
   -webkit-tap-highlight-color: transparent;
 }
@@ -23,11 +26,13 @@ html {
   box-sizing: border-box;
 }
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
 }
 
 .container-fluid {
   padding-left: 0;
   padding-right: 0;
-}
+}

src/index.css

@@ -1,53 +1,134 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
 }
 
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
 }
-ol, ul {
-	list-style: none;
+ol,
+ul {
+  list-style: none;
 }
-blockquote, q {
-	quotes: none;
+blockquote,
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 html {
-	font-size: 8px;
+  font-size: 8px;
 }
 
 .__PrivateStripeElement {
-	top: 50%;
-	transform: translateY(-50%);
-}
+  top: 50%;
+  transform: translateY(-50%);
+}

src/routes/appRoutesConfig.tsx

@@ -394,4 +394,4 @@ const routes = [
   },
 ];
 
-export const appRoutesConfig = [...routes] as RouteInterface[];
+export const appRoutesConfig = [...routes] as RouteInterface[];

src/routes/index.tsx

@@ -109,7 +109,6 @@ export const RouteConfig: React.FC = () => {
               component={route.Component}
             />
           ))}
-
           <Route exact={true} component={NotFound} />
         </Switch>
       </Router>

src/services/locales/zu.json

@@ -22,7 +22,7 @@
                 "text": "Billing"
               },
               "organizationSettings": {
-                "text": "Organization Settings"
+                "text": "Project Settings"
               }
             }
           },

src/ui/components/dag/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useService } from './useService';
+import { LayoutFlow } from '../lineage';
+
+const styles = {
+  container: { width: '100%', height: '100%' },
+  dag: { width: '100%', height: '100%', marginTop: '2rem' },
+};
+
+export const DAG: React.FC<{ runId: TId }> = ({ runId }) => {
+  const { graph } = useService({ runId });
+
+  console.log(graph);
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.dag}>
+        <LayoutFlow graph={graph} />
+      </div>
+    </div>
+  );
+};

src/ui/components/dag/useService.ts

@@ -0,0 +1,11 @@
+// import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { runSelectors } from '../../../redux/selectors';
+
+export const useService = ({ runId }: { runId: TId }) => {
+  const graph = useSelector(runSelectors.graphByRunId(runId));
+  // debugger;
+  // useEffect(() => {}, [graph]);
+  // const graph: any = useSelector(runSelectors.graphByRunId(runId));
+  return { graph };
+};