cadence-workflow
diff --git a/‎client/main.js‎
Lines changed: 4 additions & 0 deletions b/‎client/main.js‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎client/routes/workflow/components/workflow-graph/components/graph-legend.vue‎
Lines changed: 154 additions & 0 deletions b/‎client/routes/workflow/components/workflow-graph/components/graph-legend.vue‎
Lines changed: 154 additions & 0 deletions
diff --git a/‎client/routes/workflow/components/workflow-graph/components/graph.vue‎
Lines changed: 195 additions & 0 deletions b/‎client/routes/workflow/components/workflow-graph/components/graph.vue‎
Lines changed: 195 additions & 0 deletions
@@ -55,6 +55,8 @@ import WorkflowList from './routes/domain/workflow-list';
 import WorkflowSummary from './routes/workflow/summary';
 import WorkflowTabs from './routes/workflow';
 
+import store from './store/index.js';
+
 import { http, injectMomentDurationFormat, jsonTryParse } from '~helpers';
 
 const routeOpts = {
@@ -188,6 +190,7 @@ const routeOpts = {
               format: query.format || 'grid',
               runId: params.runId,
               showGraph: Boolean(query.showGraph) === true,
+              graphView: query.graphView,
               workflowId: encodeURIComponent(params.workflowId),
             }),
           },
