Embedded Single Card: parse card route exp alias (#6515)

The card route should be set up to parse experiment ids and return alias for run display names on the internal single card.

Author: bhuang1323

tensorboard/webapp/app_routing/store/app_routing_selectors.ts

@@ -116,11 +116,17 @@ export const getExperimentIdToExperimentAliasMap = createSelector(
   getRouteKind,
   getRouteParams,
   (routeKind, routeParams): {[id: string]: ExperimentAlias} => {
-    if (routeKind !== RouteKind.COMPARE_EXPERIMENT) {
+    const compareParams = routeParams as CompareRouteParams;
+    if (
+      routeKind !== RouteKind.COMPARE_EXPERIMENT &&
+      !(
+        routeKind === RouteKind.CARD &&
+        compareParams.experimentIds.indexOf(',') !== -1
+      )
+    ) {
       return {};
     }
 
-    const compareParams = routeParams as CompareRouteParams;
     const map = getCompareExperimentIdAliasWithNumberSpec(compareParams);
     return Object.fromEntries(map.entries());
   }

tensorboard/webapp/app_routing/store/app_routing_selectors_test.ts

@@ -163,6 +163,40 @@ describe('app_routing_selectors', () => {
       });
     });
 
+    it('returns a map of id to alias for CARD route', () => {
+      const state = buildStateFromAppRoutingState(
+        buildAppRoutingState({
+          activeRoute: buildRoute({
+            routeKind: RouteKind.CARD,
+            params: {
+              experimentIds: 'exp1:123,exp2:234,exp2:345',
+            },
+          }),
+        })
+      );
+
+      expect(selectors.getExperimentIdToExperimentAliasMap(state)).toEqual({
+        123: {aliasText: 'exp1', aliasNumber: 1},
+        234: {aliasText: 'exp2', aliasNumber: 2},
+        345: {aliasText: 'exp2', aliasNumber: 3},
+      });
+    });
+
+    it('returns an empty map for CARD route with single experiment', () => {
+      const state = buildStateFromAppRoutingState(
+        buildAppRoutingState({
+          activeRoute: buildRoute({
+            routeKind: RouteKind.CARD,
+            params: {
+              experimentIds: '1234',
+            },
+          }),
+        })
+      );
+
+      expect(selectors.getExperimentIdToExperimentAliasMap(state)).toEqual({});
+    });
+
     it('returns an empty map for non-compare route', () => {
       const state = buildStateFromAppRoutingState(
         buildAppRoutingState({