Restructure frontend svelte file src folder

- Goal: Dependency structure mirrored in file structure

web/frontend/src/Analysis.root.svelte

@@ -6,7 +6,6 @@
  -->
 
 <script>
-  import { init, convert2uplot } from "./utils.js";
   import { getContext, onMount } from "svelte";
   import {
     queryStore,
@@ -22,14 +21,18 @@
     Table,
     Icon,
   } from "@sveltestrap/sveltestrap";
-  import Filters from "./filters/Filters.svelte";
-  import PlotSelection from "./PlotSelection.svelte";
-  import Histogram from "./plots/Histogram.svelte";
-  import Pie, { colors } from "./plots/Pie.svelte";
-  import { binsFromFootprint } from "./utils.js";
-  import ScatterPlot from "./plots/Scatter.svelte";
-  import PlotTable from "./PlotTable.svelte";
-  import RooflineHeatmap from "./plots/RooflineHeatmap.svelte";
+  import {
+    init,
+    convert2uplot,
+    binsFromFootprint,
+  } from "./generic/utils.js";
+  import PlotSelection from "./analysis/PlotSelection.svelte.js";
+  import Filters from "./generic/Filters.svelte";
+  import PlotTable from "./generic/PlotTable.svelte";
+  import Histogram from "./generic/plots/Histogram.svelte";
+  import Pie, { colors } from "./generic/plots/Pie.svelte";
+  import ScatterPlot from "./generic/plots/Scatter.svelte";
+  import RooflineHeatmap from "./generic/plots/RooflineHeatmap.svelte";
 
   const { query: initq } = init();
 

web/frontend/src/Config.root.svelte

@@ -9,7 +9,6 @@
 
 <script>
   import { Card, CardHeader, CardTitle } from "@sveltestrap/sveltestrap";
-
   import UserSettings from "./config/UserSettings.svelte";
   import AdminSettings from "./config/AdminSettings.svelte";
 

web/frontend/src/Header.svelte

@@ -20,8 +20,8 @@
     DropdownToggle,
     DropdownMenu,
   } from "@sveltestrap/sveltestrap";
-  import NavbarLinks from "./NavbarLinks.svelte";
-  import NavbarTools from "./NavbarTools.svelte";
+  import NavbarLinks from "./header/NavbarLinks.svelte";
+  import NavbarTools from "./header/NavbarTools.svelte";
 
   export let username;
   export let authlevel;

web/frontend/src/Job.root.svelte

@@ -9,12 +9,6 @@
  -->
 
 <script>
-  import {
-    init,
-    groupByScope,
-    checkMetricDisabled,
-    transformDataForRoofline,
-  } from "./utils.js";
   import { 
     queryStore,
     gql,
@@ -33,16 +27,22 @@
     Button,
     Icon,
   } from "@sveltestrap/sveltestrap";
-  import PlotTable from "./PlotTable.svelte";
-  import Metric from "./Metric.svelte";
-  import Polar from "./plots/Polar.svelte";
-  import Roofline from "./plots/Roofline.svelte";
-  import JobInfo from "./joblist/JobInfo.svelte";
-  import TagManagement from "./TagManagement.svelte";
-  import MetricSelection from "./MetricSelection.svelte";
-  import StatsTable from "./StatsTable.svelte";
-  import JobFootprint from "./JobFootprint.svelte";
   import { getContext } from "svelte";
+  import {
+    init,
+    groupByScope,
+    checkMetricDisabled,
+    transformDataForRoofline,
+  } from "./generic/utils.js";
+  import Metric from "./job/Metric.svelte.js";
+  import TagManagement from "./job/TagManagement.svelte.js";
+  import StatsTable from "./job/StatsTable.svelte.js";
+  import JobFootprint from "./generic/helper/JobFootprint.svelte";
+  import PlotTable from "./generic/PlotTable.svelte";
+  import Polar from "./generic/plots/Polar.svelte";
+  import Roofline from "./generic/plots/Roofline.svelte";
+  import JobInfo from "./generic/joblist/JobInfo.svelte";
+  import MetricSelection from "./generic/select/MetricSelection.svelte";
 
   export let dbid;
   export let authlevel;

web/frontend/src/Jobs.root.svelte

@@ -9,7 +9,6 @@
  
  <script>
   import { onMount, getContext } from "svelte";
