Chart added to genetic algo.

package.json

@@ -26,15 +26,16 @@
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.3",
     "browser-process": "^0.0.1",
-    "genetic-search-multiprocess": "^1.1.1",
+    "genetic-search-multiprocess": "^1.2.1",
     "itertools-ts": "^1.27.1",
     "mdb-vue-ui-kit": "^4.1.1",
     "multiprocess-pool": "^1.4.5",
     "node-fetch": "^3.3.2",
     "pinia": "^2.0.28",
     "smoothie": "^1.36.1",
     "unplugin-vue-macros": "^2.7.9",
-    "vue": "^3.4.15"
+    "vue": "^3.4.15",
+    "vue3-charts": "^1.1.33"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",

src/web/components/config-editor/components/sections/genetic-section.vue

@@ -3,12 +3,13 @@
 import { useGeneticStore } from "@/web/store/genetic";
 import { round } from "@/lib/math";
 import InputHeader from "@/web/components/base/input-header.vue";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { MDBAccordion, MDBAccordionItem } from "mdb-vue-ui-kit";
+import ChartStatic from "@/web/components/config-editor/components/widgets/chart-static.vue";
 
 const geneticStore = useGeneticStore();
-
 const activeAccordionItem = ref('collapse-macro');
+const fitnessChartData = computed(() => geneticStore.populationFitness.map((y, x) => ({x, y})));
 
 </script>
 
@@ -28,14 +29,17 @@ const activeAccordionItem = ref('collapse-macro');
       <div class="progress-bar progress-bar-striped progress-bar-animated" :style="{ width: geneticStore.progress + '%'}"></div>
     </div>
   </div>
-
   <div class="summary">
     <table class="table" style="width: 100%">
       <tbody>
         <tr v-if="geneticStore.generation">
           <td width="50%">Generation</td>
           <td>{{ geneticStore.generation }}</td>
         </tr>
+        <tr v-if="geneticStore.populationSummary">
+          <td>Stagnation counter</td>
+          <td>{{ geneticStore.populationSummary!.stagnationCounter }}</td>
+        </tr>
         <tr v-if="geneticStore.bestGenome">
           <td>Best genome ID</td>
           <td>{{ geneticStore.bestGenome!.id }}</td>
@@ -55,6 +59,10 @@ const activeAccordionItem = ref('collapse-macro');
       </tbody>
     </table>
   </div>
+  <div class="genetic-charts-container" v-if="fitnessChartData.length">
+    <h6>Population fitness</h6>
+    <chart-static :data="fitnessChartData" />
+  </div>
   <MDBAccordion v-model="activeAccordionItem">
     <MDBAccordionItem headerTitle="Macro config" collapseId="collapse-macro">
       <div class="config-block">
@@ -155,4 +163,13 @@ const activeAccordionItem = ref('collapse-macro');
   width: 100%;
 }
 
+.genetic-charts-container {
+  margin-top: 30px;
+  margin-bottom: 30px;
+
+  h6 {
+    margin-bottom: 15px;
+  }
+}
+
 </style>

src/web/components/config-editor/components/sections/summary-section.vue

@@ -3,8 +3,8 @@
 import { ref, type Ref } from 'vue';
 import ConfigSection from '@/web/components/config-editor/components/containers/config-section.vue';
 import { useSimulationStore } from '@/web/store/simulation';
-import type { TimeSeriesConfig } from "@/web/components/config-editor/components/widgets/chart.vue";
-import Chart from "@/web/components/config-editor/components/widgets/chart.vue";
+import type { TimeSeriesConfig } from "@/web/components/config-editor/components/widgets/chart-flow.vue";
+import ChartFlow from "@/web/components/config-editor/components/widgets/chart-flow.vue";
 import Flag from '@/web/components/inputs/flag.vue';
 
 const { getCurrentSimulation } = useSimulationStore();
@@ -255,7 +255,7 @@ const timeSeriesConfigMean: ChartConfig[] = [
   <config-section>
     <template #body>
       <div v-for="config in timeSeriesConfigBase">
-        <chart
+        <chart-flow
           :id="config.id"
           :name="config.name"
           :data="config.data"
@@ -269,7 +269,7 @@ const timeSeriesConfigMean: ChartConfig[] = [
         <flag title="Mean Mode" v-model="showMean" />
       </div>
       <div v-for="config in timeSeriesConfigCount" v-show="!showMean">
-        <chart
+        <chart-flow
           :id="config.id"
           :name="config.name"
           :data="config.data"
@@ -280,7 +280,7 @@ const timeSeriesConfigMean: ChartConfig[] = [
         />
       </div>
       <div v-for="config in timeSeriesConfigMean" v-show="showMean">
-        <chart
+        <chart-flow
           :id="config.id"
           :name="config.name"
           :data="config.data"

src/web/components/config-editor/components/widgets/chart-static.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+
+import { ref } from "vue";
+import { Chart, Line, Responsive } from 'vue3-charts';
+import type { ChartAxis } from "vue3-charts/dist/types";
+
+defineProps<{
+  data: { x: number, y: number }[],
+}>()
+
+const axis = ref<ChartAxis>({
+  primary: {
+    domain: ["dataMin", "dataMax*1.05"],
+    type: "linear",
+    ticks: 8,
+  },
+  secondary: {
+    domain: ["dataMin", "dataMax*1.1"],
+    type: "linear",
+    ticks: 8,
+  },
+});
+
+</script>
+
+<template>
+  <Responsive class="w-full">
+    <template #main="{ width }">
+      <Chart
+        :axis="axis"
+        :size="{ width, height: 200 }"
+        :margin="{ top: 0, right: 0, bottom: 0, left: 0 }"
+        :data="data"
+        direction="horizontal"
+      >
+        <template #layers>
+          <Line :dataKeys="['x', 'y']" type="monotone" :hide-dot="true" />
+        </template>
+      </Chart>
+    </template>
+  </Responsive>
+</template>

src/web/store/genetic.ts

@@ -6,6 +6,7 @@ import type {
   GeneticSearchInterface,
   GeneticSearchStrategyConfig,
   Population,
+  GenomeStats,
 } from "genetic-search";
 import type {
   ClusterizationTaskConfig,
@@ -72,15 +73,12 @@ export const useGeneticStore = defineStore("genetic", () => {
   const population = ref<Population<SimulationGenome> | undefined>();
   const populationSize = ref<number>(0);
   const populationSummary = ref<PopulationSummary | undefined>();
+  const populationStats = ref<GenomeStats[]>([]);
 
   const progress = computed(() => macroConfig.value.populationSize
     ? (genomesHandled.value / populationSize.value * 100)
     : 0);
 
-  const populationStats = computed(() => (population.value ?? [])
-    .filter((x) => x.stats !== undefined)
-    .map((x) => x.stats!));
-
   const populationFitness = computed(() => populationStats.value
     .map((x) => x.fitness));
 
@@ -157,6 +155,7 @@ export const useGeneticStore = defineStore("genetic", () => {
     generation.value = gen;
     bestGenome.value = algoRaw!.bestGenome;
     population.value = algoRaw!.population;
+    populationStats.value = algoRaw!.generationStats;
     populationSummary.value = algoRaw!.getPopulationSummary(4);
     genomesHandled.value = 0;