update editor

src/components/EditorWindow.vue

@@ -7,11 +7,17 @@ import { getGraph } from './client';
 
 const network = ref<HTMLElement>()
 
+type GraphApplication = {
+  name: string,
+}
+
 type GraphNode = {
   id: number,
   label: string,
   name: string,
   text: string,
+  applications: Array<GraphApplication>,
+  links: Array<GraphNode>,
 };
 
 type GraphEdge = {
@@ -35,6 +41,8 @@ const selectedNode = ref<GraphNode>({
   label: "",
   name: "",
   text: "",
+  applications: [],
+  links: [],
 })
 
 let net = <Network>{}
@@ -71,8 +79,7 @@ onMounted(async () => {
   net = new Network(network.value, data, options)
   net.on("click", function (params) {
     if (params.nodes.length > 0) {
-      console.log("Clicked node:", params.nodes[0]);
+      selectNode(graph.value.nodes[params.nodes[0]])
-      selectedNode.value = graph.value.nodes[params.nodes[0]]
     } else if (params.edges.length > 0) {
       console.log("Clicked edge:", params.edges[0]);
     }
@@ -82,7 +89,17 @@ onMounted(async () => {
 })
 
 function selectNode(node: GraphNode) {
+  console.log("Select node:", node.id)
   selectedNode.value = node
+  const links = graph.value.edges.filter(function (it: GraphEdge) {
+    return it.from == node.id
+  }).map(function (it: GraphEdge): GraphNode {
+    const id = it.to
+    const linkNode = graph.value.nodes.filter(function (it: GraphNode) { return it.id == id })
+    return linkNode[0]
+  })
+
+  selectedNode.value.links = links
   net.selectNodes([selectedNode.value.id])
 }
 
@@ -105,7 +122,9 @@ function nodeHeader(node: GraphNode): string {
 
     <div v-bind:key="node.id" v-for="node in graph.nodes">
       <div :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button"
-        v-on:click="selectNode(node)">{{ nodeHeader(node) }}</div>
+        v-on:click="selectNode(node)">
+        {{ nodeHeader(node) }}
+      </div>
     </div>
   </div>
 
@@ -117,6 +136,20 @@ function nodeHeader(node: GraphNode): string {
     <div>
       {{ selectedNode.text }}
     </div>
+    <div>
+      <h3>Приложения</h3>
+      <div v-bind:key="application.name" v-for="application in selectedNode.applications">
+        {{ application.name }}
+      </div>
+    </div>
+    <div>
+      <h3>Ссылки</h3>
+      <div v-bind:key="node.id" v-for="node in selectedNode.links">
+        <div class="node-select-button" v-on:click="selectNode(node)">
+          {{ nodeHeader(node) }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -145,6 +178,10 @@ function nodeHeader(node: GraphNode): string {
   max-width: 300px;
 }
 
+.node-select-button {
+  color: #373737;
+}
+
 .node-select-button:hover {
   font-weight: bold;
   cursor: pointer;