datastake-daf 0.6.185 → 0.6.187

package/.env

@@ -0,0 +1,8 @@
+REACT_APP_API_KEY=
+REACT_APP_AUTH_DOMAIN=
+REACT_APP_PROJECT_ID=
+REACT_APP_STORAGE_BUCKED=
+REACT_APP_SENDER_ID=
+REACT_APP_APP_ID=
+REACT_APP_MEASUREMENT_ID=
+REACT_APP_VAPID_KEY=

package/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+	"cSpell.words": ["cukura"],
+	"files.autoSave": "afterDelay",
+	"editor.wordWrap": "on",
+	"editor.autoClosingBrackets": "always",
+	"editor.autoClosingComments": "always",
+	"editor.autoClosingQuotes": "always",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnPaste": true,
+	"editor.formatOnSave": true,
+	"notebook.defaultFormatter": "esbenp.prettier-vscode",
+	"javascript.format.semicolons": "insert"
+}

package/dist/components/index.js

@@ -18410,7 +18410,12 @@ function SliderItem({
   const marks = React.useMemo(() => {
     const marksObj = {};
     for (let i = min; i <= max; i += step) {
-      marksObj[i] = `${i}%`;
+      marksObj[i] = /*#__PURE__*/jsxRuntime.jsxs("span", {
+        style: {
+          fontSize: "10px"
+        },
+        children: [i, "%"]
+      });
     }
     return marksObj;
   }, [min, max, step]);
@@ -18715,8 +18720,18 @@ const Style$A = dt.div`
   flex-direction: row;
   position: relative;
   width: 100%;
-  height: 100%;
-  min-height: 400px;
+  height: 472px;
+  min-height: 300px;
+  
+  @media (max-width: 768px) {
+    height: 350px;
+    min-height: 250px;
+  }
+  
+  @media (max-width: 480px) {
+    height: 300px;
+    min-height: 200px;
+  }
 
   .filter-cont {
     position: absolute; 
@@ -18807,8 +18822,6 @@ const Style$A = dt.div`
     flex: 1;
     background: rgb(0, 0, 0);
     z-index: 1;
-    width: 100%;
-    height: 100%;
     
     /* Mapbox GL JS specific styles */
     .mapboxgl-ctrl-top-right {
@@ -20006,22 +20019,6 @@ const useGlobe = ({
   };
 };
 
-typeof localStorage.getItem('is_collapsed') === 'string' ? localStorage.getItem('is_collapsed') === 'true' ? true : false : true;
-typeof localStorage.getItem('is_nested_sidebar_collapsed') === 'string' ? localStorage.getItem('is_nested_sidebar_collapsed') === 'true' : true;
-const ResizeContext = /*#__PURE__*/React.createContext({
-  resizeLoading: false,
-  windowWidth: 0,
-  resizeDif: 0,
-  isCollapsed: false,
-  setIsCollapsed: () => {},
-  isNestedSidebarCollapsed: false,
-  setIsNestedSidebarCollapsed: () => {}
-});
-const useResizeContext = () => {
-  const values = React.useContext(ResizeContext);
-  return values;
-};
-
 function Globe(_ref) {
   var _activeMarker$data, _activeMarker$data2;
   let {
@@ -20062,11 +20059,6 @@ function Globe(_ref) {
     });
   }), [data]);
 
-  // Get resize context for sidebar state changes
-  const {
-    isCollapsed
-  } = useResizeContext();
-
   // Use custom hook to configure globe functionality
   const {
     container,
@@ -20110,33 +20102,6 @@ function Globe(_ref) {
       return () => clearTimeout(timer);
     }
   }, [forceResize]);