-  import { init } from "./utils.js";
   import {
     Row,
     Col,
@@ -18,12 +17,13 @@
     Card,
     Spinner,
   } from "@sveltestrap/sveltestrap";
-  import Filters from "./filters/Filters.svelte";
-  import JobList from "./joblist/JobList.svelte";
-  import Refresher from "./joblist/Refresher.svelte";
-  import Sorting from "./joblist/SortSelection.svelte";
-  import MetricSelection from "./MetricSelection.svelte";
-  import TextFilter from "./filters/TextFilter.svelte";
+  import { init } from "./generic/utils.js";
+  import Filters from "./generic/Filters.svelte";
+  import JobList from "./generic/JobList.svelte";
+  import TextFilter from "./generic/helper/TextFilter.svelte";
+  import Refresher from "./generic/helper/Refresher.svelte";
+  import Sorting from "./generic/select/SortSelection.svelte";
+  import MetricSelection from "./generic/select/MetricSelection.svelte";
 
   const { query: initq } = init();
 

web/frontend/src/List.root.svelte

@@ -8,7 +8,6 @@
 
 <script>
   import { onMount } from "svelte";
-  import { init, scramble, scrambleNames } from "./utils.js";
   import {
     Row,
     Col,
@@ -20,8 +19,17 @@
     InputGroup,
     Input,
   } from "@sveltestrap/sveltestrap";
-  import Filters from "./filters/Filters.svelte";
-  import { queryStore, gql, getContextClient } from "@urql/svelte";
+  import {
+    queryStore,
+    gql,
+    getContextClient,
+  } from "@urql/svelte";
+  import {
+    init,
+    scramble,
+    scrambleNames,
+  } from "./generic/utils.js";
+  import Filters from "./generic/Filters.svelte";
 
   const {} = init();
 

web/frontend/src/Node.root.svelte

@@ -9,7 +9,7 @@
  -->
 
 <script>
-  import { init, checkMetricDisabled } from "./utils.js";
+  import { getContext } from "svelte";
   import {
     Row,
     Col,
@@ -19,12 +19,19 @@
     Spinner,
     Card,
   } from "@sveltestrap/sveltestrap";
-  import { queryStore, gql, getContextClient } from "@urql/svelte";
-  import TimeSelection from "./filters/TimeSelection.svelte";
-  import Refresher from "./joblist/Refresher.svelte";
-  import PlotTable from "./PlotTable.svelte";
-  import MetricPlot from "./plots/MetricPlot.svelte";
-  import { getContext } from "svelte";
+  import {
+    queryStore,
+    gql,
+    getContextClient,
+  } from "@urql/svelte";
+  import {
+    init,
+    checkMetricDisabled,
+  } from "./utils.js";
+  import PlotTable from "./generic/PlotTable.svelte";
+  import MetricPlot from "./generic/plots/MetricPlot.svelte";
+  import TimeSelection from "./generic/select/TimeSelection.svelte";
+  import Refresher from "./generic/helper/Refresher.svelte";
 
   export let cluster;
   export let hostname;

web/frontend/src/Status.root.svelte

@@ -7,10 +7,6 @@
  
  <script>
   import { getContext } from "svelte";
-  import Refresher from "./joblist/Refresher.svelte";
-  import Roofline from "./plots/Roofline.svelte";
-  import Pie, { colors } from "./plots/Pie.svelte";
-  import Histogram from "./plots/Histogram.svelte";
   import {
     Row,
     Col,
@@ -24,20 +20,24 @@
     Icon,
     Button,
   } from "@sveltestrap/sveltestrap";
-  import {
-    init,
-    convert2uplot,
-    transformPerNodeDataForRoofline,
-  } from "./utils.js";
-  import { scaleNumbers } from "./units.js";
   import {
     queryStore,
     gql,
     getContextClient,
     mutationStore,
   } from "@urql/svelte";
