Tree view in infopane

Expand-contract tree icons

Buttons instead of plain characters for expand/contract tree

smojol-app/cobol-lekt/src/App.vue

@@ -292,4 +292,45 @@ export default {
 .function-button:active {
   transform: scale(0.98);
 }
+
+.clt, .clt ul, .clt li {
+  position: relative;
+}
+
+.clt ul {
+  list-style: none;
+  padding-left: 32px;
+}
+
+.clt li::before, .clt li::after {
+  content: "";
+  position: absolute;
+  left: -12px;
+}
+
+.clt li::before {
+  border-top: 1px solid #000;
+  top: 9px;
+  width: 8px;
+  height: 0;
+}
+
+.clt li::after {
+  border-left: 1px solid #000;
+  height: 100%;
+  width: 0px;
+  top: 2px;
+}
+
+.clt ul > li:last-child::after {
+  height: 8px;
+}
+
+.clickable-item {
+  font-size: 1.8em;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
 </style>

smojol-app/cobol-lekt/src/components/InfoPane.vue

@@ -1,13 +1,22 @@
 <script lang="ts">
 import {defineComponent} from 'vue';
+import JsonTree from "@/components/JsonTree.vue";
 
 export default defineComponent({
   name: "InfoPane",
+  components: {
+    JsonTree
+  },
   props: {
     nodeDetails: {
       type: [Object, null],
       required: true
     }
+  },
+  computed: {
+    nodeDetailsExist() {
+      return this.nodeDetails !== null;
+    }
   }
 });
 
@@ -16,15 +25,15 @@ export default defineComponent({
 <template>
   <div class="headered-pane" id="node-info-pane">
     <div class="pane-heading">Node Data</div>
-    <div id="node-details">
-      {{ nodeDetails }}
+    <div id="node-details" class="clt" style="overflow-x: auto">
+      <JsonTree entry-key="__ROOT__" v-if="nodeDetailsExist" :entry-value="nodeDetails"/>
     </div>
   </div>
 </template>
 
 <style scoped>
 #node-details {
   height: 100%;
-  font-family: Monaco,sans-serif;
+  font-family: Monaco, sans-serif;
 }
 </style>

smojol-app/cobol-lekt/src/components/JsonTree.vue

@@ -0,0 +1,66 @@
+<script lang="ts">
+
+import {defineComponent} from "vue";
+import {isPrimitive} from "@/ts/TypeUtils";
+
+export default defineComponent({
+      name: "JsonTree",
+      props: {
+        entryValue: {
+          type: Object,
+          required: true
+        },
+        entryKey: {
+          type: String,
+          required: true
+        }
+      },
+      data() {
+        return {expanded: true};
+      },
+      methods: {
+        isPrimitive,
+        toggleExpand() {
+          this.expanded = !this.expanded;
+        }
+      },
+      computed: {
+        isRoot() {
+          return this.entryKey === "__ROOT__";
+        }
+      }
+    }
+)
+</script>
+
+<template>
+  <li v-if="isPrimitive(entryValue)">
+    {{ entryKey }}: <strong>{{ entryValue }}</strong>
+  </li>
+  <div v-else-if="isRoot">
+    <span @click="toggleExpand">ROOT</span>
+    <ul v-if="expanded">
+      <JsonTree
+          v-for="key in Object.keys(entryValue)"
+          :key="key"
+          :entryKey="key"
+          :entryValue="entryValue[key]"
+      />
+    </ul>
+  </div>
+  <li v-else>
+    <button v-if="!expanded" @click="toggleExpand" class="clickable-item">&#8862;</button>
+    <button v-if="expanded" @click="toggleExpand" class="clickable-item">&#8863;</button>
+    <span>{{ entryKey }}</span>
+    <ul v-if="expanded">
+      <JsonTree
+          v-for="key in Object.keys(entryValue)"
+          :key="key"
+          :entryKey="key"
+          :entryValue="entryValue[key]"
+      />
+    </ul>
+  </li>
+</template>
+<style scoped>
+</style>

smojol-app/cobol-lekt/src/components/ProjectsView.vue

@@ -121,36 +121,4 @@ a {
   transform: scale(0.9); /* Scale down slightly on click */
 }
 
-.clt, .clt ul, .clt li {
-  position: relative;
-}
-
-.clt ul {
-  list-style: none;
-  padding-left: 32px;
-}
-
-.clt li::before, .clt li::after {
-  content: "";
-  position: absolute;
-  left: -12px;
-}
-
-.clt li::before {
-  border-top: 1px solid #000;
-  top: 9px;
-  width: 8px;
-  height: 0;
-}
-
-.clt li::after {
-  border-left: 1px solid #000;
-  height: 100%;
-  width: 0px;
-  top: 2px;
-}
-
-.clt ul > li:last-child::after {
-  height: 8px;
-}
 </style>

smojol-app/cobol-lekt/src/ts/TypeUtils.ts

@@ -0,0 +1,11 @@
+export function isPrimitive(value: unknown): boolean {
+    return (
+        value === null ||
+        typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean" ||
+        typeof value === "symbol" ||
+        typeof value === "bigint" ||
+        typeof value === "undefined"
+    );
+}