feat: add ParkingIcon and SwimmingPoolIcon components; update ModelPicker to include new icons and display additional model information

Author: kshitijrajsharma

frontend/src/components/ui/icons/parking-icon.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from "@/types";
+import React from "react";
+
+export const ParkingIcon: React.FC<IconProps> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    fill="none"
+    {...props}
+    viewBox="0 0 12 12"
+  >
+    <path
+      stroke="#fff"
+      strokeWidth="1.3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M4 2.5v7M4 2.5h2.6a2 2 0 0 1 0 4H4"
+    />
+  </svg>
+);

frontend/src/components/ui/icons/swimming-pool-icon.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from "@/types";
+import React from "react";
+
+export const SwimmingPoolIcon: React.FC<IconProps> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    fill="none"
+    {...props}
+    viewBox="0 0 12 12"
+  >
+    <path
+      stroke="#fff"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M1.4 5.1c.9 0 .9-.8 1.75-.8s.9.8 1.75.8.9-.8 1.75-.8.9.8 1.75.8.9-.8 1.6-.8M1.4 8.1c.9 0 .9-.8 1.75-.8s.9.8 1.75.8.9-.8 1.75-.8.9.8 1.75.8.9-.8 1.6-.8"
+    />
+  </svg>
+);

frontend/src/features/try-fair/api/stac.ts

@@ -35,6 +35,9 @@ export type BaseModelStacItem = {
     "fair:hyperparameters_spec": HyperParamSpec[];
     "fair:source_imagery"?: string;
     "fair:preview_location"?: { type: "Point"; coordinates: [number, number] };
+    "fair:preview_place"?: string;
+    "fair:preview_country"?: string;
+    "fair:coverage"?: string;
     "fair:base_model_title"?: string;
     keywords: string[];
     providers: Array<{ name: string; description?: string; url?: string }>;

frontend/src/features/try-fair/components/model-picker-modal.tsx

@@ -4,6 +4,10 @@ import DropDown from "@/components/ui/dropdown/dropdown";
 import { useDropdownMenu } from "@/hooks/use-dropdown-menu";
 import { ChevronDownIcon } from "@/components/ui/icons";
 import { BuildingIcon } from "@/components/ui/icons/buildings-icon";
+import { TreesIcon } from "@/components/ui/icons/trees-icon";
+import { SwimmingPoolIcon } from "@/components/ui/icons/swimming-pool-icon";
+import { ParkingIcon } from "@/components/ui/icons/parking-icon";
+import { IconProps } from "@/types";
 
 type ModelPickerProps = {
   selectedModel: BaseModelStacItem | null;
@@ -15,13 +19,20 @@ type ModelPickerProps = {
   openMobileDialog?: () => void;
 };
 
+const FEATURE_ICONS: Record<string, React.FC<IconProps>> = {
+  building: BuildingIcon,
+  tree: TreesIcon,
+  swimming_pool: SwimmingPoolIcon,
+  parking: ParkingIcon,
+};
+
 const FeatureBadge = ({ label }: { label: string | undefined }) => {
-  const featureLabel =
-    label ?? "".replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  const Icon = FEATURE_ICONS[label ?? ""] ?? BuildingIcon;
+  const featureLabel = (label ?? "").replace(/[-_]/g, " ");
 
   return (
     <span className="inline-flex gap-2 items-center px-2 py-0.5 capitalize rounded bg-grey text-white text-xs font-medium">
-      <BuildingIcon />
+      <Icon />
       {featureLabel}
     </span>
   );
@@ -38,6 +49,12 @@ export const ModelPicker: React.FC<ModelPickerProps> = ({
 }) => {
   const { onDropdownHide, dropdownRef } = useDropdownMenu();
   const [isOpen, setIsOpen] = useState(false);
+  const selectedLocation = [
+    selectedModel?.properties["fair:preview_place"],
+    selectedModel?.properties["fair:preview_country"],
+  ]
+    .filter(Boolean)
+    .join(", ");
 
   const handleSelect = (model: BaseModelStacItem) => {
     onSelect(model);
@@ -62,6 +79,11 @@ export const ModelPicker: React.FC<ModelPickerProps> = ({
             <p className="font-medium text-dark text-xs leading-tight">
               {selectedModel.properties.title}
             </p>
+            {selectedLocation && (
+              <p className="text-grey text-[10px] leading-tight truncate">
+                {selectedLocation}
+              </p>
+            )}
           </>
         ) : (
           <p className="text-grey text-xs">Select a model</p>
@@ -130,6 +152,7 @@ export const ModelPickerContent = ({
       {models.map((model) => {
         const isSelected = selectedModel?.id === model.id;
         const baseModelTitle = model?.properties?.["fair:base_model_title"];
+        const coverage = model?.properties?.["fair:coverage"];
         return (
           <button
             key={model.id}
@@ -159,6 +182,9 @@ export const ModelPickerContent = ({
                 Model: {baseModelTitle}
               </p>
             )}
+            {coverage && (
+              <p className="text-grey text-xs mb-0.5 capitalize">{coverage}</p>
+            )}
             <p className="text-grey text-xs mb-2">
               By: {model?.properties?.providers[0]?.name ?? ""}
             </p>

frontend/src/styles/index.css

@@ -450,32 +450,33 @@ hotosm-auth {
 }
 
 .try-fair-confidence-slider::-webkit-slider-runnable-track {
-  height: 6px;
-  border-radius: 9999px;
-  background: linear-gradient(90deg, #0088ff 0%, #ff383c 100%);
+  height: 16px;
+  background: linear-gradient(90deg, #0088ff 0%, #22c55e 100%);
+  -webkit-clip-path: polygon(0 0, 100% 42%, 100% 58%, 0 100%);
+  clip-path: polygon(0 0, 100% 42%, 100% 58%, 0 100%);
 }
 
 .try-fair-confidence-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 18px;
-  height: 18px;
-  margin-top: -6px;
-  border-radius: 50%;
+  width: 10px;
+  height: 22px;
+  margin-top: -3px;
+  border-radius: 9999px;
   background: #687075;
   cursor: pointer;
 }
 
 .try-fair-confidence-slider::-moz-range-track {
-  height: 6px;
-  border-radius: 9999px;
-  background: linear-gradient(90deg, #0088ff 0%, #ff383c 100%);
+  height: 16px;
+  background: linear-gradient(90deg, #0088ff 0%, #22c55e 100%);
+  clip-path: polygon(0 0, 100% 42%, 100% 58%, 0 100%);
 }
 
 .try-fair-confidence-slider::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
+  width: 10px;
+  height: 22px;
+  border-radius: 9999px;
   background: #687075;
   cursor: pointer;
   border: none;