further optical enhancments for calculation dump

src/frontend/src/components/UI/JsonTreeViewer.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="tree-container" ref="treeContainer">
-    <h2 class="sub-header">Json Dump</h2>
     <tree-node
         v-if="parsedData"
         :data="parsedData"
@@ -25,11 +24,10 @@ export default {
     data: {
       type: [Object, Array, String],
       default: null
-    }
     },
-  data() {
-    return {
-      allExpanded: false
+    allExpanded: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -68,11 +66,9 @@ export default {
 
 <style scoped>
 .tree-container {
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 12px;
-  padding: 20px;
+
   backdrop-filter: blur(10px);
-  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
+
   overflow-y: auto;
   /* Remove any fixed height constraints */
   min-height: fit-content;

src/frontend/src/pages/CalcualtionDump.vue

@@ -1,5 +1,16 @@
 <template>
-<json-tree-viewer :data="dump"></json-tree-viewer>
+    <h2 class="page-header">Dump of calculation #{{ $route.params.id }}</h2>
+
+    <box>
+  <div class="container">
+    <div>
+      <basic-button variant="secondary" :show-icon="false" @click="expand = !expand">{{ expand === true ? 'Collapse all items' : 'Expand all items' }}</basic-button>
+    </div>
+    <json-tree-viewer :data="dump" :all-expanded="expand"></json-tree-viewer>
+  </div>
+
+    </box>
+
 
 </template>
 
@@ -9,10 +20,13 @@
 import performRequest from "@/backend.js";
 import {config} from "@/config.js";
 import JsonTreeViewer from "@/components/UI/JsonTreeViewer.vue";
+import ToggleSwitch from "@/components/UI/ToogleSwitch.vue";
+import BasicButton from "@/components/UI/BasicButton.vue";
+import Box from "@/components/UI/Box.vue";
 
 export default {
   name: "CalculationDump",
-  components: {JsonTreeViewer},
+  components: {Box, BasicButton, ToggleSwitch, JsonTreeViewer},
   async created() {
 
     const resp = await performRequest(null, "GET", `${config.backendUrl}/error/dump/${this.$route.params.id}`, null);
@@ -21,7 +35,8 @@ export default {
   },
   data() {
     return {
-      dump: null
+      dump: null,
+      expand: false
     }
   }
 
@@ -29,5 +44,10 @@ export default {
 </script>
 
 <style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 
 </style>