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": "Comparison polygon 1 default color",
+            "ComparisonLocation2Color": "Comparison location 2 color",
+            "ComparisonPolygon2Color": "Comparison 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,16 @@ class AccessibilityComparisonForm extends ChangeEventsForm<AccessibilityComparis
         };
     }
 
-    private convertToRGBA = (rgbValue: string, alpha: number) => {
-        return rgbValue.replace(')', `, ${alpha})`).replace('rgb', 'rgba');
+    // Takes in a color string of the rgba format and returns a new one with the same rgb values but the inputed alpha value.
+    // Necessary for the stats component. We want to pass the polygons colors as props to color some text in the results table, but the colors for those are transparent, while we want to text to be opaque.
+    private changeAlphaValue = (rgbaValue: string, alpha: number) => {
+        const rgbaArray = rgbaValue.split(',');
+        if (rgbaArray.length !== 4) {
+            return rgbaValue;
+        }
+
+        rgbaArray[3] = `${alpha})`;
+        return rgbaArray.join();
     };
 
     render() {
@@ -531,30 +558,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 +1006,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 +1025,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 +1040,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' })}