Disabled training page tabs when knn model is disabled

src/pages/training/KnnModelTrainingPageView.svelte

@@ -61,7 +61,7 @@
   {#if $filters.length == 2}
     <KnnModelGraph />
   {:else}
-    <div class="m-auto">
+    <div class="max-w-[450px] flex flex-col justify-center">
       <p class="max-w-80 text-md font-bold text-center">
         {$t('menu.trainer.knn.onlyTwoFilters')}
       </p>

src/pages/training/TrainingPageModelView.svelte

@@ -10,11 +10,16 @@
   import KnnModelTrainingPageView from './KnnModelTrainingPageView.svelte';
   import ModelRegistry from '../../script/domain/ModelRegistry';
   import NeuralNetworkTrainingPageView from './NeuralNetworkTrainingPageView.svelte';
+  import { Feature, hasFeature } from '../../script/FeatureToggles';
+
+  const showFilterList = hasFeature(Feature.KNN_MODEL);
 </script>
 
 <div class="flex flex-col h-full justify-center">
   <div class="flex flex-row p-2">
-    <FiltersList />
+    {#if showFilterList}
+      <FiltersList />
+    {/if}
     {#if $selectedModel.id === ModelRegistry.KNN.id}
       <KnnModelTrainingPageView />
     {:else if $selectedModel.id === ModelRegistry.NeuralNetwork.id}

src/pages/training/TrainingPageTabs.svelte

@@ -4,9 +4,18 @@
   SPDX-License-Identifier: MIT
  -->
 <script lang="ts">
+  import StandardButton from '../../components/buttons/StandardButton.svelte';
   import ControlBar from '../../components/control-bar/ControlBar.svelte';
+  import { navigate, Paths } from '../../router/paths';
   import ModelRegistry from '../../script/domain/ModelRegistry';
+  import { Feature, hasFeature } from '../../script/FeatureToggles';
   import { selectedModel } from '../../script/stores/uiStore';
+  import { t } from '../../i18n';
+
+  const showTabBar = hasFeature(Feature.KNN_MODEL);
+  if (!showTabBar) {
+    $selectedModel = ModelRegistry.NeuralNetwork;
+  }
 
   const onSelectNeuralNetwork = () => {
     $selectedModel = ModelRegistry.NeuralNetwork;
@@ -19,25 +28,43 @@
   };
 </script>
 
-<ControlBar expanded shadows={false}>
-  <div class="flex flex-row flex-grow h-full">
-    <!--Left controlbar-->
-    <div
-      on:click={onSelectNeuralNetwork}
-      class:to-secondary={isSelected('NN')}
-      class:to-primary={!isSelected('NN')}
-      class:shadow-md={!isSelected('NN')}
-      class="flex flex-col border-l-2 border-b-2 border-secondary justify-center cursor-pointer h-full self-center flex-1 bg-gradient-to-r via-primary from-primary text-secondarytext">
-      <p class="text-center font-bold">Neural Network</p>
-    </div>
-    <!--Right controlbar-->
-    <div
-      on:click={onSelectKnn}
-      class:to-secondary={isSelected('KNN')}
-      class:to-primary={!isSelected('KNN')}
-      class:shadow-md={!isSelected('KNN')}
-      class="flex border-r-2 border-b-2 border-secondary flex-col justify-center cursor-pointer h-full self-center flex-1 bg-gradient-to-l via-primary from-primary text-secondarytext">
-      <p class="text-center font-bold">KNN Model</p>
+{#if showTabBar}
+  <ControlBar expanded shadows={false}>
+    <div class="flex flex-row flex-grow h-full">
+      <!--Left controlbar-->
+      <div
+        on:click={onSelectNeuralNetwork}
+        class:to-secondary={isSelected('NN')}
+        class:to-primary={!isSelected('NN')}
+        class:shadow-md={!isSelected('NN')}
+        class="flex flex-col border-l-2 border-b-2 border-secondary justify-center cursor-pointer h-full self-center flex-1 bg-gradient-to-r via-primary from-primary text-secondarytext">
+        <p class="text-center font-bold">Neural Network</p>
+      </div>
+      <!--Right controlbar-->
+      <div
+        on:click={onSelectKnn}
+        class:to-secondary={isSelected('KNN')}
+        class:to-primary={!isSelected('KNN')}
+        class:shadow-md={!isSelected('KNN')}
+        class="flex border-r-2 border-b-2 border-secondary flex-col justify-center cursor-pointer h-full self-center flex-1 bg-gradient-to-l via-primary from-primary text-secondarytext">
+        <p class="text-center font-bold">KNN Model</p>
+      </div>
     </div>
-  </div>
-</ControlBar>
+  </ControlBar>
+{:else}
+  <ControlBar>
+    <div class="min-h-12" />
+    <StandardButton
+      fillOnHover
+      small
+      outlined
+      bold={false}
+      shadows={false}
+      color={'primary'}
+      onClick={() => {
+        navigate(Paths.FILTERS);
+      }}>
+      {$t('content.trainer.controlbar.filters')}
+    </StandardButton>
+  </ControlBar>
+{/if}

src/script/utils/graphUtils.ts

@@ -123,8 +123,3 @@ export const distanceBetween = (point1: Point3D, point2: Point3D): number => {
 
   return Math.sqrt(squaredDistance);
 };
-
-export type LossTrainingIteration = {
-  loss: number;
-  epoch: number;
-};