From a038b1d623f24c9c022ee805d96169436113926f Mon Sep 17 00:00:00 2001 From: Romain Dorgueil Date: Fri, 14 Jun 2024 13:08:54 +0200 Subject: [PATCH] feat: tuning filter --- .../Components/Facets/RangeSliderFacet.tsx | 7 +-- .../Containers/FiltersSidebar.tsx | 27 +++++---- .../FiltersSidebar.test.tsx.snap | 54 +++++++++--------- .../src/ui/Components/Slider/RangeSlider.tsx | 44 ++++++++------ .../slider--default-linux.png | Bin 12042 -> 12130 bytes 5 files changed, 72 insertions(+), 60 deletions(-) diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/Facets/RangeSliderFacet.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/Facets/RangeSliderFacet.tsx index 9ad5664d..ce4c7111 100644 --- a/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/Facets/RangeSliderFacet.tsx +++ b/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/Facets/RangeSliderFacet.tsx @@ -2,7 +2,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline" import { useState } from "react" import { MinMaxFilter } from "Types/filters" -import { RangeSlider, Mark } from "ui/Components/Slider/RangeSlider.tsx" +import { Mark, RangeSlider } from "ui/Components/Slider/RangeSlider.tsx" import { H5 } from "ui/Components/Typography" import { FacetInnerLightButton } from "./FacetInnerLightButton.tsx" @@ -10,7 +10,6 @@ import { FacetInnerLightButton } from "./FacetInnerLightButton.tsx" interface RangeSliderFacetProps { title: string name: string - type: "rangeSlider" defaultOpen?: boolean values?: MinMaxFilter setValues: (value?: MinMaxFilter) => void @@ -50,10 +49,10 @@ export function RangeSliderFacet({ min={min} max={max} step={10} - defaultValue={values} + defaultValue={values ?? {}} onPointerUp={setValues} marks={marks} - thumbSize="8px" + thumbSize="16px" /> diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/Containers/FiltersSidebar.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/Containers/FiltersSidebar.tsx index 467769b5..89f004c0 100644 --- a/harp_apps/dashboard/frontend/src/Pages/Transactions/Containers/FiltersSidebar.tsx +++ b/harp_apps/dashboard/frontend/src/Pages/Transactions/Containers/FiltersSidebar.tsx @@ -2,7 +2,7 @@ import { useLocation, useNavigate, useSearchParams } from "react-router-dom" import { apdexScale } from "Components/Badges/constants" import { useTransactionsFiltersQuery } from "Domain/Transactions" -import { Filters, ArrayFilter, MinMaxFilter } from "Types/filters" +import { ArrayFilter, Filters, MinMaxFilter } from "Types/filters" import { Pane } from "ui/Components/Pane" import { Facet, RangeSliderFacet } from "../Components/Facets" @@ -19,10 +19,12 @@ export function FiltersSidebar({ filters }: FiltersSidebarProps) { const filtersQuery = useTransactionsFiltersQuery() // marks and setup for range slider for tpdex - const marks = [...apdexScale] - .reverse() - .map((rating, index) => ({ value: index * 10, label: rating.label, className: rating.className })) - const markValueToThreshold = new Map([...apdexScale].reverse().map((rating, index) => [index * 10, rating.threshold])) + const marks = [...apdexScale].map((rating, index) => ({ + value: index * 10, + label: rating.label, + className: rating.className, + })) + const markValueToThreshold = new Map([...apdexScale].map((rating, index) => [index * 10, rating.threshold])) const maxKey = Math.max(...Array.from(markValueToThreshold.keys())) const minKey = Math.min(...Array.from(markValueToThreshold.keys())) markValueToThreshold.set(maxKey, undefined) @@ -30,7 +32,9 @@ export function FiltersSidebar({ filters }: FiltersSidebarProps) { const thresholdToMarkValue = new Map() markValueToThreshold.forEach((value, key) => { - if (value != undefined) thresholdToMarkValue.set(value, key) + if (value != undefined) { + thresholdToMarkValue.set(value, key) + } }) const _createSetFilterFor = (name: string) => (value: ArrayFilter) => { @@ -53,8 +57,8 @@ export function FiltersSidebar({ filters }: FiltersSidebarProps) { } const setTpdexValues = (value: MinMaxFilter | undefined) => { - const minValue = markValueToThreshold.get(value?.min ?? -1) - const maxValue = markValueToThreshold.get(value?.max ?? -1) + const maxValue = markValueToThreshold.get(value?.min ?? -1) + const minValue = markValueToThreshold.get(value?.max ?? -1) if (minValue != null) { searchParams.set("tpdexmin", minValue.toString()) @@ -130,14 +134,13 @@ export function FiltersSidebar({ filters }: FiltersSidebarProps) { {filtersQuery.isSuccess ? ( - Performance Index + Performances Index