add combobox for speed types (#319)

Author: chrstnbwnkl

package-lock.json

@@ -30,6 +30,7 @@
     "check:deps": "npx taze@latest -Ilwr"
   },
   "dependencies": {
+    "@base-ui/react": "^1.1.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",

package.json

@@ -21,10 +21,18 @@ interface EnumSetting {
   enums: Array<{ key: string; text: string; value: string }>;
 }
 
+interface ListSetting {
+  name: string;
+  param: string;
+  description: string;
+  options: Array<string>;
+}
+
 interface SettingsGroup {
   numeric: NumericSetting[];
   boolean: BooleanSetting[];
   enum: EnumSetting[];
+  list: ListSetting[];
 }
 
 export type SettingsProfile =
@@ -39,11 +47,13 @@ export type SettingsProfile =
 const createSettings = (
   numeric: NumericSetting[],
   boolean: BooleanSetting[],
-  enumSettings: EnumSetting[] = []
+  enumSettings: EnumSetting[] = [],
+  listSettings: ListSetting[] = []
 ): SettingsGroup => ({
   numeric: [...numeric],
   boolean: [...boolean],
   enum: enumSettings,
+  list: listSettings,
 });
 
 const length = {
@@ -256,6 +266,13 @@ const includeHot = {
     "A boolean value which indicates the desire to include tolled HOV roads which require the driver to pay a toll if the occupant requirement isn't met. Default false.",
 };
 
+const speedTypes = {
+  name: 'Speed Types',
+  param: 'speed_types',
+  description: 'Which speed types to use.',
+  options: ['current', 'predicted', 'freeflow', 'constrained'],
+};
+
 const transitStartEndMaxDistance = {
   name: 'Transit Start/End Max Distance',
   param: 'transit_start_end_max_distance',
@@ -851,6 +868,7 @@ export const settingsInit = {
   denoise: 0.1,
   generalize: 0,
   alternates: 0,
+  speed_types: ['current', 'freeflow', 'predicted', 'constrained'],
 };
 
 export const settingsInitTruckOverride = {
@@ -918,17 +936,23 @@ export const profileSettings: Record<SettingsProfile, SettingsGroup> = {
       ...borderSettings,
       useTruckRoutes,
     ],
-    [hazardousMaterials, shortest, ignoreHierarchies]
+    [hazardousMaterials, shortest, ignoreHierarchies],
+    [],
+    [speedTypes]
   ),
 
   car: createSettings(
     [...commonVehicleProfileNumeric],
-    [...commonVehicleProfileBoolean]
+    [...commonVehicleProfileBoolean],
+    [],
+    [speedTypes]
   ),
 
   bus: createSettings(
     [length, weight, ...commonVehicleProfileNumeric],
-    [...commonVehicleProfileBoolean]
+    [...commonVehicleProfileBoolean],
+    [],
+    [speedTypes]
   ),
 
   pedestrian: createSettings(
@@ -955,7 +979,9 @@ export const profileSettings: Record<SettingsProfile, SettingsGroup> = {
       ...gateSettings,
       ...borderSettings,
     ],
-    [shortest, ignoreHierarchies]
+    [shortest, ignoreHierarchies],
+    [],
+    [speedTypes]
   ),
 
   bicycle: createSettings(
@@ -966,7 +992,9 @@ export const profileSettings: Record<SettingsProfile, SettingsGroup> = {
 
   motorcycle: createSettings(
     [...commonVehicleProfileNumeric],
-    [...commonVehicleProfileBoolean]
+    [...commonVehicleProfileBoolean],
+    [],
+    [speedTypes]
   ),
 };
 

src/components/settings-panel/settings-options.ts

@@ -37,6 +37,7 @@ import { useDirectionsQuery } from '@/hooks/use-directions-queries';
 import { useIsochronesQuery } from '@/hooks/use-isochrones-queries';
 import { CollapsibleSection } from '@/components/ui/collapsible-section';
 import { ServerSettings } from '@/components/settings-panel/server-settings';
+import { MultiSelectSetting } from '../ui/multiselect-setting';
 
 type ProfileWithSettings = Exclude<Profile, 'auto'>;
 
@@ -238,6 +239,26 @@ export const SettingsPanel = () => {
                     />
                   )
                 )}
+                {profileSettings[profile as ProfileWithSettings].list.map(
+                  (option, key) => (
+                    <MultiSelectSetting
+                      key={key}
+                      id={option.param}
+                      label={option.name}
+                      description={option.description}
+                      value={
+                        (settings[option.param] as string[]) ?? ['current']
+                      }
+                      options={option.options}
+                      onValueChange={(value) => {
+                        handleUpdateSettings({
+                          name: option.param,
+                          value,
+                        });
+                      }}
+                    />
+                  )
+                )}
               </div>
             </CollapsibleSection>
           )}

src/components/settings-panel/settings-panel.tsx

@@ -79,7 +79,14 @@ export interface PossibleSettings {
   denoise: number;
   generalize: number;
   alternates: number;
-  [key: string]: string | number | boolean | GeoJSON.GeoJSON[] | undefined;
+  speed_types: string[];
+  [key: string]:
+    | string
+    | string[]
+    | number
+    | boolean
+    | GeoJSON.GeoJSON[]
+    | undefined;
 }
 
 export interface ParsedDirectionsGeometry {