diff --git a/src/components/timeline/form/TimelineEditorLayerFilter.svelte b/src/components/timeline/form/TimelineEditorLayerFilter.svelte
index 4afb56f145..de142497de 100644
--- a/src/components/timeline/form/TimelineEditorLayerFilter.svelte
+++ b/src/components/timeline/form/TimelineEditorLayerFilter.svelte
@@ -3,8 +3,6 @@
 <script lang="ts">
   import SearchIcon from '@nasa-jpl/stellar/icons/search.svg?component';
   import { createEventDispatcher } from 'svelte';
-  import { activityTypes } from '../../../stores/plan';
-  import { externalResourceNames, resourceTypes } from '../../../stores/simulation';
   import type { Layer } from '../../../types/timeline';
   import Input from '../../form/Input.svelte';
   import Menu from '../../menus/Menu.svelte';
@@ -12,6 +10,7 @@
 
   export let layer: Layer;
   export let values: string[];
+  export let options: string[] = [];
 
   const dispatch = createEventDispatcher();
 
@@ -21,7 +20,6 @@
   let filteredValues: string[] = [];
   let menuTitle: string = '';
   let selectedValuesMap: Record<string, boolean> = {};
-  let options: string[] = [];
 
   $: if (layer) {
     selectedValuesMap = listToMap(values);
@@ -41,19 +39,6 @@
     filteredValues = options.slice();
   }
 
-  $: if ($activityTypes || $externalResourceNames) {
-    if (layer.chartType === 'activity') {
-      options = $activityTypes.map(t => t.name);
-    } else if (layer.chartType === 'line' || layer.chartType === 'x-range') {
-      options = $resourceTypes
-        .map(t => t.name)
-        .concat($externalResourceNames)
-        .sort();
-    } else {
-      options = [];
-    }
-  }
-
   function listToMap(list: string[]): Record<string, boolean> {
     return list.reduce((map: Record<string, true>, item) => {
       if (!map[item]) {
diff --git a/src/components/timeline/form/TimelineEditorPanel.svelte b/src/components/timeline/form/TimelineEditorPanel.svelte
index aaf21d826f..cc73c88382 100644
--- a/src/components/timeline/form/TimelineEditorPanel.svelte
+++ b/src/components/timeline/form/TimelineEditorPanel.svelte
@@ -10,8 +10,13 @@
   import { onMount } from 'svelte';
   import { dndzone } from 'svelte-dnd-action';
   import { ViewConstants } from '../../../enums/view';
-  import { maxTimeRange, viewTimeRange } from '../../../stores/plan';
-  import { resourcesByViewLayerId, simulationDataset } from '../../../stores/simulation';
+  import { activityTypes, maxTimeRange, viewTimeRange } from '../../../stores/plan';
+  import {
+    externalResourceNames,
+    resourceTypes,
+    resourcesByViewLayerId,
+    simulationDataset,
+  } from '../../../stores/simulation';
   import {
     selectedRow,
     selectedRowId,
@@ -23,6 +28,7 @@
     viewUpdateRow,
     viewUpdateTimeline,
   } from '../../../stores/views';
+  import type { ActivityType } from '../../../types/activity';
   import type {
     ActivityLayer,
     Axis,
@@ -426,6 +432,19 @@
     return [];
   }
 
+  function getFilterOptionsForLayer(layer: Layer, activityTypes: ActivityType[], externalResourceNames: string[]) {
+    if (layer.chartType === 'activity') {
+      return activityTypes.map(t => t.name);
+    } else if (layer.chartType === 'line' || layer.chartType === 'x-range') {
+      return $resourceTypes
+        .map(t => t.name)
+        .concat(externalResourceNames)
+        .sort();
+    }
+
+    return [];
+  }
+
   onMount(() => {
     if ($selectedTimelineId === null) {
       const firstTimeline = $view?.definition.plan.timelines[0];
@@ -928,6 +947,7 @@
                     </span>
                     <TimelineEditorLayerFilter
                       values={getFilterValuesForLayer(layer)}
+                      options={getFilterOptionsForLayer(layer, $activityTypes, $externalResourceNames)}
                       {layer}
                       on:change={event => {
                         const { values } = event.detail;