From 6de696e859d5799c1607c930f08d2adccf456a56 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Thu, 18 Jan 2024 15:50:00 -0600
Subject: [PATCH 1/4] WIP: multiselect component. Need to include initial
 selected options

---
 .../event/event-category-filter.svelte        |  75 -------------
 .../event-category-multiselect-filter.svelte  |  46 ++++++++
 .../event/event-history-timeline.svelte       |  14 ++-
 .../event/event-summary-table.svelte          |   5 +-
 src/lib/components/event/event-summary.svelte |  16 ++-
 src/lib/holocene/select/multi-select.svelte   | 100 ++++++++++++++++++
 .../get-event-categorization.test.ts          |  56 +++++-----
 .../event-history/get-event-categorization.ts |  60 ++++-------
 src/lib/stores/filters.ts                     |   7 +-
 .../[run]/history/compact/+page.svelte        |   5 +-
 .../[run]/history/feed/+page.svelte           |   6 +-
 11 files changed, 223 insertions(+), 167 deletions(-)
 delete mode 100644 src/lib/components/event/event-category-filter.svelte
 create mode 100644 src/lib/components/event/event-category-multiselect-filter.svelte
 create mode 100644 src/lib/holocene/select/multi-select.svelte

diff --git a/src/lib/components/event/event-category-filter.svelte b/src/lib/components/event/event-category-filter.svelte
deleted file mode 100644
index c92f451ba..000000000
--- a/src/lib/components/event/event-category-filter.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-
-  import Icon from '$lib/holocene/icon/icon.svelte';
-  import {
-    Menu,
-    MenuButton,
-    MenuContainer,
-    MenuItem,
-  } from '$lib/holocene/menu';
-  import type { MenuButtonVariant } from '$lib/holocene/menu/menu-button.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import {
-    allEventTypeOptions,
-    compactEventTypeOptions,
-  } from '$lib/models/event-history/get-event-categorization';
-  import { eventCategoryFilter } from '$lib/stores/filters';
-  import { temporalVersion } from '$lib/stores/versions';
-  import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
-  import { isVersionNewer } from '$lib/utilities/version-check';
-
-  export let compact = false;
-  export let variant: MenuButtonVariant = 'table-header';
-
-  $: id = $page.params.id;
-  $: label = compact
-    ? translate('events.event-type')
-    : translate('events.workflow-events');
-
-  let parameter = 'category';
-  let options = compact ? compactEventTypeOptions : allEventTypeOptions;
-
-  $: {
-    if (isVersionNewer('1.21', $temporalVersion)) {
-      options = options.filter(({ option }) => option !== 'update');
-    }
-  }
-
-  $: visibleOption = options.find(
-    ({ option }) => option === $page.url?.searchParams?.get(parameter),
-  );
-  $: $eventCategoryFilter = visibleOption?.option?.toString() ?? undefined;
-
-  const onOptionClick = (value: string) => {
-    updateQueryParameters({
-      parameter: parameter,
-      value,
-      url: $page.url,
-    });
-  };
-</script>
-
-<MenuContainer>
-  <MenuButton
-    active={!!$eventCategoryFilter}
-    {variant}
-    data-testid="event-category-filter"
-    controls="event-category-filter-menu"
-    disabled={!!id}
-  >
-    {label}
-    <Icon name="filter" slot="trailing" />
-  </MenuButton>
-  <Menu class="w-48" id="event-categroy-filter-menu">
-    {#each options as { label, option }}
-      <MenuItem
-        data-testid="event-category-option"
-        selected={$eventCategoryFilter === option}
-        on:click={() => onOptionClick(option)}
-      >
-        {translate(label)}
-      </MenuItem>
-    {/each}
-  </Menu>
-</MenuContainer>
diff --git a/src/lib/components/event/event-category-multiselect-filter.svelte b/src/lib/components/event/event-category-multiselect-filter.svelte
new file mode 100644
index 000000000..39f301399
--- /dev/null
+++ b/src/lib/components/event/event-category-multiselect-filter.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  import MultiSelect from '$lib/holocene/select/multi-select.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    allEventTypeOptions,
+    compactEventTypeOptions,
+  } from '$lib/models/event-history/get-event-categorization';
+  import { temporalVersion } from '$lib/stores/versions';
+  import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
+  import { isVersionNewer } from '$lib/utilities/version-check';
+
+  export let compact = false;
+
+  $: label = compact
+    ? translate('events.event-type')
+    : translate('events.workflow-events');
+
+  let parameter = 'category';
+  let options = compact ? compactEventTypeOptions : allEventTypeOptions;
+
+  $: {
+    if (isVersionNewer('1.21', $temporalVersion)) {
+      options = options.filter(({ value }) => value !== 'update');
+    }
+  }
+
+  const onOptionClick = (_options) => {
+    const value = _options.map((o) => o.value).join(',');
+    updateQueryParameters({
+      parameter: parameter,
+      value,
+      url: $page.url,
+    });
+  };
+</script>
+
+<MultiSelect
+  id="event-category-filter-menu"
+  {options}
+  {label}
+  onChange={onOptionClick}
+  variant="table-header"
+  icon="filter"
+/>
diff --git a/src/lib/components/event/event-history-timeline.svelte b/src/lib/components/event/event-history-timeline.svelte
index a87dab4b5..2e6c5c38c 100644
--- a/src/lib/components/event/event-history-timeline.svelte
+++ b/src/lib/components/event/event-history-timeline.svelte
@@ -35,8 +35,6 @@
   let visualizationRef;
   let timeline;
 
