feat: Add folder option to chart creator

frontend/src/report/report-page/encoding/Encoding.svelte

@@ -2,7 +2,6 @@
 	import { report, reports } from "../../../stores";
 	import SlicesEncodingDropdown from "./SlicesEncodingDropdown.svelte";
 	import SlicesEncodingMultiChoice from "./SlicesEncodingMultiChoice.svelte";
-	import SecondSlicesEncoding from "./SecondSlicesEncoding.svelte";
 	import MetricsEncodingDropdown from "./MetricsEncodingDropdown.svelte";
 	import MetricsEncodingMultiChoice from "./MetricsEncodingMultiChoice.svelte";
 	import ModelsEncodingDropdown from "./ModelsEncodingDropdown.svelte";
@@ -216,7 +215,7 @@
 				<FixDimension value={"y"} />
 			{/if}
 			{#if chartType === ChartType.HEATMAP && parameters.yEncoding === "slices"}
-				<SecondSlicesEncoding />
+				<SlicesEncodingMultiChoice secondSlice={true} />
 			{:else}
 				<svelte:component
 					this={fixed_dimension === "y"

frontend/src/report/report-page/encoding/MetricsEncodingDropdown.svelte

@@ -24,7 +24,7 @@
 		bind:value
 		{options}
 		on:change={(e) => {
-			if (e.detail.label !== $reports[$report].metrics[0]) {
+			if (e.detail && e.detail.label !== $reports[$report].metrics[0]) {
 				let tmpMetrics = $reports[$report].metrics;
 				if (tmpMetrics.includes(e.detail.label)) {
 					tmpMetrics.splice(tmpMetrics.indexOf(e.detail.label), 1);

frontend/src/report/report-page/encoding/ModelsEncodingDropdown.svelte

@@ -24,7 +24,7 @@
 		bind:value
 		{options}
 		on:change={(e) => {
-			if (e.detail.label !== $reports[$report].models[0]) {
+			if (e.detail && e.detail.label !== $reports[$report].models[0]) {
 				let tmpModels = $reports[$report].models;
 				if (tmpModels.includes(e.detail.label)) {
 					tmpModels.splice(tmpModels.indexOf(e.detail.label), 1);

frontend/src/report/report-page/encoding/SlicesEncodingDropdown.svelte

@@ -1,40 +1,75 @@
 <script lang="ts">
-	import { report, reports, slices } from "../../../stores";
+	import { folders, report, reports, slices } from "../../../stores";
 	import Svelecte from "svelecte";
+
 	let options = [];
 	let value = 0;
+	let folder = "-- Select Folder --";
+	let refresh = 0;
+
+	function initialOptions(optionsArray: string[]) {
+		optionsArray.forEach((s, i) => {
+			options[i] = { value: i, label: s };
+		});
+	}
+
 	function initialSettings() {
 		// restore default first value when fixing dimension with empty options
 		if ($reports[$report].slices.length === 0) {
 			$reports[$report].slices = [...Array.from($slices.keys()).slice(0, 1)];
 		}
 		// initial options & values
-		[...$slices.keys()].forEach((s, i) => {
-			options[i] = { value: i, label: s };
-		});
+		initialOptions([...$slices.keys()]);
 		value = options.find((o) => o.label === $reports[$report].slices[0]).value;
 	}
+
 	$: initialSettings();
 </script>
 
 <div class="parameters">
 	<h4 class="select-label">&nbsp;</h4>
 	<Svelecte
 		style="width: 280px; flex:none;"
-		bind:value
-		{options}
+		bind:value={folder}
+		options={["-- Select Folder --", ...$folders.values()]}
+		labelAsValue
+		placeholder="Select Folder..."
 		on:change={(e) => {
-			if (e.detail.label !== $reports[$report].slices[0]) {
-				let tmpSlices = $reports[$report].slices;
-				if (tmpSlices.includes(e.detail.label)) {
-					tmpSlices.splice(tmpSlices.indexOf(e.detail.label), 1);
-				}
-				tmpSlices.unshift(e.detail.label);
-				$reports[$report].slices = tmpSlices;
+			if (e.detail && e.detail.label !== "-- Select Folder --") {
+				options = [];
+				let slicesInFolder = [...$slices.values()]
+					.filter((s) => s.folder === e.detail.label)
+					.map((s) => s.sliceName);
+				initialOptions(slicesInFolder);
+			} else {
+				// show all slices if not selected any folder
+				initialOptions([...$slices.keys()]);
 			}
+			value = 0;
+			refresh++;
 		}} />
 </div>
 
+{#key refresh}
+	<div class="parameters">
+		<h4 class="select-label">&nbsp;</h4>
+		<Svelecte
+			style="width: 280px; flex:none;"
+			bind:value
+			{options}
+			on:change={(e) => {
+				if (e.detail && e.detail.label !== $reports[$report].slices[0]) {
+					let tmpSlices = $reports[$report].slices;
+					if (tmpSlices.includes(e.detail.label)) {
+						tmpSlices.splice(tmpSlices.indexOf(e.detail.label), 1);
+					}
+					tmpSlices.unshift(e.detail.label);
+					$reports[$report].slices = tmpSlices;
+				}
+			}} />
+	</div>
+{/key}
+
 <style>
 	.parameters {
 		display: flex;

frontend/src/report/report-page/encoding/SlicesEncodingMultiChoice.svelte

@@ -1,19 +1,34 @@
 <script lang="ts">
-	import { report, reports, slices } from "../../../stores";
+	import { folders, report, reports, slices } from "../../../stores";
 	import Svelecte from "svelecte";
 	import { dndzone } from "svelte-dnd-action";
 
+	export let secondSlice = false;
+
 	let options = [];
 	let value = [];
+	let folder = "-- Select Folder --";
+	let refresh = 0;
 
 	// initial options & values
 	[...$slices.keys()].forEach((s, i) => {
 		options[i] = { value: i, label: s };
 	});
-	$reports[$report].slices.forEach((s, i) => {
+	let initialSlices = secondSlice
+		? $reports[$report].parameters.secondSlices
+		: $reports[$report].slices;
+	initialSlices.forEach((s, i) => {
 		value[i] = options.find((o) => o.label === s).value;
 	});
 
+	function updateReportSlices(slices) {
+		if (secondSlice) {
+			$reports[$report].parameters.secondSlices = slices;
+		} else {
+			$reports[$report].slices = slices;
+		}
+	}
+
 	function updateDragOrder(val) {
 		// check if all elements are numbers (dndzone's place holder)
 		if (!val.some((i) => !Number.isInteger(i))) {
@@ -22,7 +37,7 @@
 			val.forEach((v, i) => {
 				tmp[i] = options[v].label;
 			});
-			$reports[$report].slices = tmp;
+			updateReportSlices(tmp);
 		}
 	}
 
@@ -33,20 +48,45 @@
 	<h4 class="select-label">&nbsp;</h4>
 	<Svelecte
 		style="width: 280px; flex:none;"
-		bind:value
-		{options}
-		{dndzone}
-		multiple
+		bind:value={folder}
+		options={["-- Select Folder --", ...$folders.values()]}
+		labelAsValue
+		placeholder="Select Folder..."
 		on:change={(e) => {
-			let s = [];
-			e.detail.forEach((ed) => {
-				s.push(ed.label);
-			});
-			$reports[$report].slices = s;
-		}}
-		placeholder="Select Slices..." />
+			if (e.detail && e.detail.label !== "-- Select Folder --") {
+				let sls = [...$slices.values()]
+					.filter((s) => s.folder === e.detail.label)
+					.map((s) => s.sliceName);
+				value = [];
+				sls.forEach((s, i) => {
+					value[i] = options.find((o) => o.label === s).value;
+				});
+				updateReportSlices(sls);
+				refresh++;
+			}
+		}} />
 </div>
 
+{#key refresh}
+	<div class="parameters">
+		<h4 class="select-label">&nbsp;</h4>
+		<Svelecte
+			style="width: 280px; flex:none;"
+			bind:value
+			{options}
+			{dndzone}
+			multiple
+			on:change={(e) => {
+				let s = [];
+				e.detail.forEach((ed) => {
+					s.push(ed.label);
+				});
+				updateReportSlices(s);
+			}}
+			placeholder="Select Slices..." />
+	</div>
+{/key}
+
 <style>
 	.parameters {
 		display: flex;