-
-  // Force resize when sidebar state changes (handles width changes)
-  React.useEffect(() => {
-    if (forceResize) {
-      // Trigger resize when sidebar collapses/expands
-      const timer = setTimeout(() => {
-        forceResize();
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-  }, [isCollapsed, forceResize]);
-
-  // Add window resize listener as backup
-  React.useEffect(() => {
-    const handleWindowResize = () => {
-      if (forceResize) {
-        // Small delay to ensure DOM has updated
-        setTimeout(() => {
-          forceResize();
-        }, 100);
-      }
-    };
-    window.addEventListener('resize', handleWindowResize);
-    return () => {
-      window.removeEventListener('resize', handleWindowResize);
-    };
-  }, [forceResize]);
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
     children: /*#__PURE__*/jsxRuntime.jsxs(Style$A, {
       className: formatClassname([showSider && activeMarker && "with-sider"]),
@@ -51535,6 +51500,22 @@ function useConfig(data) {
   return config;
 }
 
+typeof localStorage.getItem('is_collapsed') === 'string' ? localStorage.getItem('is_collapsed') === 'true' ? true : false : true;
+typeof localStorage.getItem('is_nested_sidebar_collapsed') === 'string' ? localStorage.getItem('is_nested_sidebar_collapsed') === 'true' : true;
+const ResizeContext = /*#__PURE__*/React.createContext({
+  resizeLoading: false,
+  windowWidth: 0,
+  resizeDif: 0,
+  isCollapsed: false,
+  setIsCollapsed: () => {},
+  isNestedSidebarCollapsed: false,
+  setIsNestedSidebarCollapsed: () => {}
+});
+const useResizeContext = () => {
+  const values = React.useContext(ResizeContext);
+  return values;
+};
+
 const DAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
 function UserActivity({
   loading,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.185",
+	"version": "0.6.187",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -15,7 +15,7 @@
 		"buffer": "^6.0.3",
 		"countries-list": "^2.6.1",
 		"country-city-location": "^1.0.13",
-		"datastake-daf": "0.6.184",
+		"datastake-daf": "^0.5.780",
 		"dayjs": "^1.11.12",
 		"deepmerge": "^4.3.1",
 		"dot-object": "^2.1.5",

package/src/@daf/core/components/Dashboard/Globe/index.jsx

@@ -8,7 +8,6 @@ import CustomIcon from "../../Icon/CustomIcon.jsx";
 import ComponentWithFocus from "../ComponentWithFocus/index.jsx";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 import Filters from "../../Filters/FloatingFilters/index.js";
-import { useResizeContext } from "../../../context/Resize/index.js";
 
 /**
  * Globe Component
@@ -130,9 +129,6 @@ function Globe({
 		[data],
 	);
 
-	// Get resize context for sidebar state changes
-	const { isCollapsed } = useResizeContext();
-
 	// Use custom hook to configure globe functionality
 	const { container, activeMarker, mapOptionsButtonsConfig, forceResize } = useGlobe({
 		data: mappedData,
@@ -175,36 +171,6 @@ function Globe({
 		}
 	}, [forceResize]);
 
-	// Force resize when sidebar state changes (handles width changes)
-	useEffect(() => {
-		if (forceResize) {
-			// Trigger resize when sidebar collapses/expands
-			const timer = setTimeout(() => {
-				forceResize();
-			}, 100);
-
-			return () => clearTimeout(timer);
-		}
-	}, [isCollapsed, forceResize]);
-
-	// Add window resize listener as backup
-	useEffect(() => {
-		const handleWindowResize = () => {
-			if (forceResize) {
-				// Small delay to ensure DOM has updated
-				setTimeout(() => {
-					forceResize();
-				}, 100);
-			}
-		};
-
-		window.addEventListener('resize', handleWindowResize);
-		
-		return () => {
-			window.removeEventListener('resize', handleWindowResize);
-		};
-	}, [forceResize]);
-
 	return (
 		<ComponentWithFocus>
 			<Style className={formatClassname([showSider && activeMarker && "with-sider"])}>

package/src/@daf/core/components/Dashboard/Globe/style.js

@@ -5,8 +5,18 @@ const Style = styled.div`
   flex-direction: row;
   position: relative;
   width: 100%;
-  height: 100%;
-  min-height: 400px;
+  height: 472px;
+  min-height: 300px;
+  
+  @media (max-width: 768px) {
+    height: 350px;
+    min-height: 250px;
+  }
+  
+  @media (max-width: 480px) {
+    height: 300px;
+    min-height: 200px;
+  }
 
   .filter-cont {
     position: absolute; 
@@ -97,8 +107,6 @@ const Style = styled.div`
     flex: 1;
     background: rgb(0, 0, 0);
     z-index: 1;
-    width: 100%;
-    height: 100%;
     
     /* Mapbox GL JS specific styles */
     .mapboxgl-ctrl-top-right {

package/src/@daf/core/components/Dashboard/Map/storyConfig1.js

@@ -5,241 +5,243 @@ import MoreTags from "../../Table/MoreTags";
 const isMineSite = true;
 
 export const storyConfig = {
-  data: [
-    {
-      gps: {
-        latitude: -1.545726158025555,
-        longitude: 28.875630614904935,
-      },
-      name: "Rubaya",
-      datastakeId: "LOC-00000000241",
-      data: [
-        {
-          _id: "68af116e2cb57a4e3dd2e056",
-          createdBy: "4274fdb4-2798-46ea-a0a6-b4af5d92566e",
-          form: "event",
-          id: "91c3176a-d312-4259-9ddf-9d286ff6df87",
-          datastakeId: "EV-000000000150",
-          name: "Eboulement",
-          authorId: "7e17f076-09e7-4668-927c-11c12ccd1346",
-          collectId: "d78271301d04f76dfe0f70ce3c9e114ffe4dc4e0",
-          country: "CD",
-          date: "2025-08-25",
-          typeOfEvent: "incident",
-          implementers: [],
-          associatedSubjects: [],
-          testimonialsSource: [],
-          pictures: [],
-          documents: [],
-          channels: ["NAS-00000000105"],
-          published: true,
-          version: 1,
-          identifiedPerpetrators: [],
-          identifiedVictims: [],
-          assistedVictims: [],
-          mitigationMeasures: [],
-          createdAt: "2025-08-27T00:00:00.000Z",
-          updatedAt: "2025-08-27T14:12:21.395Z",
-          __v: 0,
-          percentageCompletion: 40,
-          eventCategory: "conflict",
-          incindentType: null,
-          initiative: null,
-          meta: null,
-          namespace: "incident",
-          primarySource: null,
-          severity: "moderate",
-          sources: ["7e17f076-09e7-4668-927c-11c12ccd1346"],
-          type: "minor_incident",
-        },
-        {
-          _id: "68af1fb6b52f86d82f57e945",
-          createdBy: "b1e3f288-01a2-4cea-95d2-03f65dfede99",
-          form: "event",
-          id: "5bee0d0f-39da-4bd1-85a4-e66276c82303",
-          datastakeId: "EV-000000000153",
-          name: "Request of security equipment",
-          authorId: "fc4ca5c6-f46d-424f-a948-d66b031a82c3",
-          collectId: "2142bd9f3306c9ec3c823f63bbbbb8fe3ebad7fa",
-          country: "CD",
-          date: "2025-08-11",
-          typeOfEvent: "testimonials",
-          implementers: [],
-          typeOfTestimonials: "request",
-          associatedSubjects: [],
-          testimonialsSource: [],
-          pictures: [],
-          documents: [],
-          channels: [],
-          published: true,
-          version: 1,
-          identifiedPerpetrators: [],
-          identifiedVictims: [],
-          assistedVictims: [],
-          mitigationMeasures: [],
-          createdAt: "2025-08-27T00:00:00.000Z",
-          updatedAt: "2025-08-27T15:10:00.619Z",
-          __v: 0,
-          percentageCompletion: 50,
-          meta: null,
-          namespace: "testimonials",
-          sources: ["fc4ca5c6-f46d-424f-a948-d66b031a82c3"],
-          type: "correctiveActions",
-        },
-        {
-          _id: "68af5d45b52f86d82f580fc8",
-          createdBy: "fc4ca5c6-f46d-424f-a948-d66b031a82c3",
-          form: "event",
-          id: "97348b4c-f7cf-4124-9b70-0f6891a40a15",
-          datastakeId: "EV-000000000161",
-          name: "76867485768",
-          authorId: "fc4ca5c6-f46d-424f-a948-d66b031a82c3",
-          collectId: "33b9aea707761a7a735aee81ebd29d5656f049fa",
-          country: "CD",
-          date: "2025-08-11",
-          typeOfEvent: "incident",
-          implementers: [],
-          associatedSubjects: [],
-          testimonialsSource: [],
-          pictures: [],
-          documents: [],
-          channels: [],
-          published: false,
-          version: 1,
-          identifiedPerpetrators: [],
-          identifiedVictims: [],
-          assistedVictims: [],
-          mitigationMeasures: [],
-          createdAt: "2025-08-27T00:00:00.000Z",
-          updatedAt: "2025-08-27T00:00:00.000Z",
-          __v: 0,
-          percentageCompletion: 40,
-          eventCategory: null,
-          initiative: null,
-          meta: null,
-          namespace: "incident",
-          primarySource: null,
-          severity: "major",
-          sources: ["fc4ca5c6-f46d-424f-a948-d66b031a82c3"],
-          type: "major_incident",
-        },
-      ],
-      type: "Mine site",
-      total: 5,
-      sources: 2,
-    },
-  ],
-  filtersConfig: [
-    {
-      label: "Location type",
-      placeholder: "Select",
-      key: "type",
-      type: "select",
-      value: "A",
-      options: [{ label: "Typ A", value: "A" }],
-    },
-    {
-      label: "Location type",
-      placeholder: "Select",
-      key: "type2",
-      type: "select",
-      value: undefined,
-      options: [{ label: "Typ A", value: "A" }],
-    },
-  ],
-  onFilterChange: (v) => {
-    console.log(v);
-  },
-  // tooltipAsText: true,
-  primaryLink: true,
-  renderSider: () =>
-    isMineSite ? (
-      <div className="body-list">
-        <div className="body-row">
-          <span className="label">Territory</span>
-          <span>Territory</span>
-        </div>
+	data: [
+		{
+			gps: {
+				latitude: -1.545726158025555,
+				longitude: 28.875630614904935,
+			},
+			name: "Rubaya",
+			datastakeId: "LOC-00000000241",
+			data: [
+				{
+					_id: "68af116e2cb57a4e3dd2e056",
+					createdBy: "4274fdb4-2798-46ea-a0a6-b4af5d92566e",
+					form: "event",
+					id: "91c3176a-d312-4259-9ddf-9d286ff6df87",
+					datastakeId: "EV-000000000150",
+					name: "Eboulement",
+					authorId: "7e17f076-09e7-4668-927c-11c12ccd1346",
+					collectId: "d78271301d04f76dfe0f70ce3c9e114ffe4dc4e0",
+					country: "CD",
+					date: "2025-08-25",
+					typeOfEvent: "incident",
+					implementers: [],
+					associatedSubjects: [],
+					testimonialsSource: [],
+					pictures: [],
+					documents: [],
+					channels: ["NAS-00000000105"],
+					published: true,
+					version: 1,
+					identifiedPerpetrators: [],
+					identifiedVictims: [],
+					assistedVictims: [],
+					mitigationMeasures: [],
+					createdAt: "2025-08-27T00:00:00.000Z",
+					updatedAt: "2025-08-27T14:12:21.395Z",
+					__v: 0,
+					percentageCompletion: 40,
+					eventCategory: "conflict",
+					incindentType: null,
+					initiative: null,
+					meta: null,
+					namespace: "incident",
+					primarySource: null,
+					severity: "moderate",
+					sources: ["7e17f076-09e7-4668-927c-11c12ccd1346"],
+					type: "minor_incident",
+				},
+				{
+					_id: "68af1fb6b52f86d82f57e945",
+					createdBy: "b1e3f288-01a2-4cea-95d2-03f65dfede99",
+					form: "event",
+					id: "5bee0d0f-39da-4bd1-85a4-e66276c82303",
+					datastakeId: "EV-000000000153",
+					name: "Request of security equipment",
+					authorId: "fc4ca5c6-f46d-424f-a948-d66b031a82c3",
+					collectId: "2142bd9f3306c9ec3c823f63bbbbb8fe3ebad7fa",
+					country: "CD",
+					date: "2025-08-11",
+					typeOfEvent: "testimonials",
+					implementers: [],
+					typeOfTestimonials: "request",
+					associatedSubjects: [],
+					testimonialsSource: [],
+					pictures: [],
+					documents: [],
+					channels: [],
+					published: true,
+					version: 1,
+					identifiedPerpetrators: [],
+					identifiedVictims: [],
+					assistedVictims: [],
+					mitigationMeasures: [],
+					createdAt: "2025-08-27T00:00:00.000Z",
+					updatedAt: "2025-08-27T15:10:00.619Z",
+					__v: 0,
+					percentageCompletion: 50,
+					meta: null,
+					namespace: "testimonials",
+					sources: ["fc4ca5c6-f46d-424f-a948-d66b031a82c3"],
+					type: "correctiveActions",
+				},
+				{
+					_id: "68af5d45b52f86d82f580fc8",
+					createdBy: "fc4ca5c6-f46d-424f-a948-d66b031a82c3",
+					form: "event",
+					id: "97348b4c-f7cf-4124-9b70-0f6891a40a15",
+					datastakeId: "EV-000000000161",
+					name: "76867485768",
+					authorId: "fc4ca5c6-f46d-424f-a948-d66b031a82c3",
+					collectId: "33b9aea707761a7a735aee81ebd29d5656f049fa",
+					country: "CD",
+					date: "2025-08-11",
+					typeOfEvent: "incident",
+					implementers: [],
+					associatedSubjects: [],
+					testimonialsSource: [],
+					pictures: [],
+					documents: [],
+					channels: [],
+					published: false,
+					version: 1,
+					identifiedPerpetrators: [],
+					identifiedVictims: [],
+					assistedVictims: [],
+					mitigationMeasures: [],
+					createdAt: "2025-08-27T00:00:00.000Z",
+					updatedAt: "2025-08-27T00:00:00.000Z",
+					__v: 0,
+					percentageCompletion: 40,
+					eventCategory: null,
+					initiative: null,
+					meta: null,
+					namespace: "incident",
+					primarySource: null,
+					severity: "major",
+					sources: ["fc4ca5c6-f46d-424f-a948-d66b031a82c3"],
+					type: "major_incident",
+				},
+			],
+			type: "Mine site",
+			total: 5,
+			sources: 2,
+		},
+	],
+	filtersConfig: [
+		{
+			label: "Location type",
+			placeholder: "Select",
+			key: "type",
+			type: "select",
+			value: "A",
+			options: [{ label: "Typ A", value: "A" }],
+		},
+		{
+			label: "Location type",
+			placeholder: "Select",
+			key: "type2",
+			type: "select",
+			value: undefined,
+			options: [{ label: "Typ A", value: "A" }],
+		},
+		{
+			type: "slider",
+			label: "Rating",
+			key: "rating",
+		},
+	],
+	onFilterChange: (v) => {
+		console.log(v);
+	},
+	// tooltipAsText: true,
+	primaryLink: true,
+	renderSider: () =>
+		isMineSite ? (
+			<div className="body-list">
+				<div className="body-row">
+					<span className="label">Territory</span>
+					<span>Territory</span>
+				</div>
 
-        <div className="body-row">
-          <span className="label">Territory</span>
-          <span>Territory</span>
-        </div>
+				<div className="body-row">
+					<span className="label">Territory</span>
+					<span>Territory</span>
+				</div>
 
-        <div className="body-row">
-          <span className="label">Territory</span>
-          <span>Territory</span>
-        </div>
-      </div>
-    ) : (
-      <div className="daf-table-wrapper extra-small">
-        <DAFTable
-          loading={false}
-          scroll={{ y: 300 }}
-          className="no-padding no-margin"
-          data={[
-            { worker: "Redis RIra", activity: "1234", key: 0 },
-            { empty: true, key: 1 },
-            { empty: true, key: 2 },
-            { empty: true, key: 3 },
-            { empty: true, key: 4 },
-            { empty: true, key: 5 },
-            { empty: true, key: 6 },
-            { empty: true, key: 7 },
-            { empty: true, key: 8 },
-          ]}
-          pagination={false}
-          columns={[
-            {
-              title: "Worker",
-              dataIndex: "worker",
-              key: "worker",
-              ellipsis: true,
-              width: 90,
-            },
-            {
-              title: "Activity",
-              dataIndex: "activity",
-              key: "activity",
-              width: 90,
-              render: (_, all) => {
-                if (all.empty) {
-                  return <div className="daf-default-cell md" />;
-                }
+				<div className="body-row">
+					<span className="label">Territory</span>
+					<span>Territory</span>
+				</div>
+			</div>
+		) : (
+			<div className="daf-table-wrapper extra-small">
+				<DAFTable
+					loading={false}
+					scroll={{ y: 300 }}
+					className="no-padding no-margin"
+					data={[
+						{ worker: "Redis RIra", activity: "1234", key: 0 },
+						{ empty: true, key: 1 },
+						{ empty: true, key: 2 },
+						{ empty: true, key: 3 },
+						{ empty: true, key: 4 },
+						{ empty: true, key: 5 },
+						{ empty: true, key: 6 },
+						{ empty: true, key: 7 },
+						{ empty: true, key: 8 },
+					]}
+					pagination={false}
+					columns={[
+						{
+							title: "Worker",
+							dataIndex: "worker",
+							key: "worker",
+							ellipsis: true,
+							width: 90,
+						},
+						{
+							title: "Activity",
+							dataIndex: "activity",
+							key: "activity",
+							width: 90,
+							render: (_, all) => {
+								if (all.empty) {
+									return <div className="daf-default-cell md" />;
+								}
 
-                return (
-                  <MoreTags
-                    values={[{ label: "DDdadsdas" }]}
-                    maxTextCont={40}
-                  />
-                );
-              },
-            },
-            {
-              title: "",
-              dataIndex: "action",
-              key: "action",
-              width: 34,
-              render: (_, all) => {
-                if (all.empty) {
-                  return <div className="daf-default-cell md" />;
-                }
+								return (
+									<MoreTags values={[{ label: "DDdadsdas" }]} maxTextCont={40} />
+								);
+							},
+						},
+						{
+							title: "",
+							dataIndex: "action",
+							key: "action",
+							width: 34,
+							render: (_, all) => {
+								if (all.empty) {
+									return <div className="daf-default-cell md" />;
+								}
 
-                return <CustomIcon name="LinkNewTab" width={12} height={12} />;
-              },
-            },
-          ]}
-          rowKey="key"
-        />
-      </div>
-    ),
-  renderTooltip: (data) => {
-    return [
-      { label: "Workers", value: data?.administrativeLevel1 },
-      { label: "Opinion", value: "RROFTE GERRDECI " },
-    ];
-  },
-  link: true,
-  onClickLink: (data) => {
-    console.log(data);
-  },
+								return <CustomIcon name="LinkNewTab" width={12} height={12} />;
+							},
+						},
+					]}
+					rowKey="key"
+				/>
+			</div>
+		),
+	renderTooltip: (data) => {
+		return [
+			{ label: "Workers", value: data?.administrativeLevel1 },
+			{ label: "Opinion", value: "RROFTE GERRDECI " },
+		];
+	},
+	link: true,
+	onClickLink: (data) => {
+		console.log(data);
+	},
 };

package/src/@daf/core/components/Filters/FloatingFilters/components/Slider/index.jsx

@@ -10,111 +10,116 @@ const DEFAULT_MAX = 100;
 const STEP_SISTERS = ["#F04438", "#FF7A45", "#FFA940", "#95DE64", "#12B76A"]; // NOT REAL STEP SISTERS, JUST COLORS. 😂
 
 export default function SliderItem({ filter, onFilterChange }) {
-  const [range, setRange] = useState([DEFAULT_MIN, DEFAULT_MAX]);
-
-  const min = filter?.min ?? DEFAULT_MIN;
-  const max = filter?.max ?? DEFAULT_MAX;
-  const step = filter?.step ?? DEFAULT_STEP;
-
-  const marks = useMemo(() => {
-    const marksObj = {};
-    for (let i = min; i <= max; i += step) {
-      marksObj[i] = `${i}%`;
-    }
-    return marksObj;
-  }, [min, max, step]);
-
-  const getColorForValue = (start, end) => {
-    const s = Number(start);
-    const e = Number(end);
-    if (Number.isNaN(s) || Number.isNaN(e)) return "transparent";
-
-    const valueToStartIndex = (v) => {
-      let idx = Math.floor((v - min) / step);
-      if (idx < 0) idx = 0;
-      if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
-      return idx;
-    };
-
-    const valueToEndIndex = (v) => {
-      let idx = Math.ceil((v - min) / step) - 1;
-      if (idx < 0) idx = 0;
-      if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
-      return idx;
-    };
-
-    let startIndex = valueToStartIndex(Math.min(s, e));
-    let endIndex = valueToEndIndex(Math.max(s, e));
-
-    if (endIndex < startIndex) endIndex = startIndex;
-
-    const colorsInRange = STEP_SISTERS.slice(startIndex, endIndex + 1);
-
-    if (colorsInRange.length === 0) return "transparent";
-    if (colorsInRange.length === 1) return colorsInRange[0];
-
-    const sliceSize = 100 / colorsInRange.length;
-    const gradientStops = colorsInRange
-      .map((color, i) => {
-        const startPct = +(i * sliceSize).toFixed(4);
-        const endPct = +((i + 1) * sliceSize).toFixed(4);
-        return `${color} ${startPct}% ${endPct}%`;
-      })
-      .join(", ");
-
-    return `linear-gradient(to right, ${gradientStops})`;
-  };
-
-  return (
-    <div className="form-row">
-      <label>{filter?.label}</label>
-      <Select
-        value={`${range[0]} - ${range[1]}`}
-        dropdownRender={() => (
-          <div style={{ padding: "10px" }}>
-            <ConfigProvider
-              theme={{
-                components: {
-                  Slider: {
-                    dotSize: 13,
-                  },
-                },
-              }}
-            >
-              <Slider
-                range
-                min={min}
-                max={max}
-                value={range}
-                step={null}
-                onChange={(val) => {
-                  setRange(val);
-                  onFilterChange({ [filter?.key]: val });
-                }}
-                tooltip={{
-                  open: false,
-                }}
-                marks={marks}
-                styles={{
-                  track: {
-                    background: "transparent",
-                  },
-                  tracks: {
-                    background: getColorForValue(range[0], range[1]),
-                  },
-                }}
-              />
-            </ConfigProvider>
-          </div>
-        )}
-      >
-        <Option
-          value={`${range[0]}-${range[1]}`}
-          key={`${range[0]}-${range[1]}`}
-        >
-          {range[0]} - {range[1]}
-        </Option>
-      </Select>
-    </div>
-  );
+	const [range, setRange] = useState([DEFAULT_MIN, DEFAULT_MAX]);
+
+	const min = filter?.min ?? DEFAULT_MIN;
+	const max = filter?.max ?? DEFAULT_MAX;
+	const step = filter?.step ?? DEFAULT_STEP;
+
+	const marks = useMemo(() => {
+		const marksObj = {};
+		for (let i = min; i <= max; i += step) {
+			marksObj[i] = (
+				<span
+					style={{
+						fontSize: "10px",
+					}}
+				>
+					{i}%
+				</span>
+			);
+		}
+		return marksObj;
+	}, [min, max, step]);
+
+	const getColorForValue = (start, end) => {
+		const s = Number(start);
+		const e = Number(end);
+		if (Number.isNaN(s) || Number.isNaN(e)) return "transparent";
+
+		const valueToStartIndex = (v) => {
+			let idx = Math.floor((v - min) / step);
+			if (idx < 0) idx = 0;
+			if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
+			return idx;
+		};
+
+		const valueToEndIndex = (v) => {
+			let idx = Math.ceil((v - min) / step) - 1;
+			if (idx < 0) idx = 0;
+			if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
+			return idx;
+		};
+
+		let startIndex = valueToStartIndex(Math.min(s, e));
+		let endIndex = valueToEndIndex(Math.max(s, e));
+
+		if (endIndex < startIndex) endIndex = startIndex;
+
+		const colorsInRange = STEP_SISTERS.slice(startIndex, endIndex + 1);
+
+		if (colorsInRange.length === 0) return "transparent";
+		if (colorsInRange.length === 1) return colorsInRange[0];
+
+		const sliceSize = 100 / colorsInRange.length;
+		const gradientStops = colorsInRange
+			.map((color, i) => {
+				const startPct = +(i * sliceSize).toFixed(4);
+				const endPct = +((i + 1) * sliceSize).toFixed(4);
+				return `${color} ${startPct}% ${endPct}%`;
+			})
+			.join(", ");
+
+		return `linear-gradient(to right, ${gradientStops})`;
+	};
+
+	return (
+		<div className="form-row">
+			<label>{filter?.label}</label>
+			<Select
+				value={`${range[0]} - ${range[1]}`}
+				dropdownRender={() => (
+					<div style={{ padding: "10px" }}>
+						<ConfigProvider
+							theme={{
+								components: {
+									Slider: {
+										dotSize: 13,
+									},
+								},
+							}}
+						>
+							<Slider
+								range
+								min={min}
+								max={max}
+								value={range}
+								step={null}
+								onChange={(val) => {
+									setRange(val);
+									onFilterChange({ [filter?.key]: val });
+								}}
+								tooltip={{
+									open: false,
+								}}
+								marks={marks}
+								styles={{
+									track: {
+										background: "transparent",
+									},
+									tracks: {
+										background: getColorForValue(range[0], range[1]),
+									},
+								}}
+							/>
+						</ConfigProvider>
+					</div>
+				)}
+			>
+				<Option value={`${range[0]}-${range[1]}`} key={`${range[0]}-${range[1]}`}>
+					{range[0]} - {range[1]}
+				</Option>
+			</Select>
+		</div>
+	);
 }