Merge pull request #1625 from nymtech/407-ne-filters-granularity

NE: 407 filters granularity

explorer/src/components/Filters/Filters.tsx

@@ -47,6 +47,7 @@ const FilterItem = ({
       scale={scale}
       min={min}
       max={max}
+      valueLabelFormat={(val: number) => (val === 100 && id === 'stakeSaturation' ? '>100' : val)}
     />
   </Box>
 );

explorer/src/components/Filters/filterSchema.ts

@@ -26,32 +26,19 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({
     label: 'Stake saturation (%)',
     id: EnumFilterKey.stakeSaturation,
     value: [0, upperSaturationValue || 100],
-    marks: [
-      { label: '0', value: 0 },
-
-      {
-        label: '10',
-        value: 10,
-      },
-
-      {
-        label: '50',
-        value: 50,
-      },
-      { label: '90', value: 90 },
-
-      {
-        label: upperSaturationValue ? `${upperSaturationValue}` : '100',
-        value: upperSaturationValue || 100,
-      },
-    ],
-    max: upperSaturationValue,
+    isSmooth: true,
+    marks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, upperSaturationValue || 100].map((value) => ({
+      value: value < 100 ? value : 100,
+      label: value < 100 ? value : '>100',
+    })),
+    max: 100,
     tooltipInfo: "Select nodes with <100% saturation. Any additional stake above 100% saturation won't get rewards",
   },
   routingScore: {
     label: 'Routing score (%)',
     id: EnumFilterKey.routingScore,
     value: [0, 100],
+    isSmooth: true,
     marks: [
       { label: '0', value: 0 },
       { label: '10', value: 10 },