Final hierarchy window

frontend/src/components/unification/hierarchy/HierarchyEdit.vue

@@ -559,7 +559,7 @@ export default HierarchyEdit;
             @change-frame="changePreviewedUnifiedFrameId"
             :forceRefresh="internalForceRefresh" />
       </div>
-      <div v-if="right_pane_tab === 'hierarchy'" class="overflow-hidden center" style="height: calc(100% - 43px); width: calc(80%)">
+      <div v-if="right_pane_tab === 'hierarchy'" class="px-0 pt-0 pb-0 overflow-auto">
           <hierarchy-element :node="createHierarchyTree()" :spacing_elem_type="'none'"/>
       </div>
       <div :class="right_pane_tab !== 'notes' && 'd-none'" id="notes-component"></div>

frontend/src/components/unification/hierarchy/HierarchyElement.vue

@@ -38,11 +38,11 @@ export default {
         },
         getSpacingElem() {
             if(this.spacing_elem_type === "std") {
-                return "├→";
+                return "│ ├→ │";
             } else if(this.spacing_elem_type === "top_corner") {
-                return "┌→";
+                return "        ┌→ │ │";
             } else if(this.spacing_elem_type === "down_corner") {
-                return "└→";
+                return "│ │ └→";
             } else {
                 return "";
             }
@@ -94,23 +94,30 @@ export default {
 
 
 <template>
-    <div :style="nodeMargin">
+    <div :style="nodeMargin" style="height: 100%">
         <div v-if="hasHypyronyms" v-show="showHypyronyms">
             <hierarchy-element
                     v-for="(child, index) in node.hypyronyms"
                     :key="child.id"
                     :node="child"
                     :spacing_elem_type='index === 0 ? "top_corner" : "std"'
-                    :spacing="spacing + 10"
+                    :spacing="spacing + 40"
             />
         </div>
         <div show class="d-flex justify-content-between mb-1">
             <div class="row">
-                <div class="col" v-html="getSpacingElem"/>
+                <div class="col" style="max-width: 10px" v-html="getSpacingElem"/>
                 <div class="col">
-
-                    <div align="left" style="display: table;">
-                        <div class="unifiedFrame mt-3" id="hierarchy-unified-frame-title" v-html="node.unified_frame.title"></div>
+                    <div class="row">
+                        <div class="col cursor-pointer" style="text-align: center; font-size: large"><span
+                                v-if="hasHypyronyms"
+                                :class="toggleChildrenIcon"
+                                @click="toggleHypyronyms"
+                                @keypress="toggleHypyronyms">&#9650;</span></div>
+                    </div>
+                    <div class="row">
+                        <div class="col" align="left" style="display: table;">
+                            <div class="unifiedFrame" id="hierarchy-unified-frame-title" v-html="node.unified_frame.title"></div>
                             <table id="hierarchy-unified-frame" class="m-0 table-borderless border border-secondary text-dark frame active">
                                 <tbody>
                                 <tr>
@@ -157,18 +164,15 @@ export default {
                                 </tbody>
                             </table>
                         </div>
-                    {{ node.label }}
                     </div>
-                <div class="col"><span
+                    <div class="row align-content-center">
+                        <div class="col cursor-pointer" style="text-align: center; font-size: large"><span
                                 v-if="hasHyponyms"
                                 :class="toggleChildrenIcon"
                                 @click="toggleHyponyms"
-                    @keypress="toggleHyponyms">V</span></div>
-                <div class="col"><span
-                    v-if="hasHypyronyms"
-                    :class="toggleChildrenIcon"
-                    @click="toggleHypyronyms"
-                    @keypress="toggleHypyronyms">A</span></div>
+                                @keypress="toggleHyponyms">&#9660;</span></div>
+                    </div>
+                </div>
             </div>
         </div>
         <div v-if="hasHyponyms" v-show="showHyponyms">
@@ -177,7 +181,7 @@ export default {
                     :key="child.id"
                     :node="child"
                     :spacing_elem_type='index === node.hyponyms.length - 1 ? "down_corner" : "std"'
-                    :spacing="spacing + 10"
+                    :spacing="spacing + 40"
             />
         </div>
     </div>