feat: implement confidence score slider

Author: drduhe

src/components/OsmlMenu.css

@@ -360,6 +360,43 @@
   background: rgba(255, 255, 255, 0.22);
 }
 
+/* ==============================
+   Confidence Filter
+   ============================== */
+.op-confidence-filter {
+  margin: 2px 4px 10px;
+  padding: 10px;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.op-confidence-filter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.op-confidence-filter-title {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.42);
+}
+
+.op-confidence-filter-value {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.op-confidence-filter-range {
+  width: 100%;
+  accent-color: #3b82f6;
+}
+
 /* ==============================
    Layer Group
    ============================== */

src/components/OsmlMenu.tsx

@@ -34,7 +34,15 @@ const OsmlMenu: React.FC<OsmlMenuProps> = ({
   onFeatureClick
 }) => {
   const cesium = useContext(CesiumContext);
-  const { resources, removeResource, toggleVisibility, zoomTo, clearAll } = useResources();
+  const {
+    resources,
+    confidenceThreshold,
+    setConfidenceThreshold,
+    removeResource,
+    toggleVisibility,
+    zoomTo,
+    clearAll
+  } = useResources();
 
   const [isOpen, setIsOpen] = useState(false);
   const [showImageRequestModal, setShowImageRequestModal] = useState(false);
@@ -84,6 +92,8 @@ const OsmlMenu: React.FC<OsmlMenuProps> = ({
   const renderResourceItem = (resource: LoadedResource) => {
     const isFC = resource.type === "feature-collection";
     const fc = isFC ? (resource as FeatureCollectionResource) : null;
+    const filteredFeatureCount = fc?.filteredFeatureCount ?? fc?.featureCount ?? 0;
+    const isFiltered = filteredFeatureCount !== (fc?.featureCount ?? 0);
 
     return (
       <div
@@ -120,7 +130,9 @@ const OsmlMenu: React.FC<OsmlMenuProps> = ({
               )}
               {fc && (
                 <span className="op-layer-count">
-                  {fc.featureCount.toLocaleString()} feature{fc.featureCount !== 1 ? "s" : ""}
+                  {isFiltered
+                    ? `${filteredFeatureCount.toLocaleString()} / ${fc.featureCount.toLocaleString()} shown`
+                    : `${fc.featureCount.toLocaleString()} feature${fc.featureCount !== 1 ? "s" : ""}`}
                 </span>
               )}
               <span className="op-layer-time">{formatTime(resource.loadedAt)}</span>
@@ -269,6 +281,24 @@ const OsmlMenu: React.FC<OsmlMenuProps> = ({
               renderEmptyLayers()
             ) : (
               <>
+                {featureCollections.length > 0 && (
+                  <div className="op-confidence-filter">
+                    <div className="op-confidence-filter-header">
+                      <span className="op-confidence-filter-title">Minimum confidence</span>
+                      <span className="op-confidence-filter-value">{confidenceThreshold.toFixed(2)}</span>
+                    </div>
+                    <input
+                      className="op-confidence-filter-range"
+                      type="range"
+                      min={0}
+                      max={1}
+                      step={0.01}
+                      value={confidenceThreshold}
+                      onChange={(e) => setConfidenceThreshold(Number(e.target.value))}
+                    />
+                  </div>
+                )}
+
                 {/* Feature Collections */}
                 {featureCollections.length > 0 && (
                   <div className="op-layer-group">

src/context/ResourceContext.tsx

@@ -9,6 +9,10 @@ import { GeoJsonDataSource, ImageryLayer, Viewer } from "cesium";
 import React, { createContext, useCallback, useContext, useState } from "react";
 
 import { CAMERA_FLY_DURATION_SECONDS } from "@/config";
+import {
+  applyConfidenceFilter,
+  clampConfidenceThreshold
+} from "@/utils/featureConfidence";
 import { logger } from "@/utils/logger";
 
 /** A loaded GeoJSON feature collection displayed on the Cesium globe. */
@@ -23,6 +27,8 @@ export interface FeatureCollectionResource {
   visible: boolean;
   loadedAt: Date;
   dataSource: GeoJsonDataSource;
+  filteredFeatureCount?: number;
+  confidenceThreshold?: number;
 }
 
 /** A loaded imagery layer displayed on the Cesium globe. */
@@ -42,6 +48,8 @@ export type LoadedResource = FeatureCollectionResource | ImageryResource;
 
 interface ResourceContextValue {
   resources: LoadedResource[];
+  confidenceThreshold: number;
+  setConfidenceThreshold: (threshold: number) => void;
   addResource: (resource: LoadedResource) => void;
   removeResource: (id: string, viewer: Viewer) => void;
   toggleVisibility: (id: string, viewer: Viewer) => void;
@@ -53,9 +61,50 @@ const ResourceContext = createContext<ResourceContextValue | undefined>(undefine
 
 export const ResourceProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [resources, setResources] = useState<LoadedResource[]>([]);
+  const [confidenceThreshold, setConfidenceThresholdState] = useState(0);
 
   const addResource = useCallback((resource: LoadedResource) => {
-    setResources((prev) => [...prev, resource]);
+    setResources((prev) => {
+      if (resource.type !== "feature-collection") {
+        return [...prev, resource];
+      }
+
+      const featureResource = resource as FeatureCollectionResource;
+      const filteredFeatureCount = applyConfidenceFilter(
+        featureResource.dataSource,
+        confidenceThreshold,
+        featureResource.visible
+      );
+      return [
+        ...prev,
+        {
+          ...featureResource,
+          filteredFeatureCount,
+          confidenceThreshold
+        }
+      ];
+    });
+  }, [confidenceThreshold]);
+
+  const setConfidenceThreshold = useCallback((threshold: number) => {
+    const clamped = clampConfidenceThreshold(threshold);
+    setConfidenceThresholdState(clamped);
+    setResources((prev) =>
+      prev.map((resource) => {
+        if (resource.type !== "feature-collection") return resource;
+        const featureResource = resource as FeatureCollectionResource;
+        const filteredFeatureCount = applyConfidenceFilter(
+          featureResource.dataSource,
+          clamped,
+          featureResource.visible
+        );
+        return {
+          ...featureResource,
+          confidenceThreshold: clamped,
+          filteredFeatureCount
+        };
+      })
+    );
   }, []);
 
   const removeResource = useCallback((id: string, viewer: Viewer) => {
@@ -93,7 +142,17 @@ export const ResourceProvider: React.FC<{ children: React.ReactNode }> = ({ chil
         try {
           if (r.type === "feature-collection") {
             const fc = r as FeatureCollectionResource;
-            fc.dataSource.show = newVisible;
+            const filteredFeatureCount = applyConfidenceFilter(
+              fc.dataSource,
+              confidenceThreshold,
+              newVisible
+            );
+            return {
+              ...fc,
+              visible: newVisible,
+              confidenceThreshold,
+              filteredFeatureCount
+            };
           } else if (r.type === "imagery") {
             const img = r as ImageryResource;
             img.imageryLayer.show = newVisible;
@@ -105,7 +164,7 @@ export const ResourceProvider: React.FC<{ children: React.ReactNode }> = ({ chil
         return { ...r, visible: newVisible };
       })
     );
-  }, []);
+  }, [confidenceThreshold]);
 
   const zoomTo = useCallback((id: string, viewer: Viewer) => {
     // Use the state setter pattern to avoid stale closure over resources
@@ -169,7 +228,16 @@ export const ResourceProvider: React.FC<{ children: React.ReactNode }> = ({ chil
 
   return (
     <ResourceContext.Provider
-      value={{ resources, addResource, removeResource, toggleVisibility, zoomTo, clearAll }}
+      value={{
+        resources,
+        confidenceThreshold,
+        setConfidenceThreshold,
+        addResource,
+        removeResource,
+        toggleVisibility,
+        zoomTo,
+        clearAll
+      }}
     >
       {children}
     </ResourceContext.Provider>

src/utils/featureConfidence.ts

@@ -0,0 +1,136 @@
+// Copyright 2023-2026 Amazon.com, Inc. or its affiliates.
+
+/**
+ * Confidence parsing and filtering helpers for loaded GeoJSON detections.
+ */
+
+import * as Cesium from "cesium";
+import { GeoJsonDataSource } from "cesium";
+
+const CONFIDENCE_KEYS = ["confidence", "conf", "probability", "prob"];
+const SCORE_KEYS = ["score"];
+
+/** Clamps a confidence threshold to the supported 0..1 range. */
+export function clampConfidenceThreshold(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}
+
+/** Normalizes a confidence value to a 0..1 score when possible. */
+function normalizeConfidence(value: number): number | undefined {
+  if (!Number.isFinite(value) || value < 0) return undefined;
+  if (value <= 1) return value;
+  if (value <= 100) return value / 100;
+  return undefined;
+}
+
+/** Returns true when key indicates confidence-like values. */
+function isConfidenceKey(key: string): boolean {
+  const lower = key.toLowerCase();
+  return CONFIDENCE_KEYS.some((candidate) => lower.includes(candidate));
+}
+
+/** Returns true when key indicates score-like values. */
+function isScoreKey(key: string): boolean {
+  const lower = key.toLowerCase();
+  return SCORE_KEYS.some((candidate) => lower.includes(candidate));
+}
+
+/** Walks nested feature properties and collects confidence candidates. */
+function collectConfidenceCandidates(
+  value: unknown,
+  parentKey: string,
+  confidenceCandidates: number[],
+  scoreCandidates: number[],
+  depth: number = 0
+): void {
+  if (depth > 4 || value === null || value === undefined) return;
+
+  if (typeof value === "number") {
+    const normalized = normalizeConfidence(value);
+    if (normalized === undefined) return;
+    if (isConfidenceKey(parentKey)) confidenceCandidates.push(normalized);
+    if (isScoreKey(parentKey)) scoreCandidates.push(normalized);
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      collectConfidenceCandidates(
+        item,
+        parentKey,
+        confidenceCandidates,
+        scoreCandidates,
+        depth + 1
+      );
+    }
+    return;
+  }
+
+  if (typeof value === "object") {
+    for (const [key, nestedValue] of Object.entries(
+      value as Record<string, unknown>
+    )) {
+      collectConfidenceCandidates(
+        nestedValue,
+        key,
+        confidenceCandidates,
+        scoreCandidates,
+        depth + 1
+      );
+    }
+  }
+}
+
+/**
+ * Extracts a normalized confidence value from GeoJSON feature properties.
+ * Prefers explicit confidence keys over generic score keys.
+ */
+export function extractFeatureConfidence(
+  properties: Record<string, unknown>
+): number | undefined {
+  const confidenceCandidates: number[] = [];
+  const scoreCandidates: number[] = [];
+
+  collectConfidenceCandidates(
+    properties,
+    "",
+    confidenceCandidates,
+    scoreCandidates
+  );
+
+  if (confidenceCandidates.length > 0) return Math.max(...confidenceCandidates);
+  if (scoreCandidates.length > 0) return Math.max(...scoreCandidates);
+  return undefined;
+}
+
+/**
+ * Applies a confidence threshold by toggling each feature entity visibility.
+ * Returns how many features match the threshold.
+ */
+export function applyConfidenceFilter(
+  dataSource: GeoJsonDataSource,
+  threshold: number,
+  baseVisible: boolean
+): number {
+  const clampedThreshold = clampConfidenceThreshold(threshold);
+  const now = Cesium.JulianDate.now();
+  let matchingCount = 0;
+
+  for (const entity of dataSource.entities.values) {
+    const properties = entity.properties?.getValue(now) as
+      | Record<string, unknown>
+      | undefined;
+    const confidence = properties
+      ? extractFeatureConfidence(properties)
+      : undefined;
+
+    const passes = confidence === undefined || confidence >= clampedThreshold;
+    if (passes) matchingCount += 1;
+    entity.show = baseVisible && passes;
+  }
+
+  return matchingCount;
+}