UI: better style groups, make header sticky

public/css/index-tailwind-output.css

@@ -3093,6 +3093,11 @@ input[type="range"].range-lg::-moz-range-thumb {
   border-right-width: 1px;
 }
 
+.border-x-2 {
+  border-left-width: 2px;
+  border-right-width: 2px;
+}
+
 .border-y {
   border-top-width: 1px;
   border-bottom-width: 1px;
@@ -5128,6 +5133,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.\[a-zA-Z0-9\:_-\] {
+  a-z-a--z0-9: -;
+}
+
 .\[a-zA-Z0-9\:_\] {
   a-z-a--z0-9: ;
 }
@@ -5286,6 +5295,11 @@ input[type="text"] {
   border-radius: 0.5rem;
 }
 
+.border-low-interaction {
+  border-color: var(--low-interaction-background-50);
+  border-style: dashed;
+}
+
 .border-region {
   border: 2px dashed var(--interactive-background);
   border-radius: 0.5rem;
@@ -5465,6 +5479,10 @@ textarea {
 h2.group {
   /* For flowbite accordions */
   margin: 0;
+  top: 0;
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 12;
 }
 
 .group button {

src/Models/ThemeConfig/LayerConfigDependencyGraph.ts

@@ -0,0 +1,95 @@
+import { LayerConfigJson } from "./Json/LayerConfigJson"
+
+export interface LevelInfo {
+    level: number,
+    ids: string[],
+    loop?: boolean
+}
+
+export class LayerConfigDependencyGraph {
+
+    /**
+     * Calculates the dependencies for the given layer
+     * @param layerconfig
+     */
+    public static getLayerImports(layerconfig: LayerConfigJson): string[] {
+        const defaultImports: ReadonlyArray<string> = ["questions", "filters","icons"]
+        if (defaultImports.indexOf(layerconfig.id) >= 0) {
+            return []
+        }
+        const importedTrs: string[] = []
+        for (const tr of layerconfig.tagRenderings ?? []) {
+            if (typeof tr === "string") {
+                importedTrs.push(tr)
+            } else if (tr["builtin"] !== undefined) {
+                const builtin = <string | string[]>tr["builtin"]
+                if (typeof builtin === "string") {
+                    importedTrs.push(builtin)
+                } else {
+                    importedTrs.push(...builtin)
+                }
+            }
+        }
+
+        const imports = new Set<string>(defaultImports)
+        for (const importValue of importedTrs) {
+            if (importValue.indexOf(".") < 0) {
+                continue
+            }
+            const [layer, _] = importValue.split(".")
+            imports.add(layer)
+        }
+        return Array.from(imports)
+    }
+
+
+    public static buildDirectDependencies(layers: LayerConfigJson[]) {
+        const dependsOn = new Map<string, string[]>()
+        for (const layer of layers) {
+            const layerDependsOn = LayerConfigDependencyGraph.getLayerImports(layer)
+            dependsOn.set(layer.id, layerDependsOn)
+        }
+        return dependsOn
+    }
+    public static buildLevels(dependsOn: Map<string, string[]>): LevelInfo[]{
+
+        const levels: LevelInfo[] = []
+        let levelIndex = 0
+        const seenIds = new Set<string>()
+        while (Array.from(dependsOn.keys()).length > 0) {
+            const currentLevel: LevelInfo = {
+                ids: <string[]>[],
+                level: levelIndex,
+            }
+            levelIndex++
+            levels.push(currentLevel)
+            for (const layerId of dependsOn.keys()) {
+                const dependencies = dependsOn.get(layerId)
+                if (dependencies.length === 0) {
+                    currentLevel.ids.push(layerId)
+                    seenIds.add(layerId)
+                }
+            }
+
+            const newDependsOn = new Map<string, string[]>()
+            for (const layerId of dependsOn.keys()) {
+                if (seenIds.has(layerId)) {
+                    continue
+                }
+                const dependencies = dependsOn.get(layerId)
+                newDependsOn.set(layerId, dependencies.filter(d => !seenIds.has(d)))
+            }
+            const oldSize = dependsOn.size
+            if(oldSize === newDependsOn.size){
+                // We detected a loop.
+                currentLevel.loop = true
+                const allLayers =Array.from(newDependsOn.keys())
+                currentLevel.ids.push(...allLayers )
+                allLayers.forEach(l => seenIds.add(l))
+            }
+            dependsOn = newDependsOn
+        }
+        return levels
+
+    }
+}

src/UI/Flowbite/AccordionSingle.svelte

@@ -3,7 +3,7 @@
 
   export let expanded = false
   export let noBorder = false
-  export let contentClass = noBorder ? "normal-background" : "low-interaction rounded-b p-2"
+  export let contentClass = noBorder ? "normal-background" : "low-interaction rounded-b p-2 border-x-2 border-b-2 border-dashed border-low-interaction"
   let defaultClass: string = undefined
   if (noBorder) {
     defaultClass = "unstyled w-full flex-grow"
@@ -11,7 +11,8 @@
 </script>
 
 <Accordion>
-  <AccordionItem open={expanded} paddingDefault="p-0" inactiveClass="text-black" {defaultClass}>
+  <AccordionItem open={expanded} paddingDefault="p-0" inactiveClass="text-black"
+                 {defaultClass}>
     <span slot="header" class={!noBorder ? "w-full p-2 text-base" : "w-full"}>
       <slot name="header" />
     </span>

src/index.css

@@ -165,6 +165,11 @@ input[type="text"] {
     border-radius: 0.5rem;
 }
 
+.border-low-interaction {
+    border-color: var(--low-interaction-background-50);
+    border-style: dashed;
+}
+
 .border-region {
     border: 2px dashed var(--interactive-background);
     border-radius: 0.5rem;
@@ -356,6 +361,9 @@ textarea {
 h2.group {
     /* For flowbite accordions */
     margin: 0;
+    top: 0;
+    position: sticky;
+    z-index: 12;
 }
 
 .group button {