From 1beb02b302639ae5ecfee3d417ed92734518652c Mon Sep 17 00:00:00 2001 From: Gergely Gulyas Date: Mon, 29 Jun 2026 11:07:35 +0200 Subject: [PATCH 1/2] [gui] Add optional chaining to statistics panels Panel is null before mounted, optional chaining makes sure it is only used if it becomes mounted thus non-null --- .../Report/ReportFilter/ReportFilter.vue | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/web/server/vue-cli/src/components/Report/ReportFilter/ReportFilter.vue b/web/server/vue-cli/src/components/Report/ReportFilter/ReportFilter.vue index 7836f9e4c7..7542ad168b 100644 --- a/web/server/vue-cli/src/components/Report/ReportFilter/ReportFilter.vue +++ b/web/server/vue-cli/src/components/Report/ReportFilter/ReportFilter.vue @@ -836,17 +836,17 @@ function renamePresetDialog() { function syncGroupPanels() { activeBaselinePanelId.value = - baselineRunFilterRef.value.panel || - baselineOpenReportsDateFilterRef.value.panel ? 0 : undefined; + baselineRunFilterRef.value?.panel || + baselineOpenReportsDateFilterRef.value?.panel ? 0 : undefined; activeCompareToPanelId.value = - comparedToRunFilterRef.value.panel || - comparedToOpenReportsDateFilterRef.value.panel || - comparedToDiffTypeFilterRef.value.panel ? 0 : undefined; + comparedToRunFilterRef.value?.panel || + comparedToOpenReportsDateFilterRef.value?.panel || + comparedToDiffTypeFilterRef.value?.panel ? 0 : undefined; activeDatePanelId.value = - detectionDateFilterRef.value.panel || - fixDateFilterRef.value.panel ? 0 : undefined; + detectionDateFilterRef.value?.panel || + fixDateFilterRef.value?.panel ? 0 : undefined; } // helper functions From 88358043115a3a0d687b9848ac2a57c36808b3f4 Mon Sep 17 00:00:00 2001 From: Gergely Gulyas Date: Mon, 29 Jun 2026 11:48:00 +0200 Subject: [PATCH 2/2] [gui] Unifi color gradient generation & make colors more readable This change unifies the color gradient generation based on value and makes the values on the components more readable. --- .../Report/ReportInfo/ReportInfo.vue | 9 +++-- .../components/Report/SelectSameReport.vue | 8 ++--- .../Report/SelectSameReportItem.vue | 33 ------------------- .../src/composables/useBugPathLenColor.js | 18 ---------- .../src/composables/useGradientColor.js | 16 +++++++++ web/server/vue-cli/src/views/Products.vue | 18 ++++------ web/server/vue-cli/src/views/Reports.vue | 13 +++++--- 7 files changed, 42 insertions(+), 73 deletions(-) delete mode 100644 web/server/vue-cli/src/components/Report/SelectSameReportItem.vue delete mode 100644 web/server/vue-cli/src/composables/useBugPathLenColor.js create mode 100644 web/server/vue-cli/src/composables/useGradientColor.js diff --git a/web/server/vue-cli/src/components/Report/ReportInfo/ReportInfo.vue b/web/server/vue-cli/src/components/Report/ReportInfo/ReportInfo.vue index 6e0d1ecd09..83994a6782 100644 --- a/web/server/vue-cli/src/components/Report/ReportInfo/ReportInfo.vue +++ b/web/server/vue-cli/src/components/Report/ReportInfo/ReportInfo.vue @@ -39,7 +39,10 @@ {{ value[key] }} - @@ -60,7 +63,7 @@ import { ReviewStatusIcon, SeverityIcon } from "@/components/Icons"; -import { useBugPathLenColor } from "@/composables/useBugPathLenColor"; +import { useGradientColor } from "@/composables/useGradientColor"; import { useDetectionStatus } from "@/composables/useDetectionStatus"; import { useReviewStatus } from "@/composables/useReviewStatus"; import { useSeverity } from "@/composables/useSeverity"; @@ -73,7 +76,7 @@ const props = defineProps({ const runName = ref(null); -const bugPathLenColor = useBugPathLenColor(); +const gradientColor = useGradientColor(); const detectionStatus = useDetectionStatus(); const reviewStatus = useReviewStatus(); const severity = useSeverity(); diff --git a/web/server/vue-cli/src/components/Report/SelectSameReport.vue b/web/server/vue-cli/src/components/Report/SelectSameReport.vue index 85dd3b3d94..c57fbb6275 100644 --- a/web/server/vue-cli/src/components/Report/SelectSameReport.vue +++ b/web/server/vue-cli/src/components/Report/SelectSameReport.vue @@ -31,7 +31,7 @@ props.report, () => { init(); diff --git a/web/server/vue-cli/src/components/Report/SelectSameReportItem.vue b/web/server/vue-cli/src/components/Report/SelectSameReportItem.vue deleted file mode 100644 index 9f115ed0bf..0000000000 --- a/web/server/vue-cli/src/components/Report/SelectSameReportItem.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - diff --git a/web/server/vue-cli/src/composables/useBugPathLenColor.js b/web/server/vue-cli/src/composables/useBugPathLenColor.js deleted file mode 100644 index e347ef5fc5..0000000000 --- a/web/server/vue-cli/src/composables/useBugPathLenColor.js +++ /dev/null @@ -1,18 +0,0 @@ -function generateRedGreenGradientColor(value, max, opacity) { - var red = (255 * value) / max; - var green = (255 * (max - value)) / max; - var blue = 0; - return "rgba(" + parseInt(red) + "," + parseInt(green) + "," + blue - + "," + opacity + ")"; -} - -export function useBugPathLenColor() { - const getBugPathLenColor = (length, limit = 20) => { - // This value says that bug path length with this value and above are - // difficult to understand. The background color of these bug path - // lengths will be red. - return generateRedGreenGradientColor(length, limit, 1); - }; - - return { getBugPathLenColor }; -} diff --git a/web/server/vue-cli/src/composables/useGradientColor.js b/web/server/vue-cli/src/composables/useGradientColor.js new file mode 100644 index 0000000000..26a0799f22 --- /dev/null +++ b/web/server/vue-cli/src/composables/useGradientColor.js @@ -0,0 +1,16 @@ +function generateRedGreenGradientColor(value, max, opacity) { + const ratio = Math.min(value / max, 1); + var red = Math.round(ratio * 220); + var green = Math.round((1 - ratio) * 180 + 40); + var blue = 40; + return "rgba(" + parseInt(red) + "," + parseInt(green) + "," + blue + + "," + opacity + ")"; +} + +export function useGradientColor() { + const getGradientColor = (length, limit = 20) => { + return generateRedGreenGradientColor(length, limit, 1); + }; + + return { getGradientColor }; +} \ No newline at end of file diff --git a/web/server/vue-cli/src/views/Products.vue b/web/server/vue-cli/src/views/Products.vue index d6206d6bba..5fd5b28e51 100644 --- a/web/server/vue-cli/src/views/Products.vue +++ b/web/server/vue-cli/src/views/Products.vue @@ -89,7 +89,10 @@ @@ -288,7 +293,7 @@ import { } from "@cc/report-server-types"; import { SET_REPORT_FILTER } from "@/store/mutations.type"; -import { useBugPathLenColor } from "@/composables/useBugPathLenColor"; +import { useGradientColor } from "@/composables/useGradientColor"; import { useDetectionStatus } from "@/composables/useDetectionStatus"; import { DetectionStatusIcon, @@ -306,7 +311,7 @@ const namespace = "report"; const route = useRoute(); const router = useRouter(); const store = useStore(); -const bugPathLenColor = useBugPathLenColor(); +const gradientColor = useGradientColor(); const detectionStatus = useDetectionStatus(); const itemsPerPageOptions = [ @@ -804,7 +809,7 @@ function prettifyDate(date) { } function getBugPathLenColor(length) { - return bugPathLenColor.getBugPathLenColor(length); + return gradientColor.getGradientColor(length); }