[#33] create base test

components/RenderGraph/RenderGraph.stories.ts

@@ -0,0 +1,50 @@
+import { Meta, Story } from "@storybook/vue3";
+import RenderGraph from '~/components/RenderGraph/RenderGraph.vue';
+
+export default {
+  title: "Components/RenderGraph",
+  component: RenderGraph
+} as Meta<typeof RenderGraph>;
+
+const Template: Story = (args) => ({
+  components: { RenderGraph },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<RenderGraph v-bind="args" />`,
+});
+
+export const TestData = Template.bind({});
+
+TestData.args = {
+  data: {
+    elements: {
+      nodes: [
+        { data: { id: 'j', name: 'Jerry', weight: 65, faveColor: '#6FB1FC', faveShape: 'triangle' } },
+        { data: { id: 'e', name: 'Elaine', weight: 45, faveColor: '#EDA1ED', faveShape: 'ellipse' } },
+        { data: { id: 'k', name: 'Kramer', weight: 75, faveColor: '#86B342', faveShape: 'octagon' } },
+        { data: { id: 'g', name: 'George', weight: 70, faveColor: '#F5A45D', faveShape: 'rectangle' } }
+      ],
+      edges: [
+        { data: { source: 'j', target: 'e', faveColor: '#6FB1FC', strength: 90 } },
+        { data: { source: 'j', target: 'e', faveColor: '#000000', strength: 120 } },
+        { data: { source: 'j', target: 'k', faveColor: '#6FB1FC', strength: 70 } },
+        { data: { source: 'j', target: 'g', faveColor: '#6FB1FC', strength: 80 } },
+
+        { data: { source: 'e', target: 'j', faveColor: '#EDA1ED', strength: 95 } },
+        { data: { source: 'e', target: 'k', faveColor: '#EDA1ED', strength: 60 }, classes: 'questionable' },
+
+        { data: { source: 'k', target: 'j', faveColor: '#86B342', strength: 100 } },
+        { data: { source: 'k', target: 'e', faveColor: '#86B342', strength: 100 } },
+        { data: { source: 'k', target: 'g', faveColor: '#86B342', strength: 100 } },
+
+        { data: { source: 'g', target: 'j', faveColor: '#F5A45D', strength: 90 } },
+        { data: { source: 'g', target: 'g', faveColor: '#F5A45D', strength: 90 } },
+        { data: { source: 'g', target: 'g', faveColor: '#F5A45D', strength: 90 } },
+        { data: { source: 'g', target: 'g', faveColor: '#F5A45D', strength: 90 } }
+      ]
+    },
+  },
+};

components/RenderGraph/RenderGraph.vue

@@ -0,0 +1,143 @@
+<template>
+  <div ref="parent" class="render-graph" :height="`${height}px`">
+    <div ref="renderer" class="render-graph__in"></div>
+  </div>
+
+  <div
+    v-if="activeEdgePosition"
+    class="render-graph__tooltip"
+    :style="edgePosition"
+  >
+    <h4 class="render-graph__tooltip-title">{{ activeEdge }} Hello works!</h4>
+
+    <!--    <StatBoard v-if="activeEdge" :cost="activeEdge.cost" />-->
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import type { ProfilerEdge } from "~/config/types";
+
+import cytoscape from "cytoscape";
+import type { CytoscapeOptions } from "cytoscape";
+// import StatBoard from "~/components/StatBoard/StatBoard.vue";
+
+export default defineComponent({
+  // components: { StatBoard },
+  props: {
+    data: {
+      type: Object as PropType<CytoscapeOptions["data"]>,
+      required: true,
+    },
+    height: {
+      type: Number,
+      default: 500,
+    },
+  },
+  data() {
+    return {
+      activeEdge: null as null | ProfilerEdge,
+      activeEdgePosition: null as null | { x: number; y: number },
+      renderer: null,
+    };
+  },
+  computed: {
+    edgePosition() {
+      if (!this.activeEdgePosition?.x && !this.activeEdgePosition?.y) {
+        return {};
+      }
+
+      let top = this.activeEdgePosition.y;
+      let left = this.activeEdgePosition.x;
+
+      if (this.activeEdgePosition.x > window.innerWidth - 80) {
+        const deltaX = this.activeEdgePosition.x - window.innerWidth + 100;
+        left -= deltaX;
+      }
+
+      if (this.activeEdgePosition.y > window.innerHeight) {
+        top = this.activeEdgePosition.y;
+      }
+
+      return {
+        top: `${top + 10}px`,
+        left: `${left}px`,
+      };
+    },
+  },
+  mounted() {
+    this.renderer = cytoscape({
+      container: this.$refs.renderer as HTMLElement,
+
+      elements: this.data.elements,
+      style: [
+        {
+          selector: "node",
+          style: {
+            "background-color": "#3498db",
+            label: "data(label)",
+            content: "data(name)",
+            "text-valign": "center",
+            "text-outline-width": 2,
+            "text-outline-color": "data(faveColor)",
+            color: "#fff",
+          },
+        },
+        {
+          selector: "edge",
+          style: {
+            "line-color": "#e74c3c",
+            "curve-style": "bezier",
+            "target-arrow-shape": "triangle",
+          },
+        },
+        {
+          selector: "edge.questionable",
+          style: {
+            "line-style": "dotted",
+            "target-arrow-shape": "diamond",
+          },
+        },
+      ],
+    });
+
+    this.renderer.on("mouseover", "node", (event) => {
+      // console.log('node', node.data())
+
+      this.activeEdgePosition = event.position;
+    });
+
+    this.renderer.on("mouseout", () => {
+      this.activeEdgePosition = { x: 0, y: 0 };
+    });
+  },
+  beforeUnmount() {
+    this.renderer.destroy();
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.render-graph {
+  @apply w-full h-full relative min-h-[500px];
+}
+
+.render-graph__in {
+  @apply absolute top-0 left-0 right-0 bottom-0;
+}
+
+.render-graph__edge {
+  @apply bg-gray-800 absolute border border-gray-300 dark:border-gray-600 z-50;
+
+  width: 150px;
+  height: 80px;
+}
+
+.render-graph__tooltip {
+  @apply bg-gray-800 absolute border border-gray-300 dark:border-gray-600 z-50;
+}
+
+.render-graph__tooltip-title {
+  @apply px-4 py-2 font-bold truncate text-gray-300;
+}
+</style>

config/types.ts

@@ -8,7 +8,6 @@ export type Email = string; // TODO: update type
 export type TEventType = OneOfValues<typeof EVENT_TYPES>;
 export type TEventGroup = OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>;
 
-
 type SMTPUser = {
   name: string;
   email: Email;

nuxt.config.ts

@@ -43,6 +43,7 @@ export default defineNuxtConfig({
   },
   css: ["~/assets/index.css"],
   plugins: [
+    {src: '~/plugins/api.client.ts'},
     {src: '~/plugins/events.client.ts'},
     {src: '~/plugins/vendors.client.ts'},
   ],

package.json

@@ -66,6 +66,7 @@
     "@storybook/vue3": "^6.5.16",
     "@vue/shared": "^3.2.45",
     "centrifuge": "^3.1.0",
+    "cytoscape": "^3.26.0",
     "d3-graphviz": "^5.0.2",
     "d3-selection": "^3.0.0",
     "downloadjs": "^1.4.7",
@@ -79,6 +80,7 @@
     "pluralize": "^8.0.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45",
+    "vue-cytoscape": "^1.0.8",
     "vue3-perfect-scrollbar": "^1.6.1",
     "vue3-tabs-component": "^1.2.0"
   }