-  import PlotTable from "./PlotTable.svelte";
-  import HistogramSelection from "./HistogramSelection.svelte";
+  import {
+    init,
+    convert2uplot,
+    transformPerNodeDataForRoofline,
+  } from "./generic/utils.js";
+  import { scaleNumbers } from "./generic/units.js";
+  import PlotTable from "./generic/PlotTable.svelte";
+  import Roofline from "./generic/plots/Roofline.svelte";
+  import Pie, { colors } from "./generic/plots/Pie.svelte";
+  import Histogram from "./generic/plots/Histogram.svelte";
+  import Refresher from "./generic/helper/Refresher.svelte";
+  import HistogramSelection from "./generic/select/HistogramSelection.svelte";
 
   const { query: initq } = init();
   const ccconfig = getContext("cc-config");

web/frontend/src/Systems.root.svelte

@@ -8,8 +8,7 @@
  -->
 
 <script>
-  import { init, checkMetricDisabled } from "./utils.js";
-  import Refresher from "./joblist/Refresher.svelte";
+  import { getContext } from "svelte";
   import {
     Row,
     Col,
@@ -20,11 +19,19 @@
     Spinner,
     Card,
   } from "@sveltestrap/sveltestrap";
-  import { queryStore, gql, getContextClient } from "@urql/svelte";
-  import TimeSelection from "./filters/TimeSelection.svelte";
-  import PlotTable from "./PlotTable.svelte";
-  import MetricPlot from "./plots/MetricPlot.svelte";
-  import { getContext } from "svelte";
+  import {
+    queryStore,
+    gql,
+    getContextClient,
+  } from "@urql/svelte";
+  import {
+    init,
+    checkMetricDisabled,
+  } from "./generic/utils.js";
+  import PlotTable from "./generic/PlotTable.svelte";
+  import MetricPlot from "./generic/plots/MetricPlot.svelte";
+  import TimeSelection from "./generic/select/TimeSelection.svelte";
+  import Refresher from "./generic/helper/Refresher.svelte";
 
   export let cluster;
   export let from = null;

web/frontend/src/User.root.svelte

@@ -8,7 +8,6 @@
 
 <script>
   import { onMount, getContext } from "svelte";
-  import { init, convert2uplot, scramble, scrambleNames } from "./utils.js";
   import {
     Table,
     Row,
@@ -18,16 +17,26 @@
     Card,
     Spinner,
   } from "@sveltestrap/sveltestrap";
-  import { queryStore, gql, getContextClient } from "@urql/svelte";
-  import Filters from "./filters/Filters.svelte";
-  import TextFilter from "./filters/TextFilter.svelte"
-  import JobList from "./joblist/JobList.svelte";
-  import Sorting from "./joblist/SortSelection.svelte";
-  import Refresher from "./joblist/Refresher.svelte";
-  import Histogram from "./plots/Histogram.svelte";
-  import MetricSelection from "./MetricSelection.svelte";
-  import HistogramSelection from "./HistogramSelection.svelte";
-  import PlotTable from "./PlotTable.svelte";
+  import {
+    queryStore,
+    gql,
+    getContextClient,
+  } from "@urql/svelte";
+  import {
+    init,
+    convert2uplot,
+    scramble,
+    scrambleNames,
+  } from "./generic/utils.js";
+  import JobList from "./generic/JobList.svelte";
+  import Filters from "./generic/Filters.svelte";
+  import PlotTable from "./generic/PlotTable.svelte";
+  import Histogram from "./generic/plots/Histogram.svelte";
+  import MetricSelection from "./generic/select/MetricSelection.svelte";
+  import HistogramSelection from "./generic/select/HistogramSelection.svelte";
+  import Sorting from "./generic/select/SortSelection.svelte";
+  import TextFilter from "./generic/helper/TextFilter.svelte"
+  import Refresher from "./generic/helper/Refresher.svelte";
 
   const { query: initq } = init();
 

web/frontend/src/config/admin/ShowUsersRow.svelte

@@ -8,7 +8,7 @@
 
 <script>
   import { Button } from "@sveltestrap/sveltestrap";
-  import { fetchJwt } from "../../utils.js"
+  import { fetchJwt } from "../../generic/utils.js"
 
   export let user;
 

web/frontend/src/config/user/UserOptions.svelte

@@ -23,7 +23,7 @@
     } from "@sveltestrap/sveltestrap";
     import { fade } from "svelte/transition";
     import { createEventDispatcher } from 'svelte';
-    import { fetchJwt } from "../../utils.js";
+    import { fetchJwt } from "../../generic/utils.js";
 
     export let config;
     export let message;

web/frontend/src/generic/Filters.svelte