@@ -345,6 +348,7 @@ if (typeof mocha === 'undefined') {
   new Vue({
     el: 'main',
     router,
+    store,
     template: '<App/>',
     components: { App },
   });
 
@@ -0,0 +1,154 @@
+<script>
+// Copyright (c) 2020-2021 Uber Technologies Inc.
+//
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import { LEGEND_CONNECTION_LIST } from '../constants';
+
+export default {
+  name: 'graph-legend',
+  data() {
+    return {
+      isHidden: true,
+      connectionList: LEGEND_CONNECTION_LIST,
+    };
+  },
+  methods: {
+    onClick() {
+      this.isHidden = !this.isHidden;
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-on:click="onClick" class="graph-legend">
+    <div v-if="isHidden" class="legend-preview">
+      <div class="arrow-container">
+        <span class="arrow direct"></span>
+        <hr class="direct" />
+      </div>
+    </div>
+    <div v-if="!isHidden">
+      <transition-group appear name="fade">
+        <div v-for="connection in connectionList" :key="connection.name">
+          <div class="legend-example">
+            <div class="arrow-container">
+              <span :class="connection.name" class="pic arrow"></span>
+              <hr :class="connection.name" />
+            </div>
+            <div class="text">{{ connection.text }}</div>
+          </div>
+          <hr class="divider" />
+        </div>
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="stylus">
+@require '../../../../../styles/definitions.styl';
+.graph-legend {
+  background-color: white;
+  border: 1px solid #eaeaea;
+  box-shadow: 0px 0px 9px 0px rgba(232, 232, 232, 1);
+  width: fit-content;
+  max-width: 200px;
+  padding: 10px 15px;
+  position: absolute;
+  right: inline-spacing-large;
+  bottom: inline-spacing-large;
+  cursor: pointer;
+  z-index: 10;
+
+  &-example {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin: inline-spacing-large;
+  }
+  &-preview {
+    margin: inline-spacing-small inline-spacing-large;
+  }
+}
+
+hr {
+  width: 40px;
+  margin-left: 0;
+  margin-top: 8px;
+
+  &.direct {
+    border-top: 2px solid uber-black-90;
+  }
+
+  &.chron {
+    border-top: 2px solid secondary-color;
+  }
+
+  &.inferred {
+    border-top: 2px solid uber-yellow ;
+  }
+}
+
+hr.divider {
+  border: 0;
+  border-top: 1px solid #eaeaea;
+  width: 100%;
+  padding: 0;
+
+  &:last-child {
+    display:none;
+  }
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.text {
+  margin: 10px 0;
+}
+
+.arrow-container {
+  display: flex;
+  align-items: center;
+}
+
+.arrow {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+
+  &.direct {
+    border-right: 6px solid uber-black-90;
+  }
+
+  &.chron {
+    border-right: 6px solid secondary-color;
+  }
+
+  &.inferred {
+    border-right: 6px solid uber-yellow;
+  }
+}
+</style>
@@ -0,0 +1,195 @@
+<script>
+// Copyright (c) 2020-2021 Uber Technologies Inc.
+//
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import cytoscape from 'cytoscape';
+import omit from 'lodash-es/omit';
+import { mapMutations } from 'vuex';
+import { getGraphPanCenter, selectNode } from '../helpers';
+import cytoscapeLayout from '../helpers/cytoscape-layout';
+import {
+  CYTOSCAPE_DEFAULT_OPTIONS,
+  GRAPH_ZOOM_DEFAULT,
+  GRAPH_ZOOM_MAX,
+  GRAPH_ZOOM_MIN,
+} from '../constants';
+
+cytoscape.use(cytoscapeLayout);
+
+export default {
+  name: 'graph',
+  props: ['events', 'selectedEventId'],
+  watch: {
+    selectedEventId(id) {
+      this.selectNode(id);
+    },
+  },
+  methods: {
+    ...mapMutations(['childRoute', 'toggleChildBtn']),
+    zoomToNode(node) {
+      const pan = getGraphPanCenter({
+        boundingBox: node.boundingBox(),
+        height: this.cy.height(),
+        width: this.cy.width(),
+      });
+
+      // Pan the graph to view node
+      this.cy.animate({
+        zoom: GRAPH_ZOOM_DEFAULT,
+        pan,
+      });
+    },
+    updateChildBtn(node) {
+      const nodeData = node.data();
+
+      if (nodeData.childRoute) {
+        this.childRoute({ route: nodeData.childRoute, btnText: 'To child' });
+      } else if (nodeData.newExecutionRunId) {
+        this.childRoute({
+          route: nodeData.newExecutionRunId,
+          btnText: 'Next execution',
+        });
+      } else {
+        this.toggleChildBtn();
+      }
+    },
+    selectNode(id) {
+      // Update graph to render nodes around the select one
+      this.updateView(id);
+
+      // Deselect all previously selected nodes
+      this.cy.$(':selected').deselect();
+
+      // Mark current node as selected
+      const node =
+        id !== null && id !== undefined ? this.cy.nodes('node#' + id) : null;
+
+      if (node && node.length) {
+        // Zoom to the selected node
+        node.select();
+        this.updateChildBtn(node);
+        this.zoomToNode(node);
+      }
+    },
+    initView(elements) {
+      if (this.cy) {
+        this.cy.unmount();
+        this.cy.destroy();
+        this.cy = null;
+      }
+
+      // Create cy instance
+      const container = this.$refs.cy;
+      const cy = cytoscape({
+        ...CYTOSCAPE_DEFAULT_OPTIONS,
+        container,
+        elements,
+      });
+
+      cy.minZoom(GRAPH_ZOOM_MIN);
+      cy.maxZoom(GRAPH_ZOOM_MAX);
+
+      cy.on('mouseover', 'node', function(e) {
+        container.style.cursor = 'pointer';
+      });
+      cy.on('mouseout', 'node', function(e) {
+        container.style.cursor = 'default';
+      });
+
+      // Register click event
+      cy.on('tap', ({ target: eventTarget }) => {
+        // Tap on background
+        if (eventTarget === cy) {
+          if (this.selectedEventId) {
+            this.$router.replace({ query: omit(this.$route.query, 'eventId') });
+            this.$store.commit('toggleChildBtn');
+          }
+        }
+        // Tap on a node that is not already selected
+        else if (eventTarget.isNode() && !eventTarget.selected()) {
+          const nodeData = eventTarget.data();
+
+          this.$router.replace({
+            query: { ...this.$route.query, eventId: nodeData.id },
+          });
+        }
+      });
+      cy.mount(container);
+      this.cy = cy;
+      this.cy.fit();
+    },
+    updateView(id = null) {
+      if (this.cy && id === null) {
+        // Do nothing if graph is rendered and user clicks somewhere between nodes
+        return;
+      }
+
+      const {
+        shouldRedraw,
+        elements,
+        previousExecutionRunId,
+        parentWorkflowExecution,
+        sliceIndices,
+      } = selectNode({
+        events: this.events,
+        selectedEventId: id,
+        sliceIndices: this.sliceIndices,
+      });
+
+      this.sliceIndices = sliceIndices;
+
+      if (!shouldRedraw) {
+        return;
+      }
+
+      // Currently viewing a child workflow, show parent button
+      if (previousExecutionRunId) {
+        this.$store.commit('previousExecutionRoute', previousExecutionRunId);
+      } else if (parentWorkflowExecution) {
+        this.$store.commit('parentRoute', parentWorkflowExecution);
+      }
+
+      this.initView(elements);
+    },
+  },
+  mounted() {
+    this.sliceIndices = null;
+    this.selectNode(this.selectedEventId);
+  },
+};
+</script>
+
+<template>
+  <div id="cytoscape">
+    <div ref="cy" id="cy"></div>
+  </div>
+</template>
+
+<style scoped>
+#cytoscape {
+  width: 100%;
+  height: 100%;
+}
+#cy {
+  width: 100%;
+  height: 100%;
+}
+</style>