metrics using single feature truth

MobilityData · Nov 19, 2024 · 00698e7 · 00698e7
1 parent b959531
commit 00698e7
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 134 deletions.
diff --git a/web-app/src/app/screens/Analytics/GTFSFeatureAnalytics/index.tsx b/web-app/src/app/screens/Analytics/GTFSFeatureAnalytics/index.tsx
@@ -28,11 +28,14 @@ import {
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { InfoOutlined, ListAltOutlined } from '@mui/icons-material';
-import { featureGroups, getGroupColor } from '../../../utils/analytics';
 import { type FeatureMetrics } from '../types';
 import { useRemoteConfig } from '../../../context/RemoteConfigProvider';
 import MUITooltip from '@mui/material/Tooltip';
 import { GTFS_ORG_LINK } from '../../../constants/Navigation';
+import {
+  DATASET_FEATURES,
+  getComponentDecorators,
+} from '../../../utils/consts';
 
 export default function GTFSFeatureAnalytics(): React.ReactElement {
   const navigateTo = useNavigate();
@@ -44,6 +47,16 @@ export default function GTFSFeatureAnalytics(): React.ReactElement {
   const [error, setError] = useState<string | null>(null);
   const { config } = useRemoteConfig();
 
+  const getUniqueKeyStringValues = (key: keyof FeatureMetrics): string[] => {
+    const subGroups = new Set<string>();
+    data.forEach((item) => {
+      if (item[key] !== undefined) {
+        subGroups.add(item[key] as string);
+      }
+    });
+    return Array.from(subGroups);
+  };
+
   useEffect(() => {
     const fetchData = async (): Promise<void> => {
       try {
@@ -54,13 +67,15 @@ export default function GTFSFeatureAnalytics(): React.ReactElement {
           throw new Error('Network response was not ok');
         }
         const fetchedData = await response.json();
-        const dataWithGroups = fetchedData.map((feature: FeatureMetrics) => ({
-          ...feature,
-          latest_feed_count: feature.feeds_count.slice(-1)[0],
-          feature_group: Object.keys(featureGroups).find((group) =>
-            featureGroups[group].includes(feature.feature),
-          ),
-        }));
+        const dataWithGroups = fetchedData.map((feature: FeatureMetrics) => {
+          return {
+            ...feature,
+            latest_feed_count: feature.feeds_count.slice(-1)[0],
+            feature_group: DATASET_FEATURES[feature.feature]?.component,
+            feature_sub_group:
+              DATASET_FEATURES[feature.feature]?.componentSubgroup,
+          };
+        });
         setData(dataWithGroups);
       } catch (error) {
         if (error instanceof Error) {
@@ -118,13 +133,34 @@ export default function GTFSFeatureAnalytics(): React.ReactElement {
         header: 'Feature Group',
         size: 200,
         filterVariant: 'multi-select',
-        filterSelectOptions: Object.keys(featureGroups),
+        filterSelectOptions: getUniqueKeyStringValues('feature_group'),
+        Cell: ({ cell }: { cell: MRT_Cell<FeatureMetrics> }) => {
+          const group = cell.getValue<string>();
+          return group == null ? null : (
+            <span
+              style={{
+                backgroundColor: getComponentDecorators(group).color,
+                borderRadius: '5px',
+                padding: '2px 8px',
+              }}
+            >
+              {group}
+            </span>
+          );
+        },
+      },
+      {
+        accessorKey: 'feature_sub_group',
+        header: 'Feature Sub Group',
+        size: 200,
+        filterVariant: 'multi-select',
+        filterSelectOptions: getUniqueKeyStringValues('feature_sub_group'),
         Cell: ({ cell }: { cell: MRT_Cell<FeatureMetrics> }) => {
           const group = cell.getValue<string>();
           return group == null ? null : (
             <span
               style={{
-                backgroundColor: getGroupColor(group),
+                backgroundColor: getComponentDecorators(group).color,
                 borderRadius: '5px',
                 padding: '2px 8px',
               }}

diff --git a/web-app/src/app/screens/Analytics/GTFSFeedAnalytics/GTFSFeedAnalyticsTable.tsx b/web-app/src/app/screens/Analytics/GTFSFeedAnalytics/GTFSFeedAnalyticsTable.tsx
@@ -2,10 +2,13 @@ import React, { useMemo } from 'react';
 import { type MRT_Cell, type MRT_ColumnDef } from 'material-react-table';
 import { format } from 'date-fns';
 import { type GTFSFeedMetrics } from '../types';
-import { groupFeatures, getGroupColor } from '../../../utils/analytics';
 import { useNavigate } from 'react-router-dom';
-import { Box, MenuItem, Stack, Tooltip } from '@mui/material';
+import { Box, IconButton, MenuItem, Stack, Tooltip } from '@mui/material';
 import { OpenInNew } from '@mui/icons-material';
+import {
+  getComponentDecorators,
+  groupFeaturesByComponent,
+} from '../../../utils/consts';
 
 /**
  * Returns the columns for the feed analytics table.
@@ -285,75 +288,55 @@ export const useTableColumns = (
         },
         enableSorting: false,
         Cell: ({ cell }: { cell: MRT_Cell<GTFSFeedMetrics> }) => {
-          const { groupedFeatures, otherFeatures } = groupFeatures(
+          const groupedFeatures = groupFeaturesByComponent(
             cell.getValue<string[]>(),
           );
           return (
             <div>
-              {Object.entries(groupedFeatures).map(
-                ([group, features], index) => (
-                  <div key={index} style={{ marginBottom: '10px' }}>
-                    <div
-                      style={{
-                        background: getGroupColor(group),
-                        color: 'black',
-                        borderRadius: '5px',
-                        padding: 5,
-                        marginLeft: 5,
-                        marginBottom: 5,
-                        width: 'fit-content',
-                      }}
-                    >
-                      {group}:
-                    </div>
-                    {features.map((feature, index) => (
+              {Object.entries(groupedFeatures)
+                .sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
+                .map(([group, features], index) => {
+                  const componentDecorator = getComponentDecorators(group);
+                  return (
+                    <div key={index} style={{ marginBottom: '10px' }}>
                       <div
-                        key={index}
-                        style={{ cursor: 'pointer', marginLeft: '10px' }}
-                        className={'navigable-list-item'}
-                        onClick={() => {
-                          navigate(
-                            `/metrics/gtfs/features?featureName=${feature}`,
-                          );
+                        style={{
+                          background: componentDecorator.color,
+                          color: 'black',
+                          borderRadius: '5px',
+                          padding: 5,
+                          marginLeft: 5,
+                          marginBottom: 5,
+                          width: 'fit-content',
                         }}
                       >
-                        {feature}
+                        {group}
                       </div>
-                    ))}
-                  </div>
-                ),
-              )}
-              {otherFeatures.length > 0 && (
-                <div>
-                  <div
-                    style={{
-                      background: getGroupColor('Other'),
-                      color: 'black',
-                      borderRadius: '5px',
-                      padding: 5,
-                      marginLeft: 5,
-                      marginBottom: 5,
-                      width: 'fit-content',
-                    }}
-                  >
-                    Empty Group:
-                  </div>
-                  {otherFeatures.map((feature, index) => (
-                    <div
-                      key={index}
-                      style={{ cursor: 'pointer', marginLeft: '10px' }}
-                      className={'navigable-list-item'}
-                      onClick={() => {
-                        navigate(
-                          `/metrics/gtfs/features?featureName=${feature}`,
-                        );
-                      }}
-                    >
-                      {feature}
+                      {features.map((featureData, index) => (
+                        <div
+                          key={index}
+                          style={{ cursor: 'pointer', marginLeft: '10px' }}
+                          className={'navigable-list-item'}
+                          onClick={() => {
+                            navigate(
+                              `/metrics/gtfs/features?featureName=${featureData.feature}`,
+                            );
+                          }}
+                        >
+                          {featureData.feature}
+                          {featureData.componentSubgroup !== undefined && (
+                            <Tooltip
+                              title={featureData.componentSubgroup}
+                              placement={'top'}
+                            >
+                              <IconButton>{componentDecorator.icon}</IconButton>
+                            </Tooltip>
+                          )}
+                        </div>
+                      ))}
                     </div>
-                  ))}
-                </div>
-              )}
+                  );
+                })}
             </div>
           );
         },

diff --git a/web-app/src/app/screens/Analytics/types.ts b/web-app/src/app/screens/Analytics/types.ts
@@ -41,6 +41,7 @@ export interface FeatureMetrics {
   feeds_count: number[];
   latest_feed_count: number;
   feature_group?: string; // Add a property to handle feature grouping
+  feature_sub_group?: string;
 }
 
 export interface AnalyticsFile {

diff --git a/web-app/src/app/utils/analytics.ts b/web-app/src/app/utils/analytics.ts