Refactor and optimizations

resources/js/pages/PerceptronViewer.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
-import { useEcho } from '@laravel/echo-vue';
 import {
     Chart as ChartJS,
     Title,
@@ -14,13 +13,8 @@ import {
 } from 'chart.js';
 import { computed, ref } from 'vue';
 import LinkHeader from '@/components/LinkHeader.vue';
-import type {
-    Dataset,
-    DatasetPoint,
-    InitializationMethod,
-    Iteration,
-    PerceptronType,
-} from '@/types/perceptron';
+import { usePerceptronTraining } from '@/composables/usePerceptronTraining';
+import type { Dataset, DatasetPoint, InitializationMethod, PerceptronType } from '@/types/perceptron';
 import IterationTable from '../components/IterationTable.vue';
 import PerceptronDecisionGraph from '../components/PerceptronDecisionGraph.vue';
 import PerceptronIterationsErrorsGraph from '../components/PerceptronIterationsErrorsGraph.vue';
@@ -86,74 +80,16 @@ const cleanedDataset = computed<
 const hiddenLayers = ref(3);
 const hiddenLayersNeurons = ref(3);
 const initializationMethod = ref<InitializationMethod>(props.type === 'multilayer' ? 'random' : 'zeros');
-
-console.log('Session ID:', props.sessionId);
-
-useEcho(
-    `${props.sessionId}-perceptron-training`,
-    'PerceptronTrainingIteration',
-    percpetronIteration,
-    [{}],
-    'public',
-);
-useEcho(
-    `${props.sessionId}-perceptron-training`,
-    'PerceptronTrainingEnded',
-    perceptronTrainingEnded,
-    [{}],
-    'public',
-);
-useEcho(
-    `${props.sessionId}-perceptron-training`,
-    'PerceptronInitialization',
-    perceptroninitialization,
-    [{}],
-    'public',
-);
-
-const iterations = ref<Iteration[]>([]);
-
-const trainingId  = ref<string>('');
-function percpetronIteration(data: any) {
-    console.log('Received perceptron iteration data:', data);
-    if (data.trainingId !== trainingId.value) {
-        console.warn(
-            `Received iteration for training ID ${data.trainingId}, but current training ID is ${trainingId.value}. Ignoring this iteration.`
-        );
-        return;
-    }
-    iterations.value.push(...data.iterations);
-}
-
-const trainingEnded = ref(false);
-const trainingEndReason = ref('');
-function perceptronTrainingEnded(data: any) {
-    console.log('Perceptron training ended:', data);
-    if (data.trainingId !== trainingId.value) {
-        console.warn(
-            `Received training ended event for training ID ${data.trainingId}, but current training ID is ${trainingId.value}. Ignoring this event.`
-        );
-        return;
-    }
-    trainingEnded.value = true;
-    trainingEndReason.value = data.reason;
-}
-
-const activationFunction = ref<string>('');
+const {
+    activationFunction,
+    iterations,
+    setTrainingId,
+    trainingEnded,
+    trainingEndReason,
+} = usePerceptronTraining(props.sessionId);
 const isRegression = computed(
-    () => props.type === 'multilayer' && activationFunction.value === 'linear',
+    () => (props.type === 'multilayer' || props.type === 'monolayer') && activationFunction.value === 'linear',
 );
-
-function perceptroninitialization(data: any) {
-    console.log('Perceptron training initialized:', data);
-    if (data.trainingId !== trainingId.value) {
-        console.warn(
-            `Received initialization event for training ID ${data.trainingId}, but current training ID is ${trainingId.value}. Ignoring this event.`
-        );
-        return;
-    }
-    activationFunction.value = data.activationFunction;
-}
 function getActivationFunction(type: string): (x: number) => number {
     switch (type) {
         case 'step':
@@ -169,12 +105,6 @@ function getActivationFunction(type: string): (x: number) => number {
     }
 }
 
-function resetTraining() {
-    iterations.value = [];
-    trainingEnded.value = false;
-    trainingEndReason.value = '';
-    activationFunction.value = '';
-}
 </script>
 
 <template>
@@ -197,11 +127,7 @@ function resetTraining() {
                         selectedDatasetName = newValue;
                     }
                 "
-                @update:training-id="
-                    (newValue) => {
-                        trainingId = newValue;
-                        resetTraining();
-                    }"
+                @update:training-id="setTrainingId"
             />
         <div
             class="align-items-start justify-content-center flex h-full min-h-dvh max-w-dvw"