@@ -15,6 +15,7 @@
  -->
 
 <script>
+  import { createEventDispatcher } from "svelte";
   import {
     Row,
     Col,
@@ -24,16 +25,15 @@
     ButtonDropdown,
     Icon,
   } from "@sveltestrap/sveltestrap";
-  import { createEventDispatcher } from "svelte";
-  import Info from "./InfoBox.svelte";
-  import Cluster from "./Cluster.svelte";
-  import JobStates, { allJobStates } from "./JobStates.svelte";
-  import StartTime from "./StartTime.svelte";
-  import Tags from "./Tags.svelte";
-  import Tag from "../Tag.svelte";
-  import Duration from "./Duration.svelte";
-  import Resources from "./Resources.svelte";
-  import Statistics from "./Stats.svelte";
+  import Tag from "./helper/Tag.svelte";
+  import Info from "./filters/InfoBox.svelte";
+  import Cluster from "./filters/Cluster.svelte";
+  import JobStates, { allJobStates } from "./filters/JobStates.svelte";
+  import StartTime from "./filters/StartTime.svelte";
+  import Tags from "./filters/Tags.svelte";
+  import Duration from "./filters/Duration.svelte";
+  import Resources from "./filters/Resources.svelte";
+  import Statistics from "./filters/Stats.svelte";
 
   const dispatch = createEventDispatcher();
 

web/frontend/src/generic/JobList.svelte

@@ -14,17 +14,17 @@
  -->
 
 <script>
+  import { getContext } from "svelte";
   import {
     queryStore,
     gql,
     getContextClient,
     mutationStore,
   } from "@urql/svelte";
-  import { getContext } from "svelte";
   import { Row, Table, Card, Spinner } from "@sveltestrap/sveltestrap";
-  import Pagination from "./Pagination.svelte";
-  import JobListRow from "./Row.svelte";
-  import { stickyHeader } from "../utils.js";
+  import { stickyHeader } from "./utils.js";
+  import Pagination from "./joblist/Pagination.svelte";
+  import JobListRow from "./joblist/JobListRow.svelte";
 
   const ccconfig = getContext("cc-config"),
     initialized = getContext("initialized"),

web/frontend/src/generic/filters/Resources.svelte

@@ -25,7 +25,7 @@
     ModalHeader,
     ModalFooter,
   } from "@sveltestrap/sveltestrap";
-  import DoubleRangeSlider from "./DoubleRangeSlider.svelte";
+  import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";
 
   const clusters = getContext("clusters"),
     initialized = getContext("initialized"),

web/frontend/src/generic/filters/Stats.svelte

@@ -20,7 +20,7 @@
     ModalHeader,
     ModalFooter,
   } from "@sveltestrap/sveltestrap";
-  import DoubleRangeSlider from "./DoubleRangeSlider.svelte";
+  import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";
 
   const initialized = getContext("initialized"),
     dispatch = createEventDispatcher();

web/frontend/src/generic/filters/Tags.svelte

@@ -24,7 +24,7 @@
     Icon,
   } from "@sveltestrap/sveltestrap";
   import { fuzzySearchTags } from "../utils.js";
-  import Tag from "../Tag.svelte";
+  import Tag from "../helper/Tag.svelte";
 
   const allTags = getContext("tags"),
     initialized = getContext("initialized"),

web/frontend/src/generic/joblist/JobInfo.svelte

@@ -7,9 +7,9 @@
  -->
 
 <script>
-  import Tag from "../Tag.svelte";
   import { Badge, Icon } from "@sveltestrap/sveltestrap";
   import { scrambleNames, scramble } from "../utils.js";
+  import Tag from "../helper/Tag.svelte";
 
   export let job;
   export let jobTags = job.tags;

web/frontend/src/generic/joblist/JobListRow.svelte

@@ -14,10 +14,10 @@
   import { queryStore, gql, getContextClient } from "@urql/svelte";
   import { getContext } from "svelte";
   import { Card, Spinner } from "@sveltestrap/sveltestrap";
-  import MetricPlot from "../plots/MetricPlot.svelte";
-  import JobInfo from "./JobInfo.svelte";
-  import JobFootprint from "../JobFootprint.svelte";
   import { maxScope, checkMetricDisabled } from "../utils.js";
