feat(web): filter the schedule by track (#3792)

- closes #687

Author: abraham

packages/translations/source/en.xlf

@@ -299,6 +299,9 @@
 <trans-unit id="common.sign-in">
   <source>Sign in</source>
 </trans-unit>
+<trans-unit id="shared.filter-menu.tracks">
+  <source>Tracks</source>
+</trans-unit>
 <trans-unit id="shared.filter-menu.complexity">
   <source>Complexity</source>
 </trans-unit>

packages/web/src/components/shared/filter-menu.test.ts

@@ -122,6 +122,32 @@ describe('filter-menu', () => {
     });
   });
 
+  it('names tracks by their titles, in the panel and once selected', async () => {
+    const { element, shadowRoot } = await render({
+      filterGroups: [
+        {
+          key: FilterGroupKey.track,
+          filters: [{ group: FilterGroupKey.track, tag: 'expo-hall', label: 'Expo hall' }],
+        },
+      ],
+      selectedFilters: [{ group: FilterGroupKey.track, tag: 'expo-hall' }],
+    });
+    shadowRoot.querySelector('hb-button')!.click();
+    await element.updateComplete;
+
+    expect(shadowRoot.querySelector('.group-title')).toHaveTextContent('Tracks');
+    expect(shadowRoot.querySelector('.panel hb-chip')).toHaveTextContent('Expo hall');
+    expect(shadowRoot.querySelector<HbChip>('.panel hb-chip')!.selected).toBe(true);
+    expect(shadowRoot.querySelector('ul.selected hb-chip')).toHaveTextContent('Expo hall');
+
+    shadowRoot.querySelector<HTMLElement>('.panel hb-chip')!.click();
+
+    expect(filterUtils.toggleFilter).toHaveBeenCalledWith({
+      group: FilterGroupKey.track,
+      tag: 'expo-hall',
+    });
+  });
+
   it('clears every filter', async () => {
     const { shadowRoot } = await render({
       selectedFilters: [{ group: FilterGroupKey.tags, tag: 'android' }],

packages/web/src/components/shared/filter-menu.ts

@@ -14,7 +14,7 @@ import '../ui/hb-chip';
 import { ThemedElement } from '../themed-element';
 
 /**
- * A Filters button that shows the tag and complexity chips under it, and the selected filters as
+ * A Filters button that shows the track, tag and complexity chips under it, and the selected filters
  * chips that remove themselves. Filters live in the URL, so they survive reloads and links.
  */
 @customElement('filter-menu')
@@ -102,9 +102,22 @@ export class FilterMenu extends ThemedElement {
   accessor opened = false;
 
   private groupTitle(key: FilterGroupKey) {
-    return key === FilterGroupKey.tags
-      ? msg('Tags', { id: 'shared.filter-menu.tags' })
-      : msg('Complexity', { id: 'shared.filter-menu.complexity' });
+    switch (key) {
+      case FilterGroupKey.tags:
+        return msg('Tags', { id: 'shared.filter-menu.tags' });
+      case FilterGroupKey.track:
+        return msg('Tracks', { id: 'shared.filter-menu.tracks' });
+      default:
+        return msg('Complexity', { id: 'shared.filter-menu.complexity' });
+    }
+  }
+
+  // Selected filters come from the URL, which has the tag but not the label.
+  private label(selected: Filter) {
+    const filter = this.filterGroups
+      .find((group) => group.key === selected.group)
+      ?.filters.find((item) => generateClassName(item.tag) === selected.tag);
+    return filter?.label ?? selected.tag;
   }
 
   private resultsLabel(count: number) {
@@ -140,7 +153,7 @@ export class FilterMenu extends ThemedElement {
                     (filter) => html`
                       <li>
                         <hb-chip filter selected @click="${() => this.toggle(filter)}">
-                          ${filter.tag}
+                          ${this.label(filter)}
                         </hb-chip>
                       </li>
                     `,
@@ -180,7 +193,7 @@ export class FilterMenu extends ThemedElement {
                           style="${styleMap(group.key === FilterGroupKey.tags ? tagChipStyle(filter.tag) : {})}"
                           @click="${() => this.toggle(filter)}"
                         >
-                          ${filter.tag}
+                          ${filter.label ?? filter.tag}
                         </hb-chip>
                       </li>
                     `,

packages/web/src/models/filter-group.ts

@@ -3,6 +3,7 @@ import type { Filter } from './filter';
 export enum FilterGroupKey {
   tags = 'tags',
   complexity = 'complexity',
+  track = 'track',
 }
 
 export interface FilterGroup {

packages/web/src/models/filter.ts

@@ -3,4 +3,6 @@ import { FilterGroupKey } from './filter-group';
 export interface Filter {
   group: FilterGroupKey;
   tag: string;
+  /** What the chip shows, when it isn't the tag, such as a track's title for its ID. */
+  label?: string;
 }

packages/web/src/store/sessions/selectors.test.ts

@@ -1,6 +1,7 @@
 import { Success } from '@abraham/remotedata';
 import { describe, expect, it } from 'vitest';
 import { selectFilterGroups, selectSession } from './selectors';
+import { scheduleTracks } from '../../config/site';
 import { FilterGroupKey } from '../../models/filter-group';
 import type { Session } from '../../models/session';
 import type { RootState } from '..';
@@ -31,19 +32,22 @@ describe('selectSession', () => {
 });
 
 describe('selectFilterGroups', () => {
-  it('builds filter groups from the unique tags and complexity values, for the requested groups', () => {
+  it('builds filter groups from the tracks and the unique tags and complexity values', () => {
     const state = { sessions: new Success(sessions) } as unknown as RootState;
 
     const groups = selectFilterGroups(state, undefined);
 
-    expect(groups.map((group) => group.key)).toStrictEqual(['tags', 'complexity']);
+    expect(groups.map((group) => group.key)).toStrictEqual(['track', 'tags', 'complexity']);
     expect(groups[0]!.filters).toStrictEqual(
+      scheduleTracks.map(({ id, title }) => ({ group: 'track', tag: id, label: title })),
+    );
+    expect(groups[1]!.filters).toStrictEqual(
       expect.arrayContaining([
         { group: 'tags', tag: 'a11y' },
         { group: 'tags', tag: 'web' },
       ]),
     );
-    expect(groups[1]!.filters).toStrictEqual(
+    expect(groups[2]!.filters).toStrictEqual(
       expect.arrayContaining([
         { group: 'complexity', tag: 'Beginner' },
         { group: 'complexity', tag: 'Advanced' },

packages/web/src/store/sessions/selectors.ts

@@ -1,6 +1,7 @@
 import { Success } from '@abraham/remotedata';
 import { createSelector } from '@reduxjs/toolkit';
 import type { RootState } from '..';
+import { scheduleTracks } from '../../config/site';
 import type { Filter } from '../../models/filter';
 import { type FilterGroup, FilterGroupKey } from '../../models/filter-group';
 import type { Session } from '../../models/session';
@@ -50,7 +51,11 @@ export const selectSession = createSelector(
 // Kept as a stable module-level reference (rather than a default parameter
 // literal) so repeated calls with no explicit `groups` argument pass the
 // same array instance, preserving `createSelector`'s memoization.
-const DEFAULT_FILTER_GROUPS: FilterGroupKey[] = [FilterGroupKey.tags, FilterGroupKey.complexity];
+const DEFAULT_FILTER_GROUPS: FilterGroupKey[] = [
+  FilterGroupKey.track,
+  FilterGroupKey.tags,
+  FilterGroupKey.complexity,
+];
 
 const selectGroups = (_state: RootState, groups: FilterGroupKey[] = DEFAULT_FILTER_GROUPS) =>
   groups;
@@ -66,6 +71,18 @@ export const selectFilterGroups = createSelector(
   selectGroups,
   (sessions: Session[], groups: FilterGroupKey[]): FilterGroup[] => {
     return [
+      {
+        key: FilterGroupKey.track,
+        // With one track, there's nothing to pick.
+        filters:
+          scheduleTracks.length > 1
+            ? scheduleTracks.map(({ id, title }) => ({
+                group: FilterGroupKey.track,
+                tag: id,
+                label: title,
+              }))
+            : [],
+      },
       {
         key: FilterGroupKey.tags,
         filters: buildFilters(sessions, FilterGroupKey.tags),

packages/web/src/utils/filters.test.ts

@@ -18,13 +18,14 @@ describe('parseFilters', () => {
     expect(parseFilters()).toStrictEqual([]);
   });
 
-  it('parses tags and complexity query params into filters', () => {
-    setUrl('/?tags=a11y&tags=web&complexity=beginner');
+  it('parses tags, complexity and track query params into filters', () => {
+    setUrl('/?tags=a11y&tags=web&complexity=beginner&track=expo-hall');
 
     expect(parseFilters()).toStrictEqual([
       { group: FilterGroupKey.tags, tag: 'a11y' },
       { group: FilterGroupKey.tags, tag: 'web' },
       { group: FilterGroupKey.complexity, tag: 'beginner' },
+      { group: FilterGroupKey.track, tag: 'expo-hall' },
     ]);
   });
 });

packages/web/src/utils/filters.ts

@@ -17,15 +17,10 @@ export const clearFilters = () => setQueryString('');
 export const parseFilters = (): Filter[] => {
   // Pages are built without a query string.
   if (isServer) return [];
-  const { search } = window.location;
-  const searchParams = new URLSearchParams(search);
-  const tags = searchParams.getAll(FilterGroupKey.tags).map((tag) => {
-    return { group: FilterGroupKey.tags, tag };
-  });
-  const complexities = searchParams.getAll(FilterGroupKey.complexity).map((tag) => {
-    return { group: FilterGroupKey.complexity, tag };
-  });
-  return [...tags, ...complexities];
+  const searchParams = new URLSearchParams(window.location.search);
+  return [FilterGroupKey.tags, FilterGroupKey.complexity, FilterGroupKey.track].flatMap((group) =>
+    searchParams.getAll(group).map((tag) => ({ group, tag })),
+  );
 };
 
 const matchingFilter = (filterA: Filter, filterB: Filter) => {

packages/web/src/views/schedule/my-schedule.test.ts

@@ -8,7 +8,13 @@ import './my-schedule';
 const day = (date: string, items: unknown[] = []): BuiltDay => ({
   date,
   tracks: [{ id: 'track-1', title: 'Track 1' }],
-  timeslots: [{ startTime: '10:00', endTime: '11:00', sessions: [{ items } as never] }],
+  timeslots: [
+    {
+      startTime: '10:00',
+      endTime: '11:00',
+      sessions: [{ gridArea: '1 / 1 / 2 / 2', items } as never],
+    },
+  ],
   tags: [],
 });