feat: exclude sub-components from the PER components filter in Operational Learning

Author: samshara

app/src/views/OperationalLearning/Stats/OperationalLearningMap/index.tsx

@@ -53,9 +53,8 @@ interface ClickedPoint {
     lngLat: mapboxgl.LngLatLike;
 }
 
-const LEARNING_COUNT_LOW_COLOR = '#E0E3E7';
+const LEARNING_COUNT_LOW_COLOR = '#AEB7C2';
 const LEARNING_COUNT_HIGH_COLOR = '#011E41';
-// const bluePointCirclePaint = getPointCirclePaint(COLOR_BLUE);
 
 interface Props {
     className?: string;
@@ -129,7 +128,7 @@ function OperationalLearningMap(props: Props) {
             'circle-opacity': 0.9,
             'circle-color': [
                 'interpolate',
-                ['exponential', 1],
+                ['linear'],
                 ['number', ['get', 'learningCount']],
                 0,
                 LEARNING_COUNT_LOW_COLOR,
@@ -140,28 +139,8 @@ function OperationalLearningMap(props: Props) {
                 'interpolate',
                 ['linear'],
                 ['zoom'],
-                3, [
-                    'interpolate',
-                    ['exponential', 1],
-                    ['number', ['get', 'learningCount']],
-                    0,
-                    0,
-                    1,
-                    5,
-                    maxScaleValue,
-                    20,
-                ],
-                8, [
-                    'interpolate',
-                    ['exponential', 1],
-                    ['number', ['get', 'learningCount']],
-                    0,
-                    0,
-                    1,
-                    10,
-                    maxScaleValue,
-                    30,
-                ],
+                3, 10,
+                8, 15,
             ],
         };
     }, [learningByCountry]);

app/src/views/OperationalLearning/i18n.json

@@ -22,6 +22,7 @@
         "here": "here",
         "beta": "beta",
         "failedToFetchSummary": "Failed to fetch operational learning summary",
-        "failedToFetchLearning": "Failed to fetch operational learning"
+        "failedToFetchLearning": "Failed to fetch operational learning",
+        "failedToFetchPerComponents": "Failed to fetch PER components"
     }
 }

app/src/views/OperationalLearning/index.tsx

@@ -47,7 +47,6 @@ import { type components } from '#generated/types';
 import useCountry from '#hooks/domain/useCountry';
 import useDisasterTypes, { type DisasterType } from '#hooks/domain/useDisasterType';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
-import usePerComponent from '#hooks/domain/usePerComponent';
 import useSecondarySector from '#hooks/domain/useSecondarySector';
 import useAlert from '#hooks/useAlert';
 import useFilterState from '#hooks/useFilterState';
@@ -132,7 +131,21 @@ export function Component() {
     const countryList = useCountry({ region: rawFilter.region });
     const disasterTypeOptions = useDisasterTypes();
     const secondarySectorOptions = useSecondarySector();
-    const perComponentOptions = usePerComponent();
+    const {
+        response: perComponentsResponse,
+    } = useRequest({
+        url: '/api/v2/per-formcomponent/',
+        query: {
+            exclude_subcomponents: true,
+        },
+        preserveResponse: true,
+        onFailure: () => {
+            alert.show(
+                strings.failedToFetchPerComponents,
+                { variant: 'danger' },
+            );
+        },
+    });
 
     const {
         pending: opsLearningSummaryPending,
@@ -361,7 +374,7 @@ export function Component() {
                         onChange={onFilterChange}
                         disasterTypeOptions={disasterTypeOptions}
                         secondarySectorOptions={secondarySectorOptions}
-                        perComponentOptions={perComponentOptions}
+                        perComponentOptions={perComponentsResponse?.results}
                         organizationTypeOptions={opsLearningOrganizationTypes?.results}
                         perLearningTypeOptions={perLearningTypeOptions}
                         organizationTypePending={opsLearningOrganizationTypePending}
@@ -415,7 +428,7 @@ export function Component() {
                                                 name="perComponents"
                                                 onDismiss={onFilterChange}
                                                 value={rawFilter.perComponents}
-                                                options={perComponentOptions}
+                                                options={perComponentsResponse?.results}
                                                 labelSelector={getFormattedComponentName}
                                                 keySelector={numericIdSelector}
                                             />