add heatmap radius picker

Author: citizen-dror

src/components/model/JunctionRadiusPicker.tsx

@@ -6,24 +6,28 @@ type JunctionRadiusPickerProps = {
   onChange: (value: number) => void;
   min?: number;
   max?: number;
+  step? : number;
+  text :string;
 };
 
 export const JunctionRadiusPicker: React.FC<JunctionRadiusPickerProps> = ({
   value,
   onChange,
   min = 20,
   max = 150,
+  step = 10,
+  text
 }) => {
   return (
     <Form.Group className="d-flex align-items-center gap-2 mb-0">
       <Form.Label className="fw-semibold mb-0">
-        Junction radius (meters):
+        {text}
       </Form.Label>
 
       <Form.Range
         min={min}
         max={max}
-        step={10}
+        step={step}
         value={value}
         onChange={e => onChange(Number(e.target.value))}
       />

src/components/model/ModelTabs.tsx

@@ -39,6 +39,7 @@ const ModelTabs: React.FC<IProps> = () => {
 
   const [activeTab, setActiveTab] = React.useState<'table' | 'map'>('table');
   const [junctionRadius, setJunctionRadius] = React.useState(50);
+  const [heatmapRadius, setHeatmapRadius] = React.useState(100);
   const [severityMode, setSeverityMode] =
     React.useState<ModelSeverityMode>(1);
   const [filterType, setFilterType] =
@@ -48,8 +49,8 @@ const ModelTabs: React.FC<IProps> = () => {
 
   // density 
   const denstiyPoints = React.useMemo(
-    () => calculateKernelDensity(dataAllInjuries, 100),
-    [dataAllInjuries]
+    () => calculateKernelDensity(dataAllInjuries, heatmapRadius),
+    [dataAllInjuries, heatmapRadius]
   );
   const clusterTableDensity = React.useMemo(
     () => buildDensityClustersTable(denstiyPoints,filterType, maxClusters),
@@ -82,6 +83,15 @@ const ModelTabs: React.FC<IProps> = () => {
           <JunctionRadiusPicker
             value={junctionRadius}
             onChange={setJunctionRadius}
+            text = "Junction radius"
+          />
+          <JunctionRadiusPicker
+            value={heatmapRadius}
+            onChange={setHeatmapRadius}
+            text = {"heatmap radius"}
+            min = {100}
+            max = {200}
+            step = {50}
           />
 
           <SeverityModePicker