working list view READ + append to existing description instead of re…

…placing

src/components/DataPanel.vue

@@ -96,17 +96,17 @@ export default defineComponent({
           `${import.meta.env.VITE_AUTOFILL_URL}` + `/?url=${new_value}`;
         var name = "",
           link = "",
-          description = "";
+          description = this.$props.data_panel.description;
         try {
           retrieval_status.value = "Retrieving website info..."
           const response = await axios.get(autofill_request_url);
           name = response.data.title;
           link = response.data.url;
-          description = response.data.summary;
+          description += response.data.summary;
         } catch (err) {
           name = `${new_value}`;
           link = new_value;
-          description = `description for ${new_value}`;
+          description += `\n\ndescription for ${new_value}`;
         }
         const nameLengthLimit = 100;
         name =

src/components/Navbar.vue

@@ -3,9 +3,17 @@
     <div class="navbar-brand">
       <a class="navbar-item" href="/"> TWIGSLOT </a>
 
-      <!-- <router-link :to="{ name: 'GraphLayout', id: }">
+      <router-link :to="{ name: 'GraphLayout', 
+      params: {id: this.$store.state.project_id ? this.$store.state.project_id : '0' } }"
+      class="navbar-item">
         Graph
-      </router-link> -->
+      </router-link>
+
+      <router-link :to="{ name: 'ListLayout', 
+      params: {id: this.$store.state.project_id ? this.$store.state.project_id : '0' } }"
+      class="navbar-item">
+        List 
+      </router-link>
       <!-- <a class="navbar-item" :style="{ marginLeft: '10px' }" @click="toggleLayout">
         <text v-if="this.$store.state.layout == 0"> Graph </text>
         <text v-if="this.$store.state.layout == 1"> List </text>

src/router/index.ts

@@ -14,7 +14,7 @@ const routes = [
     },
     {
         path: '/project',
-        name: "Graph",
+        name: "GraphBlank",
         component: GraphLayout
     },
     {
@@ -24,7 +24,7 @@ const routes = [
     },
     {
         path: '/project/:id/list',
-        name: "List",
+        name: "ListLayout",
         component: ListLayout,
     },
     {

src/store/index.ts

@@ -12,7 +12,8 @@ const store : any = new Vuex.Store ({
         selected_mode: 'move',
         mobileView: false,
         showInfo: true,
-        layout: 0
+        layout: 0,
+        project_id: '0',
     },
     mutations: {
         update_kratos_user_id(state, kratos_user_id){
@@ -30,6 +31,9 @@ const store : any = new Vuex.Store ({
         toggle_info(state){
             state.showInfo = !state.showInfo;
         },
+        update_project_id(state, project_id){
+            state.project_id = project_id;
+        }
     }
 })
 export default store

src/views/GraphLayout.vue

@@ -313,6 +313,7 @@ export default defineComponent({
   mounted() {
     axios.defaults.headers.common['X-User'] = this.$store.state.kratos_user_id
     project_id.value = this.$route.params.id
+    this.$store.commit('update_project_id', project_id.value)
     get_items()
   },
   beforeUnmount() {

src/views/ListLayout.vue

@@ -6,9 +6,8 @@
           <h1 class="title is-4">ID : {{ rsc.uid }}</h1>
         </div>
         <div class="control" :style="{marginTop: '10px', width: '90%' }">
-          <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="rsc.name" />
-        </div>
-        <div class="control" :style="{marginTop: '10px', width: '90%' }">
+          <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="rsc.name"
+           :style="{width: '80%'}"/>
           <a target="_blank" :href="rsc.link">
             <button class="button is-dark info-panel-item">Open</button>
           </a>
@@ -24,16 +23,83 @@
   </div>
 </template>
 <script lang="ts">
+
 import axios from "axios";
 import { defineComponent, ref } from "vue";
 import graphData from "../graphData";
+
+const project_id: any = ref("");
+function add_node(raw: any) {
+  if (!('color' in raw)) raw.color = 'blue'
+  if (!('size' in raw)) raw.size = 20
+  else raw.size = parseInt(raw.size)
+  graphData.nodes.value[`node${raw.uid}`] = raw
+  if ('pos_x' in raw && 'pos_y' in raw) {
+    graphData.layouts.value.nodes[`node${raw.uid}`] = {
+      'x': raw['pos_x'],
+      'y': raw['pos_y']
+    }
+  }
+}
+function add_edge(s: string, t: string, uid: any) {
+  graphData.edges.value[uid] =
+      {
+        source: s,
+        target: t,
+        uid: uid
+      }
+}
+
+function add_edge_raw(raw: any) {
+  add_edge(`node${raw[0]}`, `node${raw[2]}`, raw[1].uid)
+}
+
+
+function get_items() {
+  const request_url = import.meta.env.VITE_API_URL + `/project/${project_id.value}`
+  axios
+      .get(request_url)
+      .then(response => {
+        graphData.nodes.value = {}
+        graphData.edges.value = {}
+        var edge_queue: Array<Object> = []
+        for (const item of response.data.items) {
+          if (item instanceof Array) {
+            // only propagate edge info afer all node info has been done
+            // this is because edge info depends on node_uid_name_mapping
+            edge_queue.push(item)
+          } else {
+            add_node(item)
+          }
+        }
+        for (const item of edge_queue) {
+          add_edge_raw(item)
+        }
+      })
+}
 export default defineComponent({
   name: "ListLayout",
   data() {
     return {
       graphData,
+      project_id
     };
   },
-  methods: {},
+  methods: {
+    get_items,
+  },
+  mounted() {
+    axios.defaults.headers.common['X-User'] = this.$store.state.kratos_user_id
+    project_id.value = this.$route.params.id
+    this.$store.commit('update_project_id', project_id.value)
+    get_items()
+  },
+  beforeUnmount() {
+    // so that the next time we open the graph,
+    // there won't be a flicker from the old graph data
+    graphData.nodes.value = {}
+    graphData.edges.value = {}
+  }
+
 });
 </script>