From 95a1d73ec31d074e0ffc6a7c900a039c80640d7a Mon Sep 17 00:00:00 2001
From: Baghirov Feyruz <113597150+feyruzb@users.noreply.github.com>
Date: Fri, 5 Jun 2026 17:33:18 +0200
Subject: [PATCH 1/4] feature: add load multiple runs button

---
 .../components/Run/LoadMultipleRunsBtn.vue    | 28 +++++++++++++++++++
 .../src/components/Run/RunFilterToolbar.vue   | 20 +++++++++++--
 .../vue-cli/src/components/Run/index.js       |  4 ++-
 web/server/vue-cli/src/views/RunList.vue      |  8 +++---
 4 files changed, 53 insertions(+), 7 deletions(-)
 create mode 100644 web/server/vue-cli/src/components/Run/LoadMultipleRunsBtn.vue

diff --git a/web/server/vue-cli/src/components/Run/LoadMultipleRunsBtn.vue b/web/server/vue-cli/src/components/Run/LoadMultipleRunsBtn.vue
new file mode 100644
index 0000000000..651e166ad4
--- /dev/null
+++ b/web/server/vue-cli/src/components/Run/LoadMultipleRunsBtn.vue
@@ -0,0 +1,28 @@
+<template>
+  <v-btn
+    variant="outlined"
+    color="primary"
+    class="diff-runs-btn mr-2"
+    :to="{ name: 'reports',
+           query: {
+             ...defaultReportFilterValues,
+             ...reportFilterQuery
+           }
+    }"
+  >
+    <v-icon left>
+      mdi-vector-combine
+    </v-icon>
+    LOAD MULTIPLE RUNS
+  </v-btn>
+</template>
+
+<script setup>
+
+import { defaultReportFilterValues } from "@/components/Report/ReportFilter";
+
+defineProps({
+  reportFilterQuery: { type: Object, default: () => {} },
+});
+
+</script>
diff --git a/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue b/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
index e2cd3dbcce..e2ecc9b457 100644
--- a/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
+++ b/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
@@ -69,7 +69,7 @@
           label="History stored before..."
           prepend-inner-icon="mdi-calendar-arrow-left"
           variant="outlined"
-          density="compact" 
+          density="compact"
           clearable
         >
           <template #append-inner>
@@ -92,6 +92,11 @@
           @delete-complete="emit('delete-complete')"
         />
 
+        <LoadMultipleRunsBtn
+          :selected="selected"
+          :disabled="!enoughRunsSelected"
+          :report-filter-query="getSelectedRunsFilterQuery(props.selected)"
+        />
         <v-btn
           variant="outlined"
           color="primary"
