feat: new DAG visualizer (#239)

Author: htahir1

.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties"
+    ]
+}

.env

@@ -1,3 +1,3 @@
-REACT_APP_BASE_API_URL="https://appserver.zenml.io/api/v1"
-REACT_APP_HUB_API_URL="https://hubapi.zenml.io"
+# REACT_APP_BASE_API_URL= https://felix.develaws.zenml.io/api/v1
+REACT_APP_BASE_API_URL= https://appserver.zenml.io/api/v1
 REACT_APP_VERSION=$npm_package_version

.gitignore

@@ -110,4 +110,6 @@ build/
 # TernJS port file
 .tern-port
 
-!.env
+!.env
+
+build

package.json

@@ -16,6 +16,7 @@
     "@types/dagre": "^0.7.48",
     "@types/jest": "^26.0.8",
     "@types/node": "^14.0.27",
+    "@types/papaparse": "^5.3.7",
     "@types/react": "^16.9.44",
     "@types/react-datepicker": "^4.4.2",
     "@types/react-dom": "^16.9.8",
@@ -45,6 +46,7 @@
     "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
     "node-sass": "^4.14.1",
+    "papaparse": "^5.4.1",
     "query-string": "^6.13.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",

src/App.css

@@ -55,6 +55,50 @@ html {
   padding-right: 0;
 }
 
+/* reactflow */
+.react-flow__edge-path {
+  stroke: #443E99;
+}
+
+.react-flow__controls {
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  filter: none;
+  box-shadow: none;
+  /* bottom: 10%; */
+  /* left: 40px; */
+}
+
+.react-flow__controls button :first-child {
+  border: none;
+  height: 55px;
+  width: 55px;
+}
+
+.react-flow__controls :nth-child(n) {
+  border-radius: 100%;
+  background-color: #fffffd;
+  height: 35px;
+  width: 35px;
+  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.08));
+  margin: 5px;
+}
+
+.react-flow__controls :nth-child(n) :first-child {
+  border-radius: 0%;
+  height: 35px;
+  width: 35px;
+}
+
+
+.react-flow__zoom-in {
+  background-color: #443E99;
+  height: 100px;
+  width: 100px;
+}
 a[class*='MenuItem'][class*='active'] .sidebar-fill path {
   stroke: transparent !important;
   fill: #e8a562 !important;

src/api/endpoints.ts

@@ -71,6 +71,15 @@ export const endpoints = {
     graphById: {
       get: (runId: TId): string => `/runs/${runId}/graph`,
     },
+    artifact: {
+      get: (exe_id: TId): string => `/artifacts/${exe_id}`,
+    },
+    artifactVisualization: {
+      get: (id: TId): string => `/artifacts/${id}/visualize`,
+    },
+    step: {
+      get: (exe_id: TId): string => `/steps/${exe_id}`,
+    },
     all: (workspace: string): string => `/workspaces/${workspace}/runs`,
     get: (runId: TId): string => `/runs/${runId}`,
   },

src/api/fetchApi/index.ts

@@ -45,7 +45,6 @@ export const fetchApiWithAuthRequest = ({
   headers?: any;
 }): Promise<any> => {
   const CancelToken = axios.CancelToken;
-
   return axios({
     method: method || httpMethods.get,
     url,

src/api/runs/getArtifactVisualization.ts

@@ -0,0 +1,20 @@
+import { fetchApiWithAuthRequest } from '../fetchApi';
+import { endpoints } from '../endpoints';
+import { httpMethods } from '../constants';
+import { apiUrl } from '../apiUrl';
+
+const getArtifactVisualization = async ({
+  authenticationToken,
+  id,
+}: {
+  authenticationToken: string;
+  id: TId;
+}): Promise<TOrganization> => {
+  return fetchApiWithAuthRequest({
+    url: apiUrl(endpoints.runs.artifactVisualization.get(id)),
+    method: httpMethods.get,
+    authenticationToken,
+  });
+};
+
+export default getArtifactVisualization;

src/api/runs/getRunDataApi.ts

@@ -0,0 +1,20 @@
+import { fetchApiWithAuthRequest } from '../fetchApi';
+import { endpoints } from '../endpoints';
+import { httpMethods } from '../constants';
+import { apiUrl } from '../apiUrl';
+
+const getArtifactDataApi = async ({
+  authenticationToken,
+  exe_id,
+}: {
+  authenticationToken: string;
+  exe_id: TId;
+}): Promise<TOrganization> => {
+  return fetchApiWithAuthRequest({
+    url: apiUrl(endpoints.runs.artifact.get(exe_id)),
+    method: httpMethods.get,
+    authenticationToken,
+  });
+};
+
+export default getArtifactDataApi;

src/api/runs/getStepDataApi.ts

@@ -0,0 +1,20 @@
+import { fetchApiWithAuthRequest } from '../fetchApi';
+import { endpoints } from '../endpoints';
+import { httpMethods } from '../constants';
+import { apiUrl } from '../apiUrl';
+
+const getStepDataApi = async ({
+  authenticationToken,
+  exe_id,
+}: {
+  authenticationToken: string;
+  exe_id: TId;
+}): Promise<TOrganization> => {
+  return fetchApiWithAuthRequest({
+    url: apiUrl(endpoints.runs.step.get(exe_id)),
+    method: httpMethods.get,
+    authenticationToken,
+  });
+};
+
+export default getStepDataApi;