-  $: category = $eventCategoryFilter as EventTypeCategory;
-
   function renderComponentToHTML(Component, props) {
     const container = document.createElement('div');
     new Component({ target: container, props });
@@ -74,7 +72,7 @@
     const firstEvent = sortedHistory[0];
     const finalEvent = sortedHistory[sortedHistory.length - 1];
 
-    if (!category) {
+    if (!$eventCategoryFilter) {
       groups.add({
         id: 'workflow',
         content: renderExecutionName(),
@@ -163,18 +161,18 @@
 
   const filterHistory = (
     history: CommonHistoryEvent[],
-    category: EventTypeCategory,
+    category: EventTypeCategory[],
   ): CommonHistoryEvent[] => {
     if (!category) return history;
     return history.filter((i) => {
-      if (category === CATEGORIES.LOCAL_ACTIVITY) {
+      if (category.includes(CATEGORIES.LOCAL_ACTIVITY)) {
         return isLocalActivityMarkerEvent(i);
       }
-      return i.category === category;
+      return category.includes(i.category);
     });
   };
 
-  const buildTimeline = (category: EventTypeCategory): void => {
+  const buildTimeline = (category: EventTypeCategory[]): void => {
     timeline = new Timeline(
       visualizationRef,
       new DataSet([]),
@@ -210,7 +208,7 @@
     if (timeline) {
       timeline.destroy();
     }
-    buildTimeline(category);
+    buildTimeline($eventCategoryFilter);
   };
 
   $: {
diff --git a/src/lib/components/event/event-summary-table.svelte b/src/lib/components/event/event-summary-table.svelte
index c0b7c76dc..b69fbc3fa 100644
--- a/src/lib/components/event/event-summary-table.svelte
+++ b/src/lib/components/event/event-summary-table.svelte
@@ -3,7 +3,6 @@
 
   import { page } from '$app/stores';
 
-  import EventCategoryFilter from '$lib/components/event/event-category-filter.svelte';
   import EventDateFilter from '$lib/components/event/event-date-filter.svelte';
   import Button from '$lib/holocene/button.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
@@ -11,6 +10,8 @@
   import { translate } from '$lib/i18n/translate';
   import { expandAllEvents } from '$lib/stores/event-view';
 
+  import EventCategoryMultiselectFilter from './event-category-multiselect-filter.svelte';
+
   export let compact = false;
   export let updating = false;
 
@@ -41,7 +42,7 @@
     <th class="w-16 md:w-32">
       <EventDateFilter {compact} />
     </th>
-    <th class="w-44"><EventCategoryFilter {compact} /></th>
+    <th class="w-44"><EventCategoryMultiselectFilter {compact} /></th>
     <th class="w-auto xl:w-80">
       <div class="flex w-full justify-end">
         <Button
diff --git a/src/lib/components/event/event-summary.svelte b/src/lib/components/event/event-summary.svelte
index 3a8bdbc39..dd1e5abed 100644
--- a/src/lib/components/event/event-summary.svelte
+++ b/src/lib/components/event/event-summary.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { page } from '$app/stores';
+
   import EventSummaryRow from '$lib/components/event/event-summary-row.svelte';
   import EventSummaryTable from '$lib/components/event/event-summary-table.svelte';
   import Pagination from '$lib/holocene/pagination.svelte';
@@ -25,14 +27,14 @@
 
   const getEventsOrGroups = (
     items: CommonHistoryEvent[],
-    category: string,
+    category?: string[],
   ): IterableEvent[] => {
     if (category) {
       const filteredItems = items.filter((i) => {
-        if (category === CATEGORIES.LOCAL_ACTIVITY) {
+        if (category.includes(CATEGORIES.LOCAL_ACTIVITY)) {
           return isLocalActivityMarkerEvent(i);
         }
-        return i.category === category;
+        return category.includes(i.category);
       });
       return compact
         ? groupEvents(filteredItems, $eventFilterSort)
@@ -41,7 +43,11 @@
     return compact ? groupEvents(items, $eventFilterSort) : items;
   };
 
-  $: category = $eventCategoryFilter as EventTypeCategory;
+  $: $eventCategoryFilter = $page.url?.searchParams?.get('category')
+    ? ($page.url?.searchParams
+        ?.get('category')
+        .split(',') as EventTypeCategory[])
+    : undefined;
   $: intialEvents =
     $eventFilterSort === 'descending' && !compact
       ? $eventHistory?.end
@@ -50,7 +56,7 @@
     ? $fullEventHistory
     : intialEvents;
   $: initialItem = currentEvents?.[0];
-  $: items = getEventsOrGroups(currentEvents, category);
+  $: items = getEventsOrGroups(currentEvents, $eventCategoryFilter);
   $: updating = currentEvents.length && !$fullEventHistory.length;
 </script>
 
diff --git a/src/lib/holocene/select/multi-select.svelte b/src/lib/holocene/select/multi-select.svelte
new file mode 100644
index 000000000..94c99343f
--- /dev/null
+++ b/src/lib/holocene/select/multi-select.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import Checkbox from '$lib/holocene/checkbox.svelte';
+  import {
+    Menu,
+    MenuButton,
+    MenuContainer,
+    MenuDivider,
+    MenuItem,
+  } from '$lib/holocene/menu';
+
+  import Icon from '../icon/icon.svelte';
+  import type { IconName } from '../icon/paths';
+  import type { MenuButtonVariant } from '../menu/menu-button.svelte';
+
+  type Option = { label: string; value: string };
+  type MultiSelectOptions = Option[];
+
+  export let options: MultiSelectOptions = [];
+  export let onChange: (options: MultiSelectOptions) => void;
+  export let label: string;
+  export let id: string;
+  export let variant: MenuButtonVariant = 'secondary';
+  export let icon: IconName | undefined = undefined;
+
+  let selectedOptions = options;
+
+  const open = writable(false);
+
+  const resetFilter = () => {};
+
+  const onOptionClick = (option: Option) => {
+    if (selectedOptions.find((s) => s.value === option.value)) {
+      selectedOptions = selectedOptions.filter((s) => s.value !== option.value);
+    } else {
+      selectedOptions = [...selectedOptions, option];
+    }
+    onChange(selectedOptions);
+  };
+
+  const onSelectAllOptionClick = () => {
+    selectedOptions = options;
+    onChange([]);
+  };
+
+  const onRemoveAllOptionClick = () => {
+    selectedOptions = [];
+    onChange([]);
+  };
+</script>
+
+<MenuContainer {open} on:close={resetFilter}>
+  <MenuButton
+    hasIndicator
+    controls={id}
+    {variant}
+    on:click={() => {
+      if ($open) resetFilter();
+    }}
+  >
+    {#if icon}<Icon class="md:hidden" name={icon} />{/if}
+    <span class="max-md:hidden">{label}</span>
+  </MenuButton>
+  <Menu {id} keepOpen>
+    {#each options as option (option)}
+      {@const checked = Boolean(
+        selectedOptions.find((s) => s.value === option.value),
+      )}
+      <MenuItem
+        data-testid={option.label}
+        on:click={() => {
+          onOptionClick(option);
+        }}
+      >
+        <Checkbox
+          on:click={() => onOptionClick(option)}
+          slot="leading"
+          {checked}
+          label={option.label}
+          labelHidden
+        />
+        {option.label}
+      </MenuItem>
+    {/each}
+    <MenuDivider />
+    <MenuItem
+      data-testid="multiselect-select-all"
+      on:click={onSelectAllOptionClick}
+    >
+      Select All
+    </MenuItem>
+    <MenuItem
+      data-testid="multiselect-remove-all"
+      on:click={onRemoveAllOptionClick}
+    >
+      Remove All
+    </MenuItem>
+  </Menu>
+</MenuContainer>
diff --git a/src/lib/models/event-history/get-event-categorization.test.ts b/src/lib/models/event-history/get-event-categorization.test.ts
index 03761944c..601faaaf2 100644
--- a/src/lib/models/event-history/get-event-categorization.test.ts
+++ b/src/lib/models/event-history/get-event-categorization.test.ts
@@ -71,52 +71,48 @@ describe('Event Category Data Structures', () => {
   it('should match the allEventTypeOptions to the last snapshot', () => {
     expect(allEventTypeOptions).toMatchInlineSnapshot(`
       [
-        {
-          "label": "events.category.all",
-          "option": undefined,
-        },
         {
           "color": "#8B5CF6",
           "label": "events.category.activity",
-          "option": "activity",
+          "value": "activity",
         },
         {
           "color": "#F59E0B",
           "label": "events.category.child-workflow",
-          "option": "child-workflow",
+          "value": "child-workflow",
         },
         {
           "color": "#10B981",
           "label": "events.category.command",
-          "option": "command",
+          "value": "command",
         },
         {
           "label": "events.category.local-activity",
-          "option": "local-activity",
+          "value": "local-activity",
         },
         {
           "color": "#EC4899",
           "label": "events.category.marker",
-          "option": "marker",
+          "value": "marker",
         },
         {
           "color": "#DD6B20",
           "label": "events.category.signal",
-          "option": "signal",
+          "value": "signal",
         },
         {
           "color": "#1D4ED8",
           "label": "events.category.timer",
-          "option": "timer",
+          "value": "timer",
         },
         {
           "label": "events.category.update",
-          "option": "update",
+          "value": "update",
         },
         {
           "color": "#10B981",
           "label": "events.category.workflow",
-          "option": "workflow",
+          "value": "workflow",
         },
       ]
     `);
@@ -125,42 +121,38 @@ describe('Event Category Data Structures', () => {
   it('should match the compactEventTypeOptions to the last snapshot', () => {
     expect(compactEventTypeOptions).toMatchInlineSnapshot(`
       [
-        {
-          "label": "events.category.all",
-          "option": undefined,
-        },
         {
           "color": "#8B5CF6",
           "label": "events.category.activity",
-          "option": "activity",
+          "value": "activity",
         },
         {
           "color": "#F59E0B",
           "label": "events.category.child-workflow",
-          "option": "child-workflow",
+          "value": "child-workflow",
         },
         {
           "label": "events.category.local-activity",
-          "option": "local-activity",
+          "value": "local-activity",
         },
         {
           "color": "#EC4899",
           "label": "events.category.marker",
-          "option": "marker",
+          "value": "marker",
         },
         {
           "color": "#DD6B20",
           "label": "events.category.signal",
-          "option": "signal",
+          "value": "signal",
         },
         {
           "color": "#1D4ED8",
           "label": "events.category.timer",
-          "option": "timer",
+          "value": "timer",
         },
         {
           "label": "events.category.update",
-          "option": "update",
+          "value": "update",
         },
       ]
     `);
@@ -314,40 +306,40 @@ describe('timelineEventTypeOptions', () => {
       {
         color: '#8B5CF6',
         label: 'events.category.activity',
-        option: 'activity',
+        value: 'activity',
       },
       {
         color: '#F59E0B',
         label: 'events.category.child-workflow',
-        option: 'child-workflow',
+        value: 'child-workflow',
       },
       {
         color: '#10B981',
         label: 'events.category.command',
-        option: 'command',
+        value: 'command',
       },
       {
         label: 'events.category.local-activity',
-        option: 'local-activity',
+        value: 'local-activity',
       },
       {
         color: '#EC4899',
         label: 'events.category.marker',
-        option: 'marker',
+        value: 'marker',
       },
       {
         color: '#DD6B20',
         label: 'events.category.signal',
-        option: 'signal',
+        value: 'signal',
       },
       {
         color: '#1D4ED8',
         label: 'events.category.timer',
-        option: 'timer',
+        value: 'timer',
       },
       {
         label: 'events.category.update',
-        option: 'update',
+        value: 'update',
       },
     ]);
   });
diff --git a/src/lib/models/event-history/get-event-categorization.ts b/src/lib/models/event-history/get-event-categorization.ts
index 3cf2a8c42..75adbf406 100644
--- a/src/lib/models/event-history/get-event-categorization.ts
+++ b/src/lib/models/event-history/get-event-categorization.ts
@@ -1,4 +1,4 @@
-import type { I18nKey } from '$lib/i18n';
+import { translate } from '$lib/i18n/translate';
 import type {
   EventType,
   IterableEvent,
@@ -75,57 +75,47 @@ export const eventTypeCategorizations: Readonly<
 };
 
 export type EventTypeOption = {
-  label: I18nKey;
-  option: EventTypeCategory | undefined;
-  color?: string;
+  label: string;
+  value: EventTypeCategory;
 };
 
 export const allEventTypeOptions: EventTypeOption[] = [
-  { label: 'events.category.all', option: undefined },
   {
-    label: 'events.category.activity',
-    option: CATEGORIES.ACTIVITY,
-    color: '#8B5CF6',
+    label: translate('events.category.activity'),
+    value: CATEGORIES.ACTIVITY,
   },
   {
-    label: 'events.category.child-workflow',
-    option: CATEGORIES.CHILD_WORKFLOW,
-    color: '#F59E0B',
+    label: translate('events.category.child-workflow'),
+    value: CATEGORIES.CHILD_WORKFLOW,
   },
   {
-    label: 'events.category.command',
-    option: CATEGORIES.COMMAND,
-    color: '#10B981',
+    label: translate('events.category.command'),
+    value: CATEGORIES.COMMAND,
   },
   {
-    label: 'events.category.local-activity',
-    option: CATEGORIES.LOCAL_ACTIVITY,
+    label: translate('events.category.local-activity'),
+    value: CATEGORIES.LOCAL_ACTIVITY,
   },
   {
-    label: 'events.category.marker',
-    option: CATEGORIES.MARKER,
-    color: '#EC4899',
+    label: translate('events.category.marker'),
+    value: CATEGORIES.MARKER,
   },
   {
-    label: 'events.category.signal',
-    option: CATEGORIES.SIGNAL,
-    color: '#DD6B20',
+    label: translate('events.category.signal'),
+    value: CATEGORIES.SIGNAL,
   },
   {
-    label: 'events.category.timer',
-    option: CATEGORIES.TIMER,
-    color: '#1D4ED8',
+    label: translate('events.category.timer'),
+    value: CATEGORIES.TIMER,
   },
-  { label: 'events.category.update', option: CATEGORIES.UPDATE },
+  { label: translate('events.category.update'), value: CATEGORIES.UPDATE },
   {
-    label: 'events.category.workflow',
-    option: CATEGORIES.WORKFLOW,
-    color: '#10B981',
+    label: translate('events.category.workflow'),
+    value: CATEGORIES.WORKFLOW,
   },
 ];
 
-const compactEventTypes: (EventTypeCategory | undefined)[] = [
-  undefined,
+const compactEventTypes: EventTypeCategory[] = [
   CATEGORIES.ACTIVITY,
   CATEGORIES.LOCAL_ACTIVITY,
   CATEGORIES.CHILD_WORKFLOW,
@@ -136,9 +126,7 @@ const compactEventTypes: (EventTypeCategory | undefined)[] = [
 ];
 
 export const compactEventTypeOptions: EventTypeOption[] =
-  allEventTypeOptions.filter(({ option }) =>
-    compactEventTypes.includes(option),
-  );
+  allEventTypeOptions.filter(({ value }) => compactEventTypes.includes(value));
 
 const timelineEventTypes: EventTypeCategory[] = [
   CATEGORIES.ACTIVITY,
@@ -151,9 +139,7 @@ const timelineEventTypes: EventTypeCategory[] = [
   CATEGORIES.UPDATE,
 ];
 export const timelineEventTypeOptions: EventTypeOption[] =
-  allEventTypeOptions.filter(({ option }) =>
-    timelineEventTypes.includes(option),
-  );
+  allEventTypeOptions.filter(({ value }) => timelineEventTypes.includes(value));
 
 export const getEventCategory = (eventType: EventType): EventTypeCategory => {
   return eventTypeCategorizations[eventType];
diff --git a/src/lib/stores/filters.ts b/src/lib/stores/filters.ts
index c58fc68cb..2602aa4b0 100644
--- a/src/lib/stores/filters.ts
+++ b/src/lib/stores/filters.ts
@@ -5,6 +5,7 @@ import { page } from '$app/stores';
 
 import type { WorkflowFilter } from '$lib/models/workflow-filters';
 import { persistStore } from '$lib/stores/persist-store';
+import type { EventTypeCategory } from '$lib/types/events';
 
 const query = derived([page], ([$page]) => $page.url.searchParams.get('query'));
 const category = derived([page], ([$page]) =>
@@ -38,7 +39,9 @@ export const workflowFilters = writable<WorkflowFilter[]>(
   updateWorkflowFilters,
 );
 
-const updateEventCategoryFilter: StartStopNotifier<string | null> = (set) => {
+const updateEventCategoryFilter: StartStopNotifier<
+  EventTypeCategory[] | null
+> = (set) => {
   return parameters.subscribe(({ category }) => {
     if (!category && get(eventCategoryFilter)) {
       // Clear filter if there is no category
@@ -47,7 +50,7 @@ const updateEventCategoryFilter: StartStopNotifier<string | null> = (set) => {
   });
 };
 
-export const eventCategoryFilter = writable<string | undefined>(
+export const eventCategoryFilter = writable<EventTypeCategory[] | undefined>(
   undefined,
   updateEventCategoryFilter,
 );
diff --git a/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/compact/+page.svelte b/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/compact/+page.svelte
index b3a26b90c..cbe56fb2b 100644
--- a/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/compact/+page.svelte
+++ b/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/compact/+page.svelte
@@ -8,15 +8,14 @@
   import { eventFilterSort, expandAllEvents } from '$lib/stores/event-view';
   import { eventCategoryFilter } from '$lib/stores/filters';
   import { importEventGroups } from '$lib/stores/import-events';
-  import type { EventTypeCategory } from '$lib/types/events';
 
-  $: category = $eventCategoryFilter as EventTypeCategory;
   $: sortedEvents =
     $eventFilterSort === 'descending'
       ? [...$importEventGroups].reverse()
       : $importEventGroups;
   $: filteredEventGroups = sortedEvents.filter((event: EventGroup) => {
-    if (category) return event.category === category;
+    if ($eventCategoryFilter)
+      return $eventCategoryFilter.includes(event.category);
     return event;
   });
 
diff --git a/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/feed/+page.svelte b/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/feed/+page.svelte
index fc8702066..cc797a5cf 100644
--- a/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/feed/+page.svelte
+++ b/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/feed/+page.svelte
@@ -7,15 +7,15 @@
   import { eventFilterSort, expandAllEvents } from '$lib/stores/event-view';
   import { eventCategoryFilter } from '$lib/stores/filters';
   import { importEvents } from '$lib/stores/import-events';
-  import type { EventTypeCategory, WorkflowEvent } from '$lib/types/events';
+  import type { WorkflowEvent } from '$lib/types/events';
 
-  $: category = $eventCategoryFilter as EventTypeCategory;
   $: sortedEvents =
     $eventFilterSort === 'descending'
       ? [...$importEvents].reverse()
       : $importEvents;
   $: filteredEvents = sortedEvents.filter((event: WorkflowEvent) => {
-    if (category) return event.category === category;
+    if ($eventCategoryFilter)
+      return $eventCategoryFilter.includes(event.category);
     return event;
   });
 

From 15bd4becb594428f391ec6b7ee407df0ff42d95f Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Thu, 18 Jan 2024 16:09:30 -0600
Subject: [PATCH 2/4] Fix initialOptions and localActivityFilter

---
 .../event/event-category-multiselect-filter.svelte       | 7 +++++++
 src/lib/components/event/event-history-timeline.svelte   | 2 +-
 src/lib/components/event/event-summary.svelte            | 2 +-
 src/lib/holocene/select/multi-select.svelte              | 9 ++++++---
 src/lib/i18n/locales/en/common.ts                        | 1 +
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/event/event-category-multiselect-filter.svelte b/src/lib/components/event/event-category-multiselect-filter.svelte
index 39f301399..d5d357f3b 100644
--- a/src/lib/components/event/event-category-multiselect-filter.svelte
+++ b/src/lib/components/event/event-category-multiselect-filter.svelte
@@ -7,6 +7,7 @@
     allEventTypeOptions,
     compactEventTypeOptions,
   } from '$lib/models/event-history/get-event-categorization';
+  import { eventCategoryFilter } from '$lib/stores/filters';
   import { temporalVersion } from '$lib/stores/versions';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
   import { isVersionNewer } from '$lib/utilities/version-check';
@@ -25,6 +26,9 @@
       options = options.filter(({ value }) => value !== 'update');
     }
   }
+  $: initialSelected = $eventCategoryFilter
+    ? options.filter((o) => $eventCategoryFilter.includes(o.value))
+    : [];
 
   const onOptionClick = (_options) => {
     const value = _options.map((o) => o.value).join(',');
@@ -39,7 +43,10 @@
 <MultiSelect
   id="event-category-filter-menu"
   {options}
+  {initialSelected}
   {label}
+  selectAllLabel={translate('common.select-all')}
+  clearAllLabel={translate('common.clear-all-capitalized')}
   onChange={onOptionClick}
   variant="table-header"
   icon="filter"
diff --git a/src/lib/components/event/event-history-timeline.svelte b/src/lib/components/event/event-history-timeline.svelte
index 2e6c5c38c..ce7fcfe17 100644
--- a/src/lib/components/event/event-history-timeline.svelte
+++ b/src/lib/components/event/event-history-timeline.svelte
@@ -166,7 +166,7 @@
     if (!category) return history;
     return history.filter((i) => {
       if (category.includes(CATEGORIES.LOCAL_ACTIVITY)) {
-        return isLocalActivityMarkerEvent(i);
+        return category.includes(i.category) || isLocalActivityMarkerEvent(i);
       }
       return category.includes(i.category);
     });
diff --git a/src/lib/components/event/event-summary.svelte b/src/lib/components/event/event-summary.svelte
index dd1e5abed..76be164fa 100644
--- a/src/lib/components/event/event-summary.svelte
+++ b/src/lib/components/event/event-summary.svelte
@@ -32,7 +32,7 @@
     if (category) {
       const filteredItems = items.filter((i) => {
         if (category.includes(CATEGORIES.LOCAL_ACTIVITY)) {
-          return isLocalActivityMarkerEvent(i);
+          return category.includes(i.category) || isLocalActivityMarkerEvent(i);
         }
         return category.includes(i.category);
       });
diff --git a/src/lib/holocene/select/multi-select.svelte b/src/lib/holocene/select/multi-select.svelte
index 94c99343f..6ccd003c5 100644
--- a/src/lib/holocene/select/multi-select.svelte
+++ b/src/lib/holocene/select/multi-select.svelte
@@ -18,13 +18,16 @@
   type MultiSelectOptions = Option[];
 
   export let options: MultiSelectOptions = [];
+  export let initialSelected: MultiSelectOptions = [];
   export let onChange: (options: MultiSelectOptions) => void;
   export let label: string;
   export let id: string;
   export let variant: MenuButtonVariant = 'secondary';
   export let icon: IconName | undefined = undefined;
+  export let selectAllLabel: string;
+  export let clearAllLabel: string;
 
-  let selectedOptions = options;
+  let selectedOptions = initialSelected.length ? initialSelected : options;
 
   const open = writable(false);
 
@@ -88,13 +91,13 @@
       data-testid="multiselect-select-all"
       on:click={onSelectAllOptionClick}
     >
-      Select All
+      {selectAllLabel}
     </MenuItem>
     <MenuItem
       data-testid="multiselect-remove-all"
       on:click={onRemoveAllOptionClick}
     >
-      Remove All
+      {clearAllLabel}
     </MenuItem>
   </Menu>
 </MenuContainer>
diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts
index f54b614f4..30d1e1434 100644
--- a/src/lib/i18n/locales/en/common.ts
+++ b/src/lib/i18n/locales/en/common.ts
@@ -18,6 +18,7 @@ export const Strings = {
   local: 'Local',
   cancel: 'Cancel',
   'clear-all': 'Clear all',
+  'clear-all-capitalized': 'Clear All',
   'ante-meridiem': 'AM',
   'post-meridiem': 'PM',
   ascending: 'Ascending',

From 96de12d03713477b025a64fbffbad14c0a2454e2 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Thu, 18 Jan 2024 16:18:45 -0600
Subject: [PATCH 3/4] Remove timelineEventTypeOptions since we don't use it

---
 .../get-event-categorization.test.ts          | 90 ++++---------------
 .../event-history/get-event-categorization.ts | 13 ---
 2 files changed, 16 insertions(+), 87 deletions(-)

diff --git a/src/lib/models/event-history/get-event-categorization.test.ts b/src/lib/models/event-history/get-event-categorization.test.ts
index 601faaaf2..5351d60a7 100644
--- a/src/lib/models/event-history/get-event-categorization.test.ts
+++ b/src/lib/models/event-history/get-event-categorization.test.ts
@@ -13,7 +13,6 @@ import {
   getEventCategory,
   getEventsInCategory,
   isCategoryType,
-  timelineEventTypeOptions,
 } from './get-event-categorization';
 
 import eventsCompleted from '$fixtures/events.completed.json';
@@ -72,46 +71,39 @@ describe('Event Category Data Structures', () => {
     expect(allEventTypeOptions).toMatchInlineSnapshot(`
       [
         {
-          "color": "#8B5CF6",
-          "label": "events.category.activity",
+          "label": "Activity",
           "value": "activity",
         },
         {
-          "color": "#F59E0B",
-          "label": "events.category.child-workflow",
+          "label": "Child Workflow",
           "value": "child-workflow",
         },
         {
-          "color": "#10B981",
-          "label": "events.category.command",
+          "label": "Command",
           "value": "command",
         },
         {
-          "label": "events.category.local-activity",
+          "label": "Local Activity",
           "value": "local-activity",
         },
         {
-          "color": "#EC4899",
-          "label": "events.category.marker",
+          "label": "Marker",
           "value": "marker",
         },
         {
-          "color": "#DD6B20",
-          "label": "events.category.signal",
+          "label": "Signal",
           "value": "signal",
         },
         {
-          "color": "#1D4ED8",
-          "label": "events.category.timer",
+          "label": "Timer",
           "value": "timer",
         },
         {
-          "label": "events.category.update",
+          "label": "Update",
           "value": "update",
         },
         {
-          "color": "#10B981",
-          "label": "events.category.workflow",
+          "label": "Workflow",
           "value": "workflow",
         },
       ]
@@ -122,36 +114,31 @@ describe('Event Category Data Structures', () => {
     expect(compactEventTypeOptions).toMatchInlineSnapshot(`
       [
         {
-          "color": "#8B5CF6",
-          "label": "events.category.activity",
+          "label": "Activity",
           "value": "activity",
         },
         {
-          "color": "#F59E0B",
-          "label": "events.category.child-workflow",
+          "label": "Child Workflow",
           "value": "child-workflow",
         },
         {
-          "label": "events.category.local-activity",
+          "label": "Local Activity",
           "value": "local-activity",
         },
         {
-          "color": "#EC4899",
-          "label": "events.category.marker",
+          "label": "Marker",
           "value": "marker",
         },
         {
-          "color": "#DD6B20",
-          "label": "events.category.signal",
+          "label": "Signal",
           "value": "signal",
         },
         {
-          "color": "#1D4ED8",
-          "label": "events.category.timer",
+          "label": "Timer",
           "value": "timer",
         },
         {
-          "label": "events.category.update",
+          "label": "Update",
           "value": "update",
         },
       ]
@@ -299,48 +286,3 @@ describe('isCategoryType', () => {
     expect(isCategoryType('bogus')).toBe(false);
   });
 });
-
-describe('timelineEventTypeOptions', () => {
-  it('should match return valid timeline event types', () => {
-    expect(timelineEventTypeOptions).toEqual([
-      {
-        color: '#8B5CF6',
-        label: 'events.category.activity',
-        value: 'activity',
-      },
-      {
-        color: '#F59E0B',
-        label: 'events.category.child-workflow',
-        value: 'child-workflow',
-      },
-      {
-        color: '#10B981',
-        label: 'events.category.command',
-        value: 'command',
-      },
-      {
-        label: 'events.category.local-activity',
-        value: 'local-activity',
-      },
-      {
-        color: '#EC4899',
-        label: 'events.category.marker',
-        value: 'marker',
-      },
-      {
-        color: '#DD6B20',
-        label: 'events.category.signal',
-        value: 'signal',
-      },
-      {
-        color: '#1D4ED8',
-        label: 'events.category.timer',
-        value: 'timer',
-      },
-      {
-        label: 'events.category.update',
-        value: 'update',
-      },
-    ]);
-  });
-});
diff --git a/src/lib/models/event-history/get-event-categorization.ts b/src/lib/models/event-history/get-event-categorization.ts
index 75adbf406..c9fc206c6 100644
--- a/src/lib/models/event-history/get-event-categorization.ts
+++ b/src/lib/models/event-history/get-event-categorization.ts
@@ -128,19 +128,6 @@ const compactEventTypes: EventTypeCategory[] = [
 export const compactEventTypeOptions: EventTypeOption[] =
   allEventTypeOptions.filter(({ value }) => compactEventTypes.includes(value));
 
-const timelineEventTypes: EventTypeCategory[] = [
-  CATEGORIES.ACTIVITY,
-  CATEGORIES.LOCAL_ACTIVITY,
-  CATEGORIES.CHILD_WORKFLOW,
-  CATEGORIES.COMMAND,
-  CATEGORIES.MARKER,
-  CATEGORIES.SIGNAL,
-  CATEGORIES.TIMER,
-  CATEGORIES.UPDATE,
-];
-export const timelineEventTypeOptions: EventTypeOption[] =
-  allEventTypeOptions.filter(({ value }) => timelineEventTypes.includes(value));
-
 export const getEventCategory = (eventType: EventType): EventTypeCategory => {
   return eventTypeCategorizations[eventType];
 };

From 626174a01caa023513d3bb814981566ed3af103b Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Fri, 19 Jan 2024 10:38:59 -0600
Subject: [PATCH 4/4] Add active, cleanup MultiSelect, update timeline when
 filter changes

---
 .../event-category-multiselect-filter.svelte     |  1 +
 .../event/event-history-timeline.svelte          | 14 ++++++++++++--
 src/lib/holocene/select/multi-select.svelte      | 16 ++++------------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/event/event-category-multiselect-filter.svelte b/src/lib/components/event/event-category-multiselect-filter.svelte
index d5d357f3b..9c379f6b8 100644
--- a/src/lib/components/event/event-category-multiselect-filter.svelte
+++ b/src/lib/components/event/event-category-multiselect-filter.svelte
@@ -45,6 +45,7 @@
   {options}
   {initialSelected}
   {label}
+  active={!!$eventCategoryFilter}
   selectAllLabel={translate('common.select-all')}
   clearAllLabel={translate('common.clear-all-capitalized')}
   onChange={onOptionClick}
diff --git a/src/lib/components/event/event-history-timeline.svelte b/src/lib/components/event/event-history-timeline.svelte
index ce7fcfe17..559b5f91d 100644
--- a/src/lib/components/event/event-history-timeline.svelte
+++ b/src/lib/components/event/event-history-timeline.svelte
@@ -172,13 +172,17 @@
     });
   };
 
-  const buildTimeline = (category: EventTypeCategory[]): void => {
+  const buildTimeline = (): void => {
     timeline = new Timeline(
       visualizationRef,
       new DataSet([]),
       new DataSet([]),
       getTimelineOptions($workflowRun.workflow),
     );
+    filterAndSetItems($eventCategoryFilter);
+  };
+
+  const filterAndSetItems = (category: EventTypeCategory[]) => {
     const reverseHistory =
       $eventFilterSort === 'descending' && $eventViewType === 'feed';
     const sortedHistory = reverseHistory
@@ -208,7 +212,7 @@
     if (timeline) {
       timeline.destroy();
     }
-    buildTimeline($eventCategoryFilter);
+    buildTimeline();
   };
 
   $: {
@@ -216,6 +220,12 @@
       drawTimeline();
     }
   }
+
+  $: {
+    if (timeline) {
+      filterAndSetItems($eventCategoryFilter);
+    }
+  }
 </script>
 
 <Accordion
diff --git a/src/lib/holocene/select/multi-select.svelte b/src/lib/holocene/select/multi-select.svelte
index 6ccd003c5..8f33f1900 100644
--- a/src/lib/holocene/select/multi-select.svelte
+++ b/src/lib/holocene/select/multi-select.svelte
@@ -26,15 +26,14 @@
   export let icon: IconName | undefined = undefined;
   export let selectAllLabel: string;
   export let clearAllLabel: string;
+  export let active = false;
 
   let selectedOptions = initialSelected.length ? initialSelected : options;
 
   const open = writable(false);
 
-  const resetFilter = () => {};
-
   const onOptionClick = (option: Option) => {
-    if (selectedOptions.find((s) => s.value === option.value)) {
+    if (selectedOptions.some((s) => s.value === option.value)) {
       selectedOptions = selectedOptions.filter((s) => s.value !== option.value);
     } else {
       selectedOptions = [...selectedOptions, option];
@@ -53,15 +52,8 @@
   };
 </script>
 
-<MenuContainer {open} on:close={resetFilter}>
-  <MenuButton
-    hasIndicator
-    controls={id}
-    {variant}
-    on:click={() => {
-      if ($open) resetFilter();
-    }}
-  >
+<MenuContainer {open}>
+  <MenuButton hasIndicator controls={id} {variant} {active}>
     {#if icon}<Icon class="md:hidden" name={icon} />{/if}
     <span class="max-md:hidden">{label}</span>
   </MenuButton>