@@ -153,7 +158,7 @@ import {
 import _ from "lodash";
 
 import DateTimePicker from "@/components/DateTimePicker";
-import { DeleteRunBtn } from "@/components/Run";
+import { DeleteRunBtn, LoadMultipleRunsBtn } from "@/components/Run";
 import TooltipHelpIcon from "@/components/TooltipHelpIcon";
 
 const props = defineProps({
@@ -306,4 +311,15 @@ function updateUrl(params) {
 function update() {
   emit("update");
 }
+
+function getSelectedRunsFilterQuery(selected) {
+  return {
+    run: selected.map(item => item.name)
+  };
+}
+
+const enoughRunsSelected = computed(() => {
+  return  props.selected.length >= 2;;
+});
+
 </script>
diff --git a/web/server/vue-cli/src/components/Run/index.js b/web/server/vue-cli/src/components/Run/index.js
index ad6117841d..1221ea09ea 100644
--- a/web/server/vue-cli/src/components/Run/index.js
+++ b/web/server/vue-cli/src/components/Run/index.js
@@ -6,10 +6,12 @@ import ExpandedRun from "./ExpandedRun";
 import RunDescription from "./RunDescription";
 import RunFilterToolbar from "./RunFilterToolbar";
 import RunNameColumn from "./RunNameColumn";
+import LoadMultipleRunsBtn from "./LoadMultipleRunsBtn.vue";
 
 export {
   AnalysisInfoBtn, AnalyzerStatisticsBtn,
   AnalyzerStatisticsDialog, DeleteRunBtn,
   ExpandedRun,
-  RunDescription, RunFilterToolbar, RunNameColumn
+  RunDescription, RunFilterToolbar, RunNameColumn,
+  LoadMultipleRunsBtn
 };
diff --git a/web/server/vue-cli/src/views/RunList.vue b/web/server/vue-cli/src/views/RunList.vue
index 871152057b..91426b11b5 100644
--- a/web/server/vue-cli/src/views/RunList.vue
+++ b/web/server/vue-cli/src/views/RunList.vue
@@ -196,10 +196,10 @@ const itemsPerPage = ref(
   itemsPerPageOptions[0].value
 );
 const sortBy = ref(
-  route.query["sort-by"] 
-    ? [ { 
-      key: route.query["sort-by"], 
-      order: route.query["sort-desc"] === "true" ? "desc" : "asc" 
+  route.query["sort-by"]
+    ? [ {
+      key: route.query["sort-by"],
+      order: route.query["sort-desc"] === "true" ? "desc" : "asc"
     } ]
     : [ { key: "name", order: "asc" } ]
 );

From 9d8e109aa3c080df22ea1a5dafad0c166f48a4b3 Mon Sep 17 00:00:00 2001
From: Baghirov Feyruz <113597150+feyruzb@users.noreply.github.com>
Date: Fri, 12 Jun 2026 17:32:15 +0200
Subject: [PATCH 2/4] refactor: change postion of buttons to improve UX

---
 .../components/Run/LoadMultipleRunsBtn.vue    |  2 +-
 .../src/components/Run/RunFilterToolbar.vue   | 49 ++++++++++++-------
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/web/server/vue-cli/src/components/Run/LoadMultipleRunsBtn.vue b/web/server/vue-cli/src/components/Run/LoadMultipleRunsBtn.vue
index 651e166ad4..b958d0f74e 100644
--- a/web/server/vue-cli/src/components/Run/LoadMultipleRunsBtn.vue
+++ b/web/server/vue-cli/src/components/Run/LoadMultipleRunsBtn.vue
@@ -13,7 +13,7 @@
     <v-icon left>
       mdi-vector-combine
     </v-icon>
-    LOAD MULTIPLE RUNS
+    LOAD SELECTED RUNS
   </v-btn>
 </template>
 
diff --git a/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue b/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
index e2ecc9b457..a5454167cf 100644
--- a/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
+++ b/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
@@ -81,22 +81,43 @@
           </template>
         </DateTimePicker>
       </v-col>
-
       <v-spacer />
-
       <v-col cols="auto" align="right">
+        <v-btn
+          icon
+          class="reload-runs-btn"
+          title="Reload runs"
+          color="primary"
+          @click="update"
+        >
+          <v-icon>mdi-refresh</v-icon>
+        </v-btn>
+      </v-col>
+    </v-row>
+    <template #extension>
+      <div
+        class="mb-4
+          mt-3
+          ga-3
+          d-flex"
+        align="left"
+      >
+        <LoadMultipleRunsBtn
+          :selected="selected"
+          :disabled="!enoughRunsSelected"
+          :report-filter-query="getSelectedRunsFilterQuery(props.selected)"
+        />
         <DeleteRunBtn
           :selected="selected"
           variant="outlined"
           @on-confirm="update"
           @delete-complete="emit('delete-complete')"
         />
+      </div>
 
-        <LoadMultipleRunsBtn
-          :selected="selected"
-          :disabled="!enoughRunsSelected"
-          :report-filter-query="getSelectedRunsFilterQuery(props.selected)"
-        />
+      <v-spacer />
+
+      <div align="right">
         <v-btn
           variant="outlined"
           color="primary"
@@ -123,18 +144,8 @@
             </ul>
           </tooltip-help-icon>
         </v-btn>
-
-        <v-btn
-          icon
-          class="reload-runs-btn"
-          title="Reload runs"
-          color="primary"
-          @click="update"
-        >
-          <v-icon>mdi-refresh</v-icon>
-        </v-btn>
-      </v-col>
-    </v-row>
+      </div>
+    </template>
   </v-toolbar>
 </template>
 

From 06a09f34abfc1accdd829d999c114ab216cec157 Mon Sep 17 00:00:00 2001
From: Baghirov Feyruz <113597150+feyruzb@users.noreply.github.com>
Date: Fri, 19 Jun 2026 15:11:31 +0200
Subject: [PATCH 3/4] refactor(review): remove unnecessary divs

---
 .../src/components/Run/RunFilterToolbar.vue   | 84 ++++++++-----------
 1 file changed, 37 insertions(+), 47 deletions(-)

diff --git a/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue b/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
index a5454167cf..2f7ca67153 100644
--- a/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
+++ b/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
@@ -95,56 +95,46 @@
       </v-col>
     </v-row>
     <template #extension>
-      <div
-        class="mb-4
-          mt-3
-          ga-3
-          d-flex"
-        align="left"
-      >
-        <LoadMultipleRunsBtn
-          :selected="selected"
-          :disabled="!enoughRunsSelected"
-          :report-filter-query="getSelectedRunsFilterQuery(props.selected)"
-        />
-        <DeleteRunBtn
-          :selected="selected"
-          variant="outlined"
-          @on-confirm="update"
-          @delete-complete="emit('delete-complete')"
-        />
-      </div>
+      <LoadMultipleRunsBtn
+        :selected="selected"
+        :disabled="!enoughRunsSelected"
+        :report-filter-query="getSelectedRunsFilterQuery(props.selected)"
+      />
+      <DeleteRunBtn
+        :selected="selected"
+        variant="outlined"
+        @on-confirm="update"
+        @delete-complete="emit('delete-complete')"
+      />
 
       <v-spacer />
 
-      <div align="right">
-        <v-btn
-          variant="outlined"
-          color="primary"
-          class="diff-runs-btn mr-2"
-          :to="diffTargetRoute"
-          :disabled="isDiffBtnDisabled"
-        >
-          <v-icon left>
-            mdi-select-compare
-          </v-icon>
-          Diff
-          <tooltip-help-icon>
-            Compare the set of <i>outstanding reports</i> in two run (or tag)
-            sets.<br>
-            A report is outstanding if <b> all of the following is true</b>:
-            <ul>
-              <li>
-                its detection status is <i>new</i>, <i>reopened</i>, or
-                <i>unresolved</i>,
-              </li>
-              <li>
-                its review status is <i>unreviewed</i> or <i>confirmed</i>.
-              </li>
-            </ul>
-          </tooltip-help-icon>
-        </v-btn>
-      </div>
+      <v-btn
+        variant="outlined"
+        color="primary"
+        class="diff-runs-btn mr-2"
+        :to="diffTargetRoute"
+        :disabled="isDiffBtnDisabled"
+      >
+        <v-icon left>
+          mdi-select-compare
+        </v-icon>
+        Diff
+        <tooltip-help-icon>
+          Compare the set of <i>outstanding reports</i> in two run (or tag)
+          sets.<br>
+          A report is outstanding if <b> all of the following is true</b>:
+          <ul>
+            <li>
+              its detection status is <i>new</i>, <i>reopened</i>, or
+              <i>unresolved</i>,
+            </li>
+            <li>
+              its review status is <i>unreviewed</i> or <i>confirmed</i>.
+            </li>
+          </ul>
+        </tooltip-help-icon>
+      </v-btn>
     </template>
   </v-toolbar>
 </template>

From 78a3691c689bc044c62506ac0e706be8a1871841 Mon Sep 17 00:00:00 2001
From: Baghirov Feyruz <113597150+feyruzb@users.noreply.github.com>
Date: Tue, 23 Jun 2026 15:42:18 +0200
Subject: [PATCH 4/4] refactor: change the code to be more resistant according
 to suggestion

---
 .../src/components/Run/RunFilterToolbar.vue   | 80 ++++++++++---------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue b/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
index 2f7ca67153..8f16942ad3 100644
--- a/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
+++ b/web/server/vue-cli/src/components/Run/RunFilterToolbar.vue
@@ -95,46 +95,50 @@
       </v-col>
     </v-row>
     <template #extension>
-      <LoadMultipleRunsBtn
-        :selected="selected"
-        :disabled="!enoughRunsSelected"
-        :report-filter-query="getSelectedRunsFilterQuery(props.selected)"
-      />
-      <DeleteRunBtn
-        :selected="selected"
-        variant="outlined"
-        @on-confirm="update"
-        @delete-complete="emit('delete-complete')"
-      />
+      <div
+        class="d-flex justify-center align-center w-100"
+      >
+        <LoadMultipleRunsBtn
+          :selected="selected"
+          :disabled="!enoughRunsSelected"
+          :report-filter-query="getSelectedRunsFilterQuery(props.selected)"
+        />
+        <DeleteRunBtn
+          :selected="selected"
+          variant="outlined"
+          @on-confirm="update"
+          @delete-complete="emit('delete-complete')"
+        />
 
-      <v-spacer />
+        <v-spacer />
 
-      <v-btn
-        variant="outlined"
-        color="primary"
-        class="diff-runs-btn mr-2"
-        :to="diffTargetRoute"
-        :disabled="isDiffBtnDisabled"
-      >
-        <v-icon left>
-          mdi-select-compare
-        </v-icon>
-        Diff
-        <tooltip-help-icon>
-          Compare the set of <i>outstanding reports</i> in two run (or tag)
-          sets.<br>
-          A report is outstanding if <b> all of the following is true</b>:
-          <ul>
-            <li>
-              its detection status is <i>new</i>, <i>reopened</i>, or
-              <i>unresolved</i>,
-            </li>
-            <li>
-              its review status is <i>unreviewed</i> or <i>confirmed</i>.
-            </li>
-          </ul>
-        </tooltip-help-icon>
-      </v-btn>
+        <v-btn
+          variant="outlined"
+          color="primary"
+          class="diff-runs-btn mr-2"
+          :to="diffTargetRoute"
+          :disabled="isDiffBtnDisabled"
+        >
+          <v-icon left>
+            mdi-select-compare
+          </v-icon>
+          Diff
+          <tooltip-help-icon>
+            Compare the set of <i>outstanding reports</i> in two run (or tag)
+            sets.<br>
+            A report is outstanding if <b> all of the following is true</b>:
+            <ul>
+              <li>
+                its detection status is <i>new</i>, <i>reopened</i>, or
+                <i>unresolved</i>,
+              </li>
+              <li>
+                its review status is <i>unreviewed</i> or <i>confirmed</i>.
+              </li>
+            </ul>
+          </tooltip-help-icon>
+        </v-btn>
+      </div>
     </template>
   </v-toolbar>
 </template>