+  import JobInfo from "./JobInfo.svelte";
+  import MetricPlot from "../plots/MetricPlot.svelte";
+  import JobFootprint from "../helper/JobFootprint.svelte";
 
   export let job;
   export let metrics;

web/frontend/src/generic/select/DoubleRangeSlider.svelte

@@ -4,7 +4,7 @@ Originally created by Michael Keller (https://github.com/mhkeller/svelte-double-
 Changes: remove dependency, text inputs, configurable value ranges, on:change event
 -->
 <!-- 
-	@component Helper component to display range selections via min and max double-sliders
+	@component Selector component to display range selections via min and max double-sliders
 
 	Properties:
 	- min:          Number

web/frontend/src/generic/select/HistogramSelection.svelte

@@ -8,6 +8,7 @@
  -->
 
 <script>
+  import { getContext } from "svelte";
   import {
     Modal,
     ModalBody,
@@ -17,7 +18,6 @@
     ListGroup,
     ListGroupItem,
   } from "@sveltestrap/sveltestrap";
-  import { getContext } from "svelte";
   import { gql, getContextClient, mutationStore } from "@urql/svelte";
 
   export let cluster;

web/frontend/src/generic/select/MetricSelection.svelte

@@ -12,6 +12,7 @@
  -->
 
 <script>
+  import { getContext } from "svelte";
   import {
     Modal,
     ModalBody,
@@ -20,7 +21,6 @@
     Button,
     ListGroup,
   } from "@sveltestrap/sveltestrap";
-  import { getContext } from "svelte";
   import { gql, getContextClient, mutationStore } from "@urql/svelte";
 
   export let metrics;

web/frontend/src/generic/select/SortSelection.svelte

@@ -7,6 +7,7 @@
  -->
 
 <script>
+  import { getContext } from "svelte";
   import {
     Icon,
     Button,
@@ -17,7 +18,6 @@
     ModalHeader,
     ModalFooter,
   } from "@sveltestrap/sveltestrap";
-  import { getContext } from "svelte";
   import { getSortItems } from "../utils.js";
 
   export let isOpen = false;

web/frontend/src/generic/select/TimeSelection.svelte

@@ -1,5 +1,5 @@
 <!--
-    @component Filter sub-component for selecting specified real time ranges for data cutoff; used in systems and nodes view
+    @component Selector for specified real time ranges for data cutoff; used in systems and nodes view
 
     Properties:
     - `from Date`: The datetime to start data display from
@@ -12,13 +12,13 @@
  -->
 
 <script>
+  import { createEventDispatcher } from "svelte";
   import {
     Icon,
     Input,
     InputGroup,
     InputGroupText,
   } from "@sveltestrap/sveltestrap";
-  import { createEventDispatcher } from "svelte";
 
   export let from;
   export let to;

web/frontend/src/job/Metric.svelte

@@ -14,14 +14,14 @@
 
 <script>
   import { createEventDispatcher } from "svelte";
-  import Timeseries from "./plots/MetricPlot.svelte";
   import {
     InputGroup,
     InputGroupText,
     Spinner,
     Card,
   } from "@sveltestrap/sveltestrap";
-  import { minScope } from "./utils";
+  import { minScope } from "../generic/utils";
+  import Timeseries from "../generic/plots/MetricPlot.svelte";
 
   export let job;
   export let metricName;

web/frontend/src/job/StatsTable.svelte

@@ -15,9 +15,9 @@
     InputGroupText,
     Icon,
   } from "@sveltestrap/sveltestrap";
-  import MetricSelection from "./MetricSelection.svelte";
+  import { maxScope } from "../generic/utils.js";
   import StatsTableEntry from "./StatsTableEntry.svelte";
-  import { maxScope } from "./utils.js";
+  import MetricSelection from "../generic/Select/MetricSelection.svelte";
 
   export let job;
   export let jobMetrics;

web/frontend/src/job/TagManagement.svelte

@@ -20,8 +20,8 @@
     ModalFooter,
     Alert,
   } from "@sveltestrap/sveltestrap";
-  import { fuzzySearchTags } from "./utils.js";
-  import Tag from "./Tag.svelte";
+  import { fuzzySearchTags } from "../generic/utils.js";
+  import Tag from "../generic/helper/Tag.svelte";
 
   export let job;
   export let jobTags = job.tags;