From d52bec880c2cea496d0b97b587b1c464b0dacc4e Mon Sep 17 00:00:00 2001
From: Chang Liu <liuc223@gmail.com>
Date: Thu, 1 Feb 2024 23:03:58 +0800
Subject: [PATCH] X

---
 .../SchemaView/SchemaSidebarEditView.vue      | 15 ----
 .../SchemaView/SchemaSidebarReadOnlyView.vue  | 69 ++++++++++---------
 src/components/SchemaView/SchemaViewMain.vue  | 20 ++----
 3 files changed, 43 insertions(+), 61 deletions(-)

diff --git a/src/components/SchemaView/SchemaSidebarEditView.vue b/src/components/SchemaView/SchemaSidebarEditView.vue
index f0414cd..dbeaaa9 100644
--- a/src/components/SchemaView/SchemaSidebarEditView.vue
+++ b/src/components/SchemaView/SchemaSidebarEditView.vue
@@ -36,10 +36,6 @@
       </div>
       <hr>
 
-      <h6 v-if="rdf">
-        <b>{{ rdf }} </b> RDF graph
-      </h6>
-
       <div v-if="!isNode">
         <h6 v-if="relGroup">
           <b>{{ relGroup }} </b> group
@@ -261,17 +257,6 @@ export default {
       }
       return this.schema.relTables.find(t => t.name === this.label).group;
     },
-
-    rdf() {
-      if (!this.schema || !this.label) {
-        return null;
-      }
-      if (this.isNode) {
-        return this.schema.nodeTables.find(t => t.name === this.label).rdf;
-      }
-      return this.schema.relTables.find(t => t.name === this.label).rdf;
-    },
-
     tableProperties() {
       if (this.isEditingLabel) {
         if (this.isNode) {
diff --git a/src/components/SchemaView/SchemaSidebarReadOnlyView.vue b/src/components/SchemaView/SchemaSidebarReadOnlyView.vue
index 06d3ed0..cfb6ad5 100644
--- a/src/components/SchemaView/SchemaSidebarReadOnlyView.vue
+++ b/src/components/SchemaView/SchemaSidebarReadOnlyView.vue
@@ -5,16 +5,20 @@
         <span
           class="badge bg-primary"
           :style="{
-            backgroundColor: ` ${getColor(hoveredLabel)} !important`,
-            color: hoveredIsNode ? '#ffffff' : '#000000',
+            backgroundColor: ` ${getColor(label)} !important`,
+            color: isNode ? '#ffffff' : '#000000',
           }"
         >
-          {{ hoveredLabel }}
+          {{ label }}
         </span>
       </h5>
-      <hr>
+      <hr />
 
-      <div v-if="!hoveredIsNode">
+      <h6 v-if="rdf">
+        <b>{{ rdf }} </b> RDF graph
+      </h6>
+
+      <div v-if="!isNode">
         <h6>
           <span
             class="badge bg-primary"
@@ -36,7 +40,7 @@
             {{ destination }}
           </span>
         </h6>
-        <br>
+        <br />
       </div>
 
       <table
@@ -45,30 +49,18 @@
       >
         <thead>
           <tr v-if="tableProperties.length > 0">
-            <th scope="col">
-              Name
-            </th>
-            <th scope="col">
-              Type
-            </th>
+            <th scope="col">Name</th>
+            <th scope="col">Type</th>
           </tr>
           <tr v-else>
-            <th scope="col">
-              There are no properties in this table
-            </th>
+            <th scope="col">There are no properties in this table</th>
           </tr>
         </thead>
         <tbody v-if="tableProperties.length > 0">
-          <tr
-            v-for="property in tableProperties"
-            :key="property.name"
-          >
+          <tr v-for="property in tableProperties" :key="property.name">
             <td scope="row">
               {{ property.name }}
-              <span
-                v-if="property.isPrimaryKey"
-                class="badge bg-primary"
-              > PK </span>
+              <span v-if="property.isPrimaryKey" class="badge bg-primary"> PK </span>
             </td>
             <td>
               {{ property.type }}
@@ -90,42 +82,53 @@ export default {
       type: Object,
       required: true,
     },
-    hoveredLabel: {
+    label: {
       type: String,
       required: true,
     },
-    hoveredIsNode: {
+    isNode: {
       type: Boolean,
       required: true,
     },
   },
   computed: {
     ...mapStores(useSettingsStore),
+
+    rdf() {
+      if (!this.schema || !this.label) {
+        return null;
+      }
+      if (this.isNode) {
+        return this.schema.nodeTables.find(t => t.name === this.label).rdf;
+      }
+      return this.schema.relTables.find(t => t.name === this.label).rdf;
+    },
+
     source() {
-      if (!this.schema || !this.hoveredLabel || this.hoveredIsNode) {
+      if (!this.schema || !this.label || this.isNode) {
         return null;
       }
-      return this.schema.relTables.find(t => t.name === this.hoveredLabel).src;
+      return this.schema.relTables.find(t => t.name === this.label).src;
     },
 
     destination() {
-      if (!this.schema || !this.hoveredLabel || this.hoveredIsNode) {
+      if (!this.schema || !this.label || this.isNode) {
         return null;
       }
-      return this.schema.relTables.find(t => t.name === this.hoveredLabel).dst;
+      return this.schema.relTables.find(t => t.name === this.label).dst;
     },
 
     tableProperties() {
-      if (!this.schema || !this.hoveredLabel) {
+      if (!this.schema || !this.label) {
         return [];
       }
-      if (this.hoveredIsNode) {
+      if (this.isNode) {
         return this.schema.nodeTables
-          .find(t => t.name === this.hoveredLabel)
+          .find(t => t.name === this.label)
           .properties;
       } else {
         return this.schema.relTables
-          .find(t => t.name === this.hoveredLabel)
+          .find(t => t.name === this.label)
           .properties;
       }
     },
diff --git a/src/components/SchemaView/SchemaViewMain.vue b/src/components/SchemaView/SchemaViewMain.vue
index b85c5b9..5f64597 100644
--- a/src/components/SchemaView/SchemaViewMain.vue
+++ b/src/components/SchemaView/SchemaViewMain.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="wrapper"
-    class="schema-view__wrapper"
-  >
+  <div ref="wrapper" class="schema-view__wrapper">
     <div
       ref="toolsContainer"
       class="schema-view__tools_container"
@@ -52,11 +49,8 @@
       class="schema_graph__wrapper"
       :style="{ width: graphWidth + 'px' }"
     />
-    <div
-      ref="sidePanel"
-      class="schema_side-panel__wrapper"
-    >
-      <br>
+    <div ref="sidePanel" class="schema_side-panel__wrapper">
+      <br />
       <SchemaSidebarOverview
         v-if="schema"
         v-show="!hoveredLabel && clickedLabel === null"
@@ -73,15 +67,15 @@
       <SchemaSidebarReadOnlyView
         v-if="hoveredLabel !== null && (clickedLabel === null || isClickedReadOnly())"
         :schema="schema"
-        :hovered-label="hoveredLabel"
-        :hovered-is-node="hoveredIsNode"
+        :label="hoveredLabel"
+        :is-node="hoveredIsNode"
       />
       <!-- Read only view for clicked label (if it cannot be edited) -->
       <SchemaSidebarReadOnlyView
         v-if="clickedLabel !== null && hoveredLabel === null && isClickedReadOnly()"
         :schema="schema"
-        :hovered-label="clickedLabel"
-        :hovered-is-node="clickedIsNode"
+        :label="clickedLabel"
+        :is-node="clickedIsNode"
       />
       <!-- Edit view for clicked label -->
       <SchemaSidebarEditView