add foldable set hierarchy

frontend/website/src/views/SetLayoutView.vue

@@ -11,6 +11,7 @@ const route = useRoute()
 const setLayoutStore = useSetLayoutStore()
 const { layout, loading, error, notFound } = storeToRefs(setLayoutStore)
 const currentSetId = ref<number | null>(null)
+const expandedElementIds = ref(new Set<number>())
 const EMPTY_MESSAGE = 'This set does not have any elements yet.'
 
 watch(
@@ -19,6 +20,7 @@ watch(
     const rawSetId = Array.isArray(setIdParameter) ? setIdParameter[0] : setIdParameter
     const setId = Number(rawSetId)
     currentSetId.value = setId
+    expandedElementIds.value = new Set<number>()
     await setLayoutStore.fetchSetLayout(setId)
   },
   { immediate: true },
@@ -29,8 +31,21 @@ async function retry(): Promise<void> {
     return
   }
 
+  expandedElementIds.value = new Set<number>()
   await setLayoutStore.fetchSetLayout(currentSetId.value)
 }
+
+function toggleElement(elementId: number): void {
+  const nextExpandedElementIds = new Set(expandedElementIds.value)
+
+  if (nextExpandedElementIds.has(elementId)) {
+    nextExpandedElementIds.delete(elementId)
+  } else {
+    nextExpandedElementIds.add(elementId)
+  }
+
+  expandedElementIds.value = nextExpandedElementIds
+}
 </script>
 
 <template>
@@ -81,7 +96,12 @@ async function retry(): Promise<void> {
         ></p>
 
         <div v-else class="layout-outline">
-          <ElementTree :nodes="layout.elements" :label="`${layout.set.name} element layout`" />
+          <ElementTree
+            :nodes="layout.elements"
+            :expanded-element-ids="expandedElementIds"
+            :label="`${layout.set.name} element layout`"
+            @toggle-element="toggleElement"
+          />
         </div>
       </template>
     </section>