The colors for the accessibility comparison tab can now be changed in the preferences

This includes the colors of the polygons for the intersection and location/scenario 1 and 2, as well as the origin point in scenario mode and the two origin points in location mode.
Fix: #1795

Author: GabrielBruno24

locales/en/transit.json

@@ -773,17 +773,23 @@
     "accessibilityComparison": {
         "Title": "Accessibility map comparison",
         "Legend": "Legend",
+        "ScenarioNPolygon": "Scenario {{scenarioNumber}} polygon",
+        "ScenarioLocation": "Scenarios location",
         "ScenarioIntersection": "Intersection of the scenarios",
+        "ScenarioIntersectionPolygon": "Scenarios intersection polygon",
         "LocationIntersection": "Intersection of the locations",
+        "LocationIntersectionPolygon": "Locations intersection polygon",
         "LocationN": "Location {{locationNumber}}",
+        "LocationNPolygon": "Location {{locationNumber}} polygon",
         "Difference": "Difference",
         "SelectMaxTime": "Select max time to display (minutes)",
         "ComparisonByScenario": "Comparison by scenario",
         "ComparisonByLocation": "Comparison by location",
         "contextMenu": {
             "SetAsLocation1": "Set as Location 1",
             "SetAsLocation2": "Set as Location 2"
-        }
+        },
+        "Colors": "Colors"
     },
     "gtfs": {
         "ButtonImport": "Import",
@@ -1032,6 +1038,14 @@
         "transitAccessibilityMap": {
             "LocationColor": "Location color",
             "PolygonColor": "Accessibility polygon default color"
+        },
+        "transitAccessibilityMapComparison": {
+            "IntersectionLocationColor": "Intersection location color",
+            "IntersectionPolygonColor": "Intersection polygon default color",
+            "ComparisonLocation1Color": "Comparison location 1 color",
+            "ComparisonPolygon1Color": "Intersection polygon 1 default color",
+            "ComparisonLocation2Color": "Comparison location 2 color",
+            "ComparisonPolygon2Color": "Intersection polygon 2 default color"
         }
     },
     "documentationTooltip": {

locales/fr/transit.json

@@ -773,17 +773,23 @@
     "accessibilityComparison": {
         "Title": "Comparaison de cartes d'accessibilité",
         "Legend": "Légende",
+        "ScenarioNPolygon": "Polygone du scénario {{scenarioNumber}}",
+        "ScenarioLocation": "Lieu des scénarios",
         "ScenarioIntersection": "Intersection des scénarios",
+        "ScenarioIntersectionPolygon": "Polygone de l'intersection des scénarios",
         "LocationIntersection": "Intersection des lieux",
+        "LocationIntersectionPolygon": "Polygone de l'intersection des lieux",
         "LocationN": "Lieu {{locationNumber}}",
+        "LocationNPolygon": "Polygone du lieu {{locationNumber}}",
         "Difference": "Différence",
         "SelectMaxTime": "Sélectionner le temps maximal à afficher (en minutes)",
         "ComparisonByScenario": "Comparaison par scénario",
         "ComparisonByLocation": "Comparaison par lieu",
         "contextMenu": {
             "SetAsLocation1": "Définir comme le Lieu 1",
             "SetAsLocation2": "Définir comme le Lieu 2"
-        }
+        },
+        "Colors": "Couleurs"
     },
     "gtfs": {
         "ButtonImport": "Importer",
@@ -1032,6 +1038,14 @@
         "transitAccessibilityMap": {
             "LocationColor": "Couleur du lieu",
             "PolygonColor": "Couleur par défaut du polygone d'accessibilité"
+        },
+        "transitAccessibilityMapComparison": {
+            "IntersectionLocationColor": "Couleur du lieu d'intersection",
+            "IntersectionPolygonColor": "Couleur par défaut du polygone d'intersection",
+            "ComparisonLocation1Color": "Couleur du lieu de comparaison 1",
+            "ComparisonPolygon1Color": "Couleur par défaut du polygone de comparaison 1",
+            "ComparisonLocation2Color": "Couleur du lieu de comparaison 2",
+            "ComparisonPolygon2Color": "Couleur par défaut du polygone de comparaison 2"
         }
     },
     "documentationTooltip": {

packages/chaire-lib-common/src/config/defaultPreferences.config.ts

@@ -390,8 +390,14 @@ const defaultPreferences: PreferencesModel = {
                 walkingSpeedMps: 1.3888888888,
                 walkingSpeedFactor: 1.0, // walking travel times are weighted using this factor: Example: > 1.0 means faster walking, < 1.0 means slower walking
                 maxTotalTravelTimeSeconds: 1800,
-                locationColor: 'rgba(47, 138, 243, 1.0)',
+                locationColor: 'rgba(47, 138, 243, 1)',
                 polygonColor: 'rgba(47, 138, 243, 0.4)',
+                intersectionLocationColor: 'rgba(47, 138, 243, 1)',
+                intersectionPolygonColor: 'rgba(47, 138, 243, 0.6)',
+                comparisonLocation1Color: 'rgba(252, 208, 89, 1)',
+                comparisonPolygon1Color: 'rgba(252, 208, 89, 0.6)',
+                comparisonLocation2Color: 'rgba(231, 74, 184, 1)',
+                comparisonPolygon2Color: 'rgba(231, 74, 184, 0.6)',
                 calculatePois: false,
                 calculatePopulation: false
             },

packages/transition-frontend/src/components/forms/accessibilityComparison/AccessibilityComparisonForm.tsx

@@ -50,7 +50,6 @@ import {
     minutesToSeconds
 } from 'chaire-lib-common/lib/utils/DateTimeUtils';
 import AccessibilityComparisonStatsComponent from './AccessibilityComparisonStatsComponent';
-import * as AccessibilityComparisonConstants from './accessibilityComparisonConstants';
 import { comparisonModes } from './comparisonModes';
 import AccessibilityMapCoordinatesComponent from '../accessibilityMap/widgets/AccessibilityMapCoordinateComponent';
 import TimeOfTripComponent from '../transitRouting/widgets/TimeOfTripComponent';
@@ -90,6 +89,12 @@ interface TransitRoutingFormState extends ChangeEventsState<TransitAccessibility
     contextMenuRoot: Root | undefined;
     alternateScenario1Id?: string;
     alternateScenario2Id?: string;
+    intersectionLocationColor: string;
+    intersectionPolygonColor: string;
+    comparisonLocation1Color: string;
+    comparisonPolygon1Color: string;
+    comparisonLocation2Color: string;
+    comparisonPolygon2Color: string;
 }
 
 class AccessibilityComparisonForm extends ChangeEventsForm<AccessibilityComparisonFormProps, TransitRoutingFormState> {
@@ -123,14 +128,28 @@ class AccessibilityComparisonForm extends ChangeEventsForm<AccessibilityComparis
             alternateScenario1Id: '',
             alternateScenario2Id: '',
             contextMenu: null,
-            contextMenuRoot: undefined
+            contextMenuRoot: undefined,
+            intersectionLocationColor: Preferences.get(
+                'transit.routing.transitAccessibilityMap.intersectionLocationColor'
+            ),
+            intersectionPolygonColor: Preferences.get(
+                'transit.routing.transitAccessibilityMap.intersectionPolygonColor'
+            ),
+            comparisonLocation1Color: Preferences.get(
+                'transit.routing.transitAccessibilityMap.comparisonLocation1Color'
+            ),
+            comparisonPolygon1Color: Preferences.get('transit.routing.transitAccessibilityMap.comparisonPolygon1Color'),
+            comparisonLocation2Color: Preferences.get(
+                'transit.routing.transitAccessibilityMap.comparisonLocation2Color'
+            ),
+            comparisonPolygon2Color: Preferences.get('transit.routing.transitAccessibilityMap.comparisonPolygon2Color')
         };
 
         this.displayMap = this.displayMap.bind(this);
         this.calculateRouting = this.calculateRouting.bind(this);
         this.onScenarioCollectionUpdate = this.onScenarioCollectionUpdate.bind(this);
 
-        routingEngine.updatePointColor(AccessibilityComparisonConstants.INTERSECTION_COLOR);
+        routingEngine.updatePointColor(this.state.intersectionLocationColor);
         if (routingEngine.hasLocation()) {
             (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
                 layerName: 'accessibilityMapPoints',
@@ -175,17 +194,17 @@ class AccessibilityComparisonForm extends ChangeEventsForm<AccessibilityComparis
 
             const numberOfPolygons = routing.attributes.numberOfPolygons as number;
 
-            const colors = {
-                intersectionColor: this.convertToRGBA(AccessibilityComparisonConstants.INTERSECTION_COLOR, 0.6),
-                scenario1Minus2Color: this.convertToRGBA(AccessibilityComparisonConstants.MAP_1_COLOR, 0.6),
-                scenario2Minus1Color: this.convertToRGBA(AccessibilityComparisonConstants.MAP_2_COLOR, 0.6)
+            const polygonColors = {
+                intersectionColor: this.state.intersectionPolygonColor,
+                scenario1Minus2Color: this.state.comparisonPolygon1Color,
+                scenario2Minus1Color: this.state.comparisonPolygon2Color
             };
 
             const mapComparison = await calculateAccessibilityMapComparison(
                 currentResult1.polygons,
                 currentResult2.polygons,
                 numberOfPolygons,
-                colors
+                polygonColors
             );
 
             const finalMap: TransitAccessibilityMapWithPolygonAndTimeResult[] = [];
@@ -498,8 +517,15 @@ class AccessibilityComparisonForm extends ChangeEventsForm<AccessibilityComparis
         };
     }
 
-    private convertToRGBA = (rgbValue: string, alpha: number) => {
-        return rgbValue.replace(')', `, ${alpha})`).replace('rgb', 'rgba');
+    private changeAlphaValue = (rgbaValue: string, alpha: number) => {
+        const rgbaArray = rgbaValue.split(',');
+        if (rgbaArray.length !== 4) {
+            console.error(`The color value ${rgbaValue} isn't properly formatted to convert the alpha value.`);
+            return rgbaValue;
+        }
+
+        rgbaArray[3] = `${alpha})`;
+        return rgbaArray.join();
     };
 
     render() {
@@ -531,30 +557,58 @@ class AccessibilityComparisonForm extends ChangeEventsForm<AccessibilityComparis
             return (
                 <React.Fragment>
                     <Collapsible
-                        trigger={this.props.t('transit:accessibilityComparison:Legend')}
+                        trigger={this.props.t('transit:accessibilityComparison:Colors')}
                         open={true}
                         transitionTime={100}
                     >
+                        {mode === 'scenarios' && (
+                            <div className="tr__form-section">
+                                {this.props.t('transit:accessibilityComparison:ScenarioLocation')}: &nbsp;
+                                <span style={{ color: this.state.intersectionLocationColor }}>&#9673;</span>
+                            </div>
+                        )}
                         <div className="tr__form-section">
-                            {mode === 'scenarios'
-                                ? this.props.t('transit:transitComparison:ScenarioN', { scenarioNumber: '1' })
-                                : this.props.t('transit:accessibilityComparison:LocationN', { locationNumber: '1' })}
+                            {this.props.t(
+                                `transit:accessibilityComparison:${mode === 'scenarios' ? 'Scenario' : 'Location'}IntersectionPolygon`
+                            )}
                             : &nbsp;
-                            <span style={{ color: AccessibilityComparisonConstants.MAP_1_COLOR }}>&#9673;</span>
+                            <span style={{ color: this.state.intersectionPolygonColor }}>&#9673;</span>
                         </div>
+                        {mode === 'locations' && (
+                            <div className="tr__form-section">
+                                {this.props.t('transit:accessibilityComparison:LocationN', { locationNumber: '1' })}:
+                                &nbsp;
+                                <span style={{ color: this.state.comparisonLocation1Color }}>&#9673;</span>
+                            </div>
+                        )}
                         <div className="tr__form-section">
                             {mode === 'scenarios'
-                                ? this.props.t('transit:transitComparison:ScenarioN', { scenarioNumber: '2' })
-                                : this.props.t('transit:accessibilityComparison:LocationN', { locationNumber: '2' })}
+                                ? this.props.t('transit:accessibilityComparison:ScenarioNPolygon', {
+                                    scenarioNumber: '1'
+                                })
+                                : this.props.t('transit:accessibilityComparison:LocationNPolygon', {
+                                    locationNumber: '1'
+                                })}
                             : &nbsp;
-                            <span style={{ color: AccessibilityComparisonConstants.MAP_2_COLOR }}>&#9673;</span>
+                            <span style={{ color: this.state.comparisonPolygon1Color }}>&#9673;</span>
                         </div>
+                        {mode === 'locations' && (
+                            <div className="tr__form-section">
+                                {this.props.t('transit:accessibilityComparison:LocationN', { locationNumber: '2' })}:
+                                &nbsp;
+                                <span style={{ color: this.state.comparisonLocation2Color }}>&#9673;</span>
+                            </div>
+                        )}
                         <div className="tr__form-section">
-                            {this.props.t(
-                                `transit:accessibilityComparison:${mode === 'scenarios' ? 'Scenario' : 'Location'}Intersection`
-                            )}
+                            {mode === 'scenarios'
+                                ? this.props.t('transit:accessibilityComparison:ScenarioNPolygon', {
+                                    scenarioNumber: '2'
+                                })
+                                : this.props.t('transit:accessibilityComparison:LocationNPolygon', {
+                                    locationNumber: '2'
+                                })}
                             : &nbsp;
-                            <span style={{ color: AccessibilityComparisonConstants.INTERSECTION_COLOR }}>&#9673;</span>
+                            <span style={{ color: this.state.comparisonPolygon2Color }}>&#9673;</span>
                         </div>
                     </Collapsible>
 
@@ -951,6 +1005,8 @@ class AccessibilityComparisonForm extends ChangeEventsForm<AccessibilityComparis
                             <AccessibilityComparisonStatsComponent
                                 accessibilityPolygons={this.state.currentPolygons}
                                 mode={mode}
+                                color1={this.changeAlphaValue(this.state.comparisonPolygon1Color, 1)}
+                                color2={this.changeAlphaValue(this.state.comparisonPolygon2Color, 1)}
                             />
                         </React.Fragment>
                     )}
@@ -968,8 +1024,8 @@ class AccessibilityComparisonForm extends ChangeEventsForm<AccessibilityComparis
                             const value = comparisonModes[index];
                             this.onValueChange('selectedMode', { value });
                             if (value === 'scenarios') {
-                                routing.updatePointColor(AccessibilityComparisonConstants.INTERSECTION_COLOR);
-                                alternateRouting.updatePointColor(AccessibilityComparisonConstants.INTERSECTION_COLOR);
+                                routing.updatePointColor(this.state.intersectionLocationColor);
+                                alternateRouting.updatePointColor(this.state.intersectionLocationColor);
                                 if (routing.hasLocation()) {
                                     alternateRouting.setLocation(
                                         routing.attributes.locationGeojson!.geometry.coordinates
@@ -983,8 +1039,8 @@ class AccessibilityComparisonForm extends ChangeEventsForm<AccessibilityComparis
                                     );
                                 }
                             } else if (value === 'locations') {
-                                routing.updatePointColor(AccessibilityComparisonConstants.MAP_1_COLOR);
-                                alternateRouting.updatePointColor(AccessibilityComparisonConstants.MAP_2_COLOR);
+                                routing.updatePointColor(this.state.comparisonLocation1Color);
+                                alternateRouting.updatePointColor(this.state.comparisonLocation2Color);
                                 alternateRouting.attributes.scenarioId = routing.attributes.scenarioId;
                                 if (routing.hasLocation()) {
                                     alternateRouting.setLocation(

packages/transition-frontend/src/components/forms/accessibilityComparison/AccessibilityComparisonStatsComponent.tsx

@@ -7,7 +7,6 @@
 import React, { JSX, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tooltip } from 'react-tooltip';
-import * as AccessibilityComparisonConstants from './accessibilityComparisonConstants';
 import { ComparisonMode } from './comparisonModes';
 import { InputCheckboxBoolean } from 'chaire-lib-frontend/lib/components/input/InputCheckbox';
 
@@ -17,6 +16,8 @@ export interface AccessibilityComparisonStatsComponentProps {
         result2: GeoJSON.FeatureCollection;
     };
     mode: ComparisonMode;
+    color1: string;
+    color2: string;
 }
 
 const AccessibilityComparisonStatsComponent: React.FunctionComponent<AccessibilityComparisonStatsComponentProps> = (
@@ -248,12 +249,12 @@ const AccessibilityComparisonStatsComponent: React.FunctionComponent<Accessibili
                 <thead>
                     <tr>
                         <th></th>
-                        <th style={{ color: AccessibilityComparisonConstants.MAP_1_COLOR }}>
+                        <th style={{ color: props.color1 }}>
                             {props.mode === 'scenarios'
                                 ? t('transit:transitComparison:ScenarioN', { scenarioNumber: '1' })
                                 : t('transit:accessibilityComparison:LocationN', { locationNumber: '1' })}
                         </th>
-                        <th style={{ color: AccessibilityComparisonConstants.MAP_2_COLOR }}>
+                        <th style={{ color: props.color2 }}>
                             {props.mode === 'scenarios'
                                 ? t('transit:transitComparison:ScenarioN', { scenarioNumber: '2' })
                                 : t('transit:accessibilityComparison:LocationN', { locationNumber: '2' })}
@@ -264,13 +265,13 @@ const AccessibilityComparisonStatsComponent: React.FunctionComponent<Accessibili
                 <tbody>{combinedFeaturesStatsTable}</tbody>
             </table>
             <Tooltip id="difference-header" opacity={1}>
-                <span style={{ color: AccessibilityComparisonConstants.MAP_2_COLOR }}>
+                <span style={{ color: props.color2 }}>
                     {props.mode === 'scenarios'
                         ? t('transit:transitComparison:ScenarioN', { scenarioNumber: '2' })
                         : t('transit:accessibilityComparison:LocationN', { locationNumber: '2' })}
                 </span>
                 &nbsp;-&nbsp;
-                <span style={{ color: AccessibilityComparisonConstants.MAP_1_COLOR }}>
+                <span style={{ color: props.color1 }}>
                     {props.mode === 'scenarios'
                         ? t('transit:transitComparison:ScenarioN', { scenarioNumber: '1' })
                         : t('transit:accessibilityComparison:LocationN', { locationNumber: '1' })}