diff --git a/e2e-tests/fixtures/Plan.ts b/e2e-tests/fixtures/Plan.ts
index 084d3b011c..da69b548ac 100644
--- a/e2e-tests/fixtures/Plan.ts
+++ b/e2e-tests/fixtures/Plan.ts
@@ -249,7 +249,7 @@ export class Plan {
   }
 
   async fillActivityPresetName(presetName: string) {
-    await this.panelActivityForm.getByRole('button', { name: 'Set Preset' }).click();
+    await this.panelActivityForm.getByRole('combobox', { name: 'None' }).click();
     await this.panelActivityForm.locator('.dropdown-header').waitFor({ state: 'attached' });
     await this.panelActivityForm.getByPlaceholder('Enter preset name').click();
     await this.panelActivityForm.getByPlaceholder('Enter preset name').fill(presetName);
@@ -271,7 +271,7 @@ export class Plan {
   }
 
   async fillSimulationTemplateName(templateName: string) {
-    await this.panelSimulation.getByRole('button', { name: 'Set Template' }).click();
+    await this.panelSimulation.locator('div[name="Set Template"]').click();
     await this.panelSimulation.locator('.dropdown-header').waitFor({ state: 'attached' });
     await this.panelSimulation.getByPlaceholder('Enter template name').click();
     await this.panelSimulation.getByPlaceholder('Enter template name').fill(templateName);
@@ -374,22 +374,23 @@ export class Plan {
   }
 
   async selectActivityAnchorByIndex(index: number) {
-    await this.panelActivityForm.getByRole('button', { name: 'Set Anchor' }).click();
+    const anchorCollapse = this.panelActivityForm.getByRole('group', { name: 'Anchor-collapse' });
+    await anchorCollapse.getByRole('combobox').click();
 
-    await this.panelActivityForm.getByRole('menuitem').nth(index).waitFor({ state: 'attached' });
-    const anchorMenuName = await this.panelActivityForm.getByRole('menuitem').nth(index)?.innerText();
-    await this.panelActivityForm.getByRole('menuitem').nth(index).click();
-    await this.panelActivityForm.getByRole('menuitem').nth(index).waitFor({ state: 'detached' });
+    await anchorCollapse.getByRole('menuitem').nth(index).waitFor({ state: 'attached' });
+    const anchorMenuName = await anchorCollapse.getByRole('menuitem').nth(index)?.innerText();
+    await anchorCollapse.getByRole('menuitem').nth(index).click();
+    await anchorCollapse.getByRole('menuitem').nth(index).waitFor({ state: 'detached' });
 
     await this.page.waitForFunction(
       anchorMenuName => document.querySelector('.anchor-form .selected-display-value')?.innerHTML === anchorMenuName,
       anchorMenuName,
     );
-    await expect(this.panelActivityForm.getByRole('textbox', { name: anchorMenuName })).toBeVisible();
+    await expect(anchorCollapse.getByRole('combobox', { name: anchorMenuName })).toBeVisible();
   }
 
   async selectActivityPresetByName(presetName: string) {
-    await this.panelActivityForm.getByRole('button', { name: 'Set Preset' }).click();
+    await this.panelActivityForm.locator('div[name="Set Preset"]').click();
 
     await this.panelActivityForm.getByRole('menuitem', { name: presetName }).waitFor({ state: 'attached' });
     await this.panelActivityForm.getByRole('menuitem', { name: presetName }).click();
@@ -415,11 +416,11 @@ export class Plan {
         document.querySelector('.activity-preset-input-container .selected-display-value')?.innerHTML === presetName,
       presetName,
     );
-    await expect(this.panelActivityForm.getByRole('textbox', { name: presetName })).toBeVisible();
+    await expect(this.panelActivityForm.getByRole('combobox', { name: presetName })).toBeVisible();
   }
 
   async selectSimulationTemplateByName(templateName: string) {
-    await this.panelSimulation.getByRole('button', { name: 'Set Template' }).click();
+    await this.panelSimulation.locator('div[name="Set Template"]').click();
 
     await this.panelSimulation.getByRole('menuitem', { name: templateName }).waitFor({ state: 'attached' });
     await this.panelSimulation.getByRole('menuitem', { name: templateName }).click();
@@ -446,7 +447,7 @@ export class Plan {
         templateName,
       templateName,
     );
-    await expect(this.panelSimulation.getByRole('textbox', { name: templateName })).toBeVisible();
+    await expect(this.panelSimulation.getByRole('combobox', { name: templateName })).toBeVisible();
   }
 
   async showConstraintsLayout() {
diff --git a/e2e-tests/tests/plan-activities.test.ts b/e2e-tests/tests/plan-activities.test.ts
index 4ccc0d97dc..0822ee5487 100644
--- a/e2e-tests/tests/plan-activities.test.ts
+++ b/e2e-tests/tests/plan-activities.test.ts
@@ -69,7 +69,7 @@ test.describe.serial('Plan Activities', () => {
       () => document.querySelector('.anchor-form .selected-display-value')?.innerHTML === 'To Plan',
     );
 
-    await expect(plan.panelActivityForm.getByRole('textbox', { name: 'To Plan' })).toBeVisible();
+    await expect(plan.panelActivityForm.getByRole('combobox', { name: 'To Plan' })).toBeVisible();
   });
 
   test('Deleting multiple activity directives but only 1 has a remaining anchored dependent should prompt for just the one with a remaining dependent', async () => {
diff --git a/e2e-tests/tests/plan-activity-presets.test.ts b/e2e-tests/tests/plan-activity-presets.test.ts
index 086966b05c..37f657938c 100644
--- a/e2e-tests/tests/plan-activity-presets.test.ts
+++ b/e2e-tests/tests/plan-activity-presets.test.ts
@@ -57,7 +57,7 @@ test.beforeAll(async ({ baseURL, browser }) => {
 
   await plan.selectActivityPresetByName('None');
 
-  await expect(plan.panelActivityForm.getByRole('textbox', { name: 'None' })).toBeVisible();
+  await expect(plan.panelActivityForm.getByRole('combobox', { name: 'None' })).toBeVisible();
 });
 
 test.afterAll(async () => {
@@ -72,18 +72,18 @@ test.afterAll(async () => {
 test.describe.serial('Plan Activity Presets', () => {
   test(`Setting a preset to a directive should update the parameter values`, async () => {
     await plan.selectActivityPresetByName('Preset 1');
-    await expect(page.getByRole('textbox', { name: 'Preset 1' })).toBeVisible();
+    await expect(page.getByRole('combobox', { name: 'Preset 1' })).toBeVisible();
   });
 
   test(`Removing an activity preset from a directive should reflect that it is no longer present`, async () => {
     await plan.selectActivityPresetByName('None');
-    await expect(page.getByRole('textbox', { name: 'None' })).toBeVisible();
+    await expect(page.getByRole('combobox', { name: 'None' })).toBeVisible();
   });
 
   test('Deleting an activity preset should remove it from the list of presets', async () => {
     await plan.selectActivityPresetByName('Preset 1');
 
-    await page.getByRole('button', { name: 'Set Preset' }).click();
+    await page.getByRole('combobox', { name: 'Preset 1' }).click();
 
     await page.getByRole('button', { name: 'Delete preset' }).waitFor({ state: 'attached' });
     await page.getByRole('button', { name: 'Delete preset' }).click();
@@ -96,6 +96,6 @@ test.describe.serial('Plan Activity Presets', () => {
       () => document.querySelector('.activity-preset-input-container .selected-display-value')?.innerHTML === 'None',
     );
 
-    await expect(page.getByRole('textbox', { name: 'None' })).toBeVisible();
+    await expect(page.getByRole('combobox', { name: 'None' })).toBeVisible();
   });
 });
diff --git a/e2e-tests/tests/plan-simulation-templates.test.ts b/e2e-tests/tests/plan-simulation-templates.test.ts
index 10bd72bed0..9079dcd036 100644
--- a/e2e-tests/tests/plan-simulation-templates.test.ts
+++ b/e2e-tests/tests/plan-simulation-templates.test.ts
@@ -59,7 +59,7 @@ test.beforeAll(async ({ baseURL, browser }) => {
 
   await plan.selectSimulationTemplateByName('None');
 
-  expect(page.getByRole('textbox', { name: 'None' })).toBeVisible();
+  expect(page.getByRole('combobox', { name: 'None' })).toBeVisible();
 });
 
 test.afterAll(async () => {
@@ -75,19 +75,19 @@ test.describe.serial('Plan Simulation Templates', async () => {
   test(`Setting a simulation template to a simulation should update the parameter values`, async () => {
     await plan.selectSimulationTemplateByName('Template 1');
 
-    expect(plan.panelSimulation.getByRole('textbox', { name: 'Template 1' })).toBeVisible();
+    expect(plan.panelSimulation.getByRole('combobox', { name: 'Template 1' })).toBeVisible();
   });
 
   test(`Removing an simulation template from a simulation should reflect that it is no longer present`, async () => {
     await plan.selectSimulationTemplateByName('None');
 
-    expect(page.getByRole('textbox', { name: 'None' })).toBeVisible();
+    expect(page.getByRole('combobox', { name: 'None' })).toBeVisible();
   });
 
   test('Deleting an simulation template should remove it from the list of templates', async () => {
     await plan.selectSimulationTemplateByName('Template 1');
 
-    await page.getByRole('button', { name: 'Set Template' }).click();
+    await page.getByRole('combobox', { name: 'Template 1' }).click();
 
     await page.getByRole('button', { name: 'Delete Template' }).waitFor({ state: 'attached' });
     await page.getByRole('button', { name: 'Delete Template' }).click();
@@ -98,6 +98,6 @@ test.describe.serial('Plan Simulation Templates', async () => {
 
     await page.waitForFunction(() => document.querySelector('.selected-display-value')?.innerHTML === 'None');
 
-    expect(page.getByRole('textbox', { name: 'None' })).toBeVisible();
+    expect(page.getByRole('combobox', { name: 'None' })).toBeVisible();
   });
 });
diff --git a/e2e-tests/tests/timeline-view-editing.test.ts b/e2e-tests/tests/timeline-view-editing.test.ts
index 5b9e39ea52..62d64a3655 100644
--- a/e2e-tests/tests/timeline-view-editing.test.ts
+++ b/e2e-tests/tests/timeline-view-editing.test.ts
@@ -50,6 +50,7 @@ test.describe.serial('Timeline View Editing', () => {
   test('Add an activity to the parent plan', async () => {
     await plan.showPanel(PanelNames.TIMELINE_ITEMS);
     await plan.addActivity('PickBanana');
+    await plan.addActivity('PeelBanana');
   });
 
   test('Change the start time of the activity', async () => {
@@ -105,26 +106,121 @@ test.describe.serial('Timeline View Editing', () => {
     // Look for back button indicating that the row editor is active
     expect(page.locator('.section-back-button ').first()).toBeDefined();
 
-    const existingLayerCount = await page.locator('.timeline-layer').count();
-
     // Give the row a name
     await page.locator('input[name="name"]').first().fill(rowName);
     await page.locator('input[name="name"]').first().blur();
+  });
+
+  test('Add an activity layer', async () => {
+    const activityLayerEditor = page.getByLabel('Activity Layer-editor');
+    const existingLayerCount = await activityLayerEditor.locator('.timeline-layer-editor').count();
 
-    // Add a layer
-    await page.getByRole('button', { name: 'New Layer' }).click();
-    const newLayerCount = await page.locator('.timeline-layer').count();
+    // Add an activity layer
+    await activityLayerEditor.getByRole('button', { name: 'New Activity Layer' }).click();
+    const newLayerCount = await activityLayerEditor.locator('.timeline-layer-editor').count();
     expect(newLayerCount - existingLayerCount).toEqual(1);
 
-    // Expect an activity layer to be created by default
-    expect(await page.locator('select[name="chartType"]').last().inputValue()).toBe('activity');
+    // Expect the activity layer to include all activities
+    expect(await activityLayerEditor.locator('.timeline-layer-editor').first()).toHaveText('Activity Layer');
+  });
+
+  test('Edit an activity layer', async () => {
+    const activityLayerEditor = page.getByLabel('Activity Layer-editor');
+
+    // Open the activity filter builder
+    await activityLayerEditor
+      .locator('.timeline-layer-editor')
+      .first()
+      .getByLabel('Toggle activity filter builder modal')
+      .click();
+
+    // Expect that the modal is present
+    const modal = activityLayerEditor.getByRole('dialog');
+    expect(modal).toBeDefined();
+
+    // Expect that layer name is showing in the name input
+    expect(modal.locator('input[name="layer-name"]')).toHaveValue('Activity Layer');
+
+    // Expect that the resulting types list is not empty
+    const resultingTypesList = modal.locator('.resulting-types-list');
+    const allActivityTypesCount = await resultingTypesList.locator('.activity-type-result').count();
+    expect(allActivityTypesCount).toBeGreaterThan(0);
+
+    // Expect that manually selecting types cause the types to appear in the resulting types list
+    await modal.locator("input[name='manual-types-filter-input']").click();
+    expect(await modal.locator('.manual-types-menu').first()).toBeDefined();
+    await modal.getByRole('menuitem', { name: 'ChangeProducer' }).click();
+    await modal.getByRole('menuitem', { name: 'ControllableDurationActivity' }).click();
+    await page.keyboard.press('Escape');
+
+    expect(await resultingTypesList.getByText('ChangeProducer')).toBeDefined();
+    expect(await resultingTypesList.getByText('ControllableDurationActivity')).toBeDefined();
+
+    // Expect that dynamic types can be added
+    await modal.getByLabel('dynamic-types').getByRole('button', { name: 'Add Filter' }).click();
+    expect(await modal.getByLabel('dynamic-types').getByRole('listitem').count()).toBe(1);
+    await modal.getByLabel('dynamic-types').getByRole('listitem').locator("input[name='filter-value']").fill('banana');
+    expect(await resultingTypesList.locator('.activity-type-result').count()).toEqual(11);
+
+    // Expect that other filters can be added
+    await modal.getByLabel('other-filters').getByRole('button', { name: 'Add Filter' }).click();
+    expect(await modal.getByLabel('other-filters').getByRole('listitem').count()).toBe(1);
+    // Select parameter field
+    await modal.getByLabel('other-filters').locator("select[aria-label='field']").selectOption('Parameter');
+    // Select specific parameter
+    await modal.getByLabel('other-filters').getByText('Select Parameter').click();
+    await modal.getByLabel('other-filters').getByText('quantity (int)').click();
+    // Select operator
+    await modal.getByLabel('other-filters').locator("select[aria-label='operator']").selectOption('equals');
+    // Fill filter value input
+    await modal.getByLabel('other-filters').getByRole('listitem').locator("input[name='filter-value']").fill('10');
+    // Ensure that only one instance (PickBanana) is listed
+    expect(await modal.getByText('1 instance')).toBeDefined();
+
+    // Expect that type subfilters can be added
+    const activityResult = resultingTypesList.getByRole('listitem', { name: 'activity-type-result-PickBanana' });
+    await activityResult.getByRole('button', { name: 'Add Filter' }).click();
+    expect(await activityResult.getByRole('listitem').count()).toBe(1);
+    // Select name field
+    await activityResult.locator("select[aria-label='field']").selectOption('Name');
+    // Select operator
+    await activityResult.locator("select[aria-label='operator']").selectOption('includes');
+    // Fill filter value input
+    await activityResult.getByRole('listitem').locator("input[name='filter-value']").fill('foo');
+    // Ensure that only one instance (PickBanana) is listed
+    expect(await modal.getByText('0 instances')).toBeDefined();
+
+    // Expect that type subfilters can be removed
+    await activityResult.getByRole('button', { name: 'Remove filter' }).click();
+    expect(await modal.getByText('1 instance')).toBeDefined();
+
+    // Expect that other filters can be removed
+    await modal.getByLabel('other-filters').getByRole('button', { name: 'Remove filter' }).click();
+    expect(await modal.getByText('2 instances')).toBeDefined();
+
+    // Expect that dynamic types can be removed
+    await modal.getByLabel('dynamic-types').getByRole('button', { name: 'Remove filter' }).click();
+    expect(await resultingTypesList.locator('.activity-type-result').count()).toEqual(2);
+
+    // Expect that manual types can be cleared
+    await modal.locator("input[name='manual-types-filter-input']").click();
+    await modal.getByRole('menuitem', { name: 'ChangeProducer' }).click();
+    await page.keyboard.press('Escape');
+    await modal.getByRole('button', { name: 'Remove Types' }).click();
+    expect(await resultingTypesList.locator('.activity-type-result').count()).toEqual(allActivityTypesCount);
 
-    // Expect the filter list to open
-    await page.getByPlaceholder('Search').last().click();
-    await expect(page.locator('.menu-slot > .header')).toBeDefined();
+    // Give the layer a new name
+    await modal.locator('input[name="layer-name"]').fill('Foo');
 
-    // Add all activities
-    await page.locator('button', { hasText: /Select [0-9]* activit/ }).click();
+    // Close the modal
+    await modal.getByRole('button', { name: 'close' }).click();
+
+    // Expect name to match given name
+    expect(await activityLayerEditor.locator('.timeline-layer-editor').first()).toHaveText('Foo');
+  });
+
+  test('Change activity layer settings', async () => {
+    const activityLayerEditor = await page.getByLabel('Activity Layer-editor');
 
     // Expect to not see an activity tree group in this row
     expect(await page.locator('.timeline-row-wrapper', { hasText: rowName }).locator('.activity-tree').count()).toBe(0);
@@ -141,9 +237,55 @@ test.describe.serial('Timeline View Editing', () => {
     ).toBe(1);
 
     // Delete an activity layer
-    await page.getByRole('button', { name: 'Layer Settings' }).last().click();
-    await page.getByText('Delete Layer').click();
-    const finalLayerCount = await page.locator('.timeline-layer').count();
-    expect(finalLayerCount - newLayerCount).toEqual(-1);
+    await activityLayerEditor.locator('.timeline-layer-editor').first().getByRole('button', { name: 'Delete' }).click();
+    expect(await activityLayerEditor.locator('.timeline-layer-editor').count()).toBe(0);
+  });
+
+  test('Add a resource layer', async () => {
+    const resourceLayerEditor = await page.getByLabel('Resource Layer-editor');
+    const yAxisEditor = await page.getByLabel('Y Axis-editor');
+    const existingLayerCount = await resourceLayerEditor.locator('.timeline-layer-editor').count();
+    const existingYAxesCount = await yAxisEditor.locator('.timeline-y-axis').count();
+
+    // Expect no y-axis label to exist for the row in the timeline
+    expect(
+      await page.locator('.timeline-row-wrapper', { hasText: rowName }).locator('.row-header-y-axis-label').count(),
+    ).toBe(0);
+
+    // Add a resource layer
+    await resourceLayerEditor.getByRole('button', { name: 'New Resource Layer' }).click();
+    const newLayerCount = await resourceLayerEditor.locator('.timeline-layer-editor').count();
+    expect(newLayerCount - existingLayerCount).toEqual(1);
+
+    // Expect a y-axis to have been automatically created
+    const newYAxisCount = await yAxisEditor.locator('.timeline-y-axis').count();
+    expect(newYAxisCount - existingYAxesCount).toEqual(1);
+
+    // Select a resource
+    await resourceLayerEditor.getByRole('combobox').click();
+    await resourceLayerEditor.getByRole('menuitem', { name: '/peel' }).waitFor({ state: 'attached' });
+    await resourceLayerEditor.getByRole('menuitem', { name: '/peel' }).click();
+    await resourceLayerEditor.getByRole('menuitem', { name: '/peel' }).waitFor({ state: 'detached' });
+
+    // Run simulation
+    await plan.showPanel(PanelNames.SIMULATION, true);
+    await plan.runSimulation();
+
+    // Expect the resource to have a y-axis label in the timline
+    expect(
+      await page.locator('.timeline-row-wrapper', { hasText: rowName }).locator('.row-header-y-axis-label').count(),
+    ).toBe(1);
+
+    // Duplicate a resource layer
+    await resourceLayerEditor
+      .locator('.timeline-layer-editor')
+      .first()
+      .getByRole('button', { name: 'Duplicate' })
+      .click();
+    expect(await resourceLayerEditor.locator('.timeline-layer-editor').count()).toBe(2);
+
+    // Delete a resource layer
+    await resourceLayerEditor.locator('.timeline-layer-editor').first().getByRole('button', { name: 'Delete' }).click();
+    expect(await resourceLayerEditor.locator('.timeline-layer-editor').count()).toBe(1);
   });
 });
diff --git a/package-lock.json b/package-lock.json
index 06f8c5ece2..62be98fb51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,9 +56,11 @@
         "@lezer/generator": "^1.7.0",
         "@lezer/highlight": "^1.2.0",
         "@lezer/lr": "^1.4.0",
+        "@neodrag/svelte": "^2.0.6",
         "@playwright/test": "^1.49.1",
         "@poppanator/sveltekit-svg": "^4.2.1",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@tanstack/svelte-virtual": "^3.11.2",
         "@testing-library/svelte": "^4.0.2",
         "@types/cookie": "^0.6.0",
         "@types/d3-array": "^3.0.5",
@@ -1133,6 +1135,12 @@
       "resolved": "https://registry.npmjs.org/@nasa-jpl/stellar/-/stellar-1.1.18.tgz",
       "integrity": "sha512-e+26M01HFrGBZBQwsxxoJ8OSbRKn/zdUatwRryuPaEIm9RNJwDiejYqIoWCLn9s04hVeYr4PRe6IXa0nPR95vg=="
     },
+    "node_modules/@neodrag/svelte": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@neodrag/svelte/-/svelte-2.0.6.tgz",
+      "integrity": "sha512-jjmTjRTMJaer2IyEIoS5xbccmFmOpkeoTKpBORkMItCPjHWE19eW3kvH9SuTvZJAKnKERVNGdW3VBuDxZif9Dg==",
+      "dev": true
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1595,6 +1603,32 @@
         "vite": "^5.0.0"
       }
     },
+    "node_modules/@tanstack/svelte-virtual": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/svelte-virtual/-/svelte-virtual-3.11.2.tgz",
+      "integrity": "sha512-o0VWDf8GlkZ8S5E2GjQq39qhZIB6U1Kej05/aTdxIQy18c022CxYgGWUydmrWJE3DV2ZA/q+Zm30oqnSRhQ4Lw==",
+      "dev": true,
+      "dependencies": {
+        "@tanstack/virtual-core": "3.11.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "svelte": "^3.48.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.11.2.tgz",
+      "integrity": "sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.4",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
diff --git a/package.json b/package.json
index 32e5b016f9..e1c1666e39 100644
--- a/package.json
+++ b/package.json
@@ -86,8 +86,10 @@
     "@lezer/highlight": "^1.2.0",
     "@lezer/lr": "^1.4.0",
     "@playwright/test": "^1.49.1",
+    "@neodrag/svelte": "^2.0.6",
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@tanstack/svelte-virtual": "^3.11.2",
     "@testing-library/svelte": "^4.0.2",
     "@types/cookie": "^0.6.0",
     "@types/d3-array": "^3.0.5",
diff --git a/src/assets/filter-with-plus.svg b/src/assets/filter-with-plus.svg
new file mode 100644
index 0000000000..5be45c60db
--- /dev/null
+++ b/src/assets/filter-with-plus.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.75 3C14.75 2.44772 14.3023 2 13.75 2L1.75 2C1.19771 2 0.75 2.44772 0.75 3C0.75 3.55228 1.19771 4 1.75 4L13.75 4C14.3023 4 14.75 3.55229 14.75 3Z" fill="currentColor"/>
+  <path d="M12.5 7C12.5 6.58579 12.1642 6.25 11.75 6.25L3.75 6.25C3.33579 6.25 3 6.58579 3 7C3 7.41421 3.33579 7.75 3.75 7.75L11.0929 7.75C11.4903 7.57416 11.9208 7.45962 12.3726 7.41838C12.453 7.29887 12.5 7.15492 12.5 7Z" fill="currentColor"/>
+  <path d="M8.65134 11.5H5.75C5.47386 11.5 5.25 11.2761 5.25 11C5.25 10.7239 5.47386 10.5 5.75 10.5H8.77415C8.69393 10.82 8.65134 11.1551 8.65134 11.5C8.65134 11.4999 8.65134 11.5001 8.65134 11.5Z" fill="currentColor"/>
+  <path d="M13.25 9.50001C13.25 9.22387 13.0261 9.00001 12.75 9.00001C12.4738 9.00001 12.25 9.22387 12.25 9.50001V11H10.75C10.4738 11 10.25 11.2239 10.25 11.5C10.25 11.7762 10.4738 12 10.75 12H12.25V13.5C12.25 13.7762 12.4738 14 12.75 14C13.0261 14 13.25 13.7762 13.25 13.5V12H14.75C15.0261 12 15.25 11.7762 15.25 11.5C15.25 11.2239 15.0261 11 14.75 11H13.25V9.50001Z" fill="currentColor"/>
+  <path d="M13.25 9.50001C13.25 9.22387 13.0261 9.00001 12.75 9.00001C12.4738 9.00001 12.25 9.22387 12.25 9.50001V11H10.75C10.4738 11 10.25 11.2239 10.25 11.5C10.25 11.7762 10.4738 12 10.75 12H12.25V13.5C12.25 13.7762 12.4738 14 12.75 14C13.0261 14 13.25 13.7762 13.25 13.5V12H14.75C15.0261 12 15.25 11.7762 15.25 11.5C15.25 11.2239 15.0261 11 14.75 11H13.25V9.50001Z" fill="currentColor"/>
+</svg>
diff --git a/src/assets/timeline-x-range-layer.svg b/src/assets/timeline-x-range-layer.svg
index c4bb6d1bc1..9213901872 100644
--- a/src/assets/timeline-x-range-layer.svg
+++ b/src/assets/timeline-x-range-layer.svg
@@ -1,5 +1,4 @@
 <svg width="15" height="15" viewBox="0 0 15 15" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <rect x="1.5" y="4.5" width="6" height="7" rx="0.5" fill="currentColor" fill-opacity="0.1" stroke="currentColor"/>
-  <rect x="10.5" y="4.5" width="3" height="7" rx="0.5" fill="currentColor" fill-opacity="0.3" stroke="currentColor"/>
+  <path d="M13.75 12.5H1.25M13.75 2.5H1.25M5.625 5.625H9.375C10.0654 5.625 10.625 6.18464 10.625 6.875V8.125C10.625 8.81536 10.0654 9.375 9.375 9.375H5.625C4.93464 9.375 4.375 8.81536 4.375 8.125V6.875C4.375 6.18464 4.93464 5.625 5.625 5.625Z" stroke="currentColor" stroke-width="0.9375" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/ActivityList.svelte b/src/components/ActivityList.svelte
index 61cc1b0ed9..946f002ade 100644
--- a/src/components/ActivityList.svelte
+++ b/src/components/ActivityList.svelte
@@ -1,28 +1,13 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import { activityTypes } from '../stores/plan';
+  import { activityTypes, subsystemTags } from '../stores/plan';
   import type { ActivityType } from '../types/activity';
-  import type { Tag } from '../types/tags';
   import type { TimelineItemType } from '../types/timeline';
   import TimelineItemList from './TimelineItemList.svelte';
 
-  let activitySubsystems: Tag[] = [];
-
-  $: if ($activityTypes) {
-    let newActivitySubsystems: Tag[] = [];
-    const seenSubsystems: Record<number, boolean> = {};
-    $activityTypes.forEach(t => {
-      if (t.subsystem_tag && !seenSubsystems[t.subsystem_tag.id]) {
-        seenSubsystems[t.subsystem_tag.id] = true;
-        newActivitySubsystems.push(t.subsystem_tag);
-      }
-    });
-    activitySubsystems = newActivitySubsystems;
-  }
-
   function getFilterValueFromItem(item: TimelineItemType) {
-    return (item as ActivityType).subsystem_tag?.id.toString() ?? '';
+    return (item as ActivityType).subsystem_tag?.id ?? -1;
   }
 </script>
 
@@ -32,6 +17,6 @@
   typeName="activity"
   typeNamePlural="Activities"
   {getFilterValueFromItem}
-  filterOptions={activitySubsystems.map(s => ({ color: s.color || '', label: s.name, value: s.id.toString() }))}
+  filterOptions={$subsystemTags.map(s => ({ color: s.color || '', label: s.name, value: s.id }))}
   filterName="Subsystem"
 />
diff --git a/src/components/Collapse.svelte b/src/components/Collapse.svelte
index 48ac6c4a34..e6fc5db6c1 100644
--- a/src/components/Collapse.svelte
+++ b/src/components/Collapse.svelte
@@ -32,7 +32,7 @@
   $: expanded = defaultExpanded;
 </script>
 
-<div class={collapseClasses} class:error role="group">
+<div class={collapseClasses} class:error role="group" aria-label="{title}-collapse">
   <button
     on:contextmenu|preventDefault={contextMenu?.show}
     tabindex={!collapsible ? -1 : 0}
diff --git a/src/components/LayerPicker.svelte b/src/components/LayerPicker.svelte
index d68632e1c3..32238f3829 100644
--- a/src/components/LayerPicker.svelte
+++ b/src/components/LayerPicker.svelte
@@ -17,6 +17,9 @@
 
   let contextMenu: ContextMenu;
   let layerItem: TimelineItemType | undefined = undefined;
+  let isResourceChart: boolean = false;
+
+  $: isResourceChart = chartType === 'x-range' || chartType === 'line';
 
   export function toggle(e: MouseEvent, item?: TimelineItemType) {
     if (contextMenu.isShown()) {
@@ -50,18 +53,25 @@
       <div class="st-typography-label empty">No rows found</div>
     {/if}
     {#each rows as row}
-      <ContextSubMenuItem text={row.name} parentMenu={contextMenu} hideAfterClick={false}>
-        {#each row.layers.filter(l => l.chartType === chartType) as layer}
-          <ContextMenuItem on:click={() => onSelect(layerItem, row, layer)}>
-            <div class="layer">
-              {layer.name || `${layer.chartType} Layer`}
-            </div>
-          </ContextMenuItem>
-        {/each}
+      <!-- Limit selection to rows if resource chart  -->
+      {#if isResourceChart}
         <ContextMenuItem on:click={() => onSelect(layerItem, row)}>
-          <div class="layer-picker-context-menu-blue">New Layer +</div>
+          {row.name}
         </ContextMenuItem>
-      </ContextSubMenuItem>
+      {:else}
+        <ContextSubMenuItem text={row.name} parentMenu={contextMenu} hideAfterClick={false}>
+          {#each row.layers.filter(l => l.chartType === chartType) as layer}
+            <ContextMenuItem on:click={() => onSelect(layerItem, row, layer)}>
+              <div class="layer">
+                {layer.name || `${layer.chartType} Layer`}
+              </div>
+            </ContextMenuItem>
+          {/each}
+          <ContextMenuItem on:click={() => onSelect(layerItem, row)}>
+            <div class="layer-picker-context-menu-blue">New Layer +</div>
+          </ContextMenuItem>
+        </ContextSubMenuItem>
+      {/if}
     {/each}
     <ContextMenuItem on:click={() => onSelect(layerItem)}>
       <div class="layer-picker-context-menu-blue">New Row +</div>
diff --git a/src/components/ResourceList.svelte b/src/components/ResourceList.svelte
index c0f984a78a..fbdd60917a 100644
--- a/src/components/ResourceList.svelte
+++ b/src/components/ResourceList.svelte
@@ -114,7 +114,7 @@
       </button>
     </div>
   </div>
-  <div slot="button">
+  <svelte:fragment slot="button">
     <button
       class="st-button secondary"
       on:click={onShowUpload}
@@ -126,7 +126,7 @@
     >
       <UploadIcon />
     </button>
-  </div>
+  </svelte:fragment>
   <ResourceListPrefix {item} />
 </TimelineItemList>
 
diff --git a/src/components/RowVirtualizerFixed.svelte b/src/components/RowVirtualizerFixed.svelte
new file mode 100644
index 0000000000..2baa688f5c
--- /dev/null
+++ b/src/components/RowVirtualizerFixed.svelte
@@ -0,0 +1,50 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+  import { createVirtualizer } from '@tanstack/svelte-virtual';
+
+  export let count: number = 0;
+  export let estimatedItemHeight: number = 32;
+  export let selectedIndex: number | undefined = undefined;
+  export let maxHeight: string = 'unset';
+  export let minWidth: string = 'unset';
+  export let overscan: number = 5;
+
+  let virtualListEl: HTMLDivElement;
+
+  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+    count,
+    estimateSize: () => estimatedItemHeight,
+    getScrollElement: () => virtualListEl,
+    overscan,
+  });
+
+  $: if (typeof selectedIndex === 'number') {
+    requestAnimationFrame(() => {
+      scrollToIndex(selectedIndex ?? 0);
+    });
+  }
+
+  function scrollToIndex(index: number) {
+    $virtualizer.scrollToIndex(index, { align: 'center' });
+  }
+</script>
+
+<div class="scroll-container" bind:this={virtualListEl} style:max-height={maxHeight} style:min-width={minWidth}>
+  <div style=" height: {$virtualizer.getTotalSize()}px;position: relative; width: 100%;">
+    {#each $virtualizer.getVirtualItems() as item, idx (idx)}
+      <div
+        style=" height: {item.size}px; left: 0;position: absolute; top: 0; transform: translateY({item.start}px); width: 100%;"
+      >
+        <slot index={item.index} />
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .scroll-container {
+    overflow: auto;
+    width: 100%;
+  }
+</style>
diff --git a/src/components/TimelineItemList.svelte b/src/components/TimelineItemList.svelte
index 0e3314d6a3..9604cccf5e 100644
--- a/src/components/TimelineItemList.svelte
+++ b/src/components/TimelineItemList.svelte
@@ -19,6 +19,7 @@
   import Input from './form/Input.svelte';
   import LayerPicker from './LayerPicker.svelte';
   import Menu from './menus/Menu.svelte';
+  import RowVirtualizerFixed from './RowVirtualizerFixed.svelte';
   import ListItem from './ui/ListItem.svelte';
   import Tag from './ui/Tags/Tag.svelte';
 
@@ -28,7 +29,7 @@
   export let items: TimelineItemType[] = [];
   export let filterOptions: TimelineItemListFilterOption[] = [];
   export let filterName: string = 'Filter';
-  export let getFilterValueFromItem: (item: TimelineItemType) => string;
+  export let getFilterValueFromItem: (item: TimelineItemType) => string | number;
 
   let menu: Menu;
   let filteredItems: TimelineItemType[] = [];
@@ -92,8 +93,9 @@
     dragImage.className = 'st-typography-medium';
     document.body.appendChild(dragImage);
     if (event.dataTransfer) {
+      const metadata = { selectedFilters, textFilters };
       event.dataTransfer.setDragImage(dragImage, 0, 0);
-      event.dataTransfer.setData('text/plain', JSON.stringify({ items, type: typeName }));
+      event.dataTransfer.setData('text/plain', JSON.stringify({ items, metadata, type: typeName }));
       event.dataTransfer.dropEffect = typeName === 'activity' ? 'copy' : 'link';
       event.dataTransfer.effectAllowed = typeName === 'activity' ? 'copyLink' : 'link';
     }
@@ -115,7 +117,8 @@
 
   function onBulkLayerPicked(event: CustomEvent<{ layer?: Layer; row?: Row }>) {
     addTextFilter();
-    viewAddFilterToRow(filteredItems, typeName, event.detail.row?.id, event.detail.layer);
+    const metadata = { selectedFilters, textFilters };
+    viewAddFilterToRow(filteredItems, typeName, metadata, event.detail.row?.id, event.detail.layer);
   }
 
   function onBulkAddToRow(e: MouseEvent) {
@@ -126,7 +129,7 @@
 
   function onIndividualLayerPicked(event: CustomEvent<{ item?: TimelineItemType; layer?: Layer; row?: Row }>) {
     if (event.detail.item) {
-      viewAddFilterToRow([event.detail.item], typeName, event.detail.row?.id, event.detail.layer);
+      viewAddFilterToRow([event.detail.item], typeName, {}, event.detail.row?.id, event.detail.layer);
     }
   }
 
@@ -136,6 +139,7 @@
   }
 </script>
 
+<RowVirtualizerFixed />
 <div class="timeline-item-list">
   <div class="timeline-item-list-filters">
     <input
@@ -162,16 +166,16 @@
           {/if}
           {#each filterOptions as option}
             <Input layout="inline" class="timeline-item-list-filter-option">
-              <label class="st-typography-body timeline-item-list-filter-option-label" for={option.value}>
+              <label class="st-typography-body timeline-item-list-filter-option-label" for={option.value.toString()}>
                 {#if option.color}
                   <div class="color" style:background={option.color} />
                 {/if}
                 {option.label}
               </label>
               <input
-                checked={!!selectedFilters[option.value.toString()]}
-                id={option.value}
-                name={option.value}
+                checked={!!selectedFilters[option.value]}
+                id={option.value.toString()}
+                name={option.label}
                 on:change={() => {
                   if (selectedFilters[option.value]) {
                     delete selectedFilters[option.value];
@@ -226,7 +230,11 @@
           {#each Object.values(selectedFilters) as selectedFilter}
             <!-- TODO maybe pull the tag instead of recreating it? -->
             <Tag
-              tag={{ color: selectedFilter.color, id: parseInt(selectedFilter.value), name: selectedFilter.label }}
+              tag={{
+                color: selectedFilter.color,
+                id: typeof selectedFilter.value === 'string' ? parseInt(selectedFilter.value) : selectedFilter.value,
+                name: selectedFilter.label,
+              }}
               on:click={() => {
                 delete selectedFilters[selectedFilter.value];
                 selectedFilters = { ...selectedFilters };
@@ -246,7 +254,8 @@
 
   <div class="list-items">
     {#if filteredItems.length}
-      {#each filteredItems as item}
+      <RowVirtualizerFixed count={filteredItems.length} overscan={100} let:index>
+        {@const item = filteredItems[index]}
         <ListItem
           draggable
           style="cursor: move;"
@@ -270,7 +279,7 @@
             </div>
           </span>
         </ListItem>
-      {/each}
+      </RowVirtualizerFixed>
       <LayerPicker
         bind:this={layerPickerIndividual}
         rows={timelines[0].rows || []}
diff --git a/src/components/activity/ActivityAnchorForm.svelte b/src/components/activity/ActivityAnchorForm.svelte
index ae9fb86a4f..568a10edd3 100644
--- a/src/components/activity/ActivityAnchorForm.svelte
+++ b/src/components/activity/ActivityAnchorForm.svelte
@@ -108,9 +108,9 @@
     dispatch('updateStartOffset', offset);
   }
 
-  function onSelectAnchor(event: CustomEvent<SelectedDropdownOptionValue>) {
+  function onSelectAnchor(event: CustomEvent<SelectedDropdownOptionValue[]>) {
     const { detail: anchorInputString } = event;
-    const activityToAnchorTo = getAnchorActivityDirective(anchorInputString);
+    const activityToAnchorTo = getAnchorActivityDirective(anchorInputString[0]);
     updateAnchor(activityToAnchorTo);
   }
 
@@ -159,10 +159,11 @@
           options={searchableOptions}
           placeholder="To Plan"
           searchPlaceholder="Search Directives"
-          settingsIconTooltip="Set Anchor"
-          selectedOptionValue={anchorId}
+          selectTooltip="Set Anchor"
+          name="Set Anchor"
+          selectedOptionValues={typeof anchorId === 'number' ? [anchorId] : []}
           {updatePermissionError}
-          on:selectOption={onSelectAnchor}
+          on:change={onSelectAnchor}
         />
       </Input>
     </Highlight>
diff --git a/src/components/form/ColorPicker.svelte b/src/components/form/ColorPicker.svelte
index 65114c560d..c9c2ba25a0 100644
--- a/src/components/form/ColorPicker.svelte
+++ b/src/components/form/ColorPicker.svelte
@@ -3,10 +3,12 @@
 <script lang="ts">
   import { classNames } from '../../utilities/generic';
   import { tooltip } from '../../utilities/tooltip';
+
   export let className: string = '';
   export let name: string = '';
   export let tooltipText: string = '';
   export let value: string = '';
+
   $: inputClasses = classNames('color-picker', {
     [className]: !!className,
   });
diff --git a/src/components/form/Input.svelte b/src/components/form/Input.svelte
index 4e373d2339..4c9c097e21 100644
--- a/src/components/form/Input.svelte
+++ b/src/components/form/Input.svelte
@@ -41,6 +41,7 @@
 
     containerObserver = new MutationObserver(containerObserverCallback);
     containerObserver.observe(container, { childList: true, subtree: true });
+    containerObserverCallback();
   });
 
   onDestroy(() => {
@@ -63,18 +64,14 @@
       }
       setChildrenStyles([left]);
     }
-    // because the content of the slot might not have been fully rendered by the time this function is called
-    // we must kick it out to a timeout to wait for it to be rendered
-    setTimeout(() => {
-      if (left !== null) {
-        left.style.left = `${padLeft}px`;
-
-        left.style.width = `min(40%, ${left.clientWidth}px)`;
-        if (input !== null) {
-          input.style.paddingLeft = `min(40%, ${padLeft + left.clientWidth + padRight}px)`;
-        }
+    if (left !== null) {
+      left.style.left = `${padLeft}px`;
+
+      left.style.width = `min(40%, ${left.clientWidth}px)`;
+      if (input !== null) {
+        input.style.paddingLeft = `min(40%, ${padLeft + left.clientWidth + padRight}px)`;
       }
-    }, 100);
+    }
   }
 
   function padRightSlot() {
@@ -87,17 +84,13 @@
       }
       setChildrenStyles([right]);
     }
-    // because the content of the slot might not have been fully rendered by the time this function is called
-    // we must kick it out to a timeout to wait for it to be rendered
-    setTimeout(() => {
-      if (right !== null) {
-        right.style.right = `${padRight}px`;
-
-        if (input !== null) {
-          input.style.paddingRight = `min(40%, ${padLeft + right.clientWidth + padRight}px)`;
-        }
+    if (right !== null) {
+      right.style.right = `${padRight}px`;
+
+      if (input !== null) {
+        input.style.paddingRight = `min(40%, ${padLeft + right.clientWidth + padRight}px)`;
       }
-    }, 100);
+    }
   }
 
   function inputObserverCallback(mutations: MutationRecord[]) {
diff --git a/src/components/menus/Menu.svelte b/src/components/menus/Menu.svelte
index 87fcb18922..462e01ffa0 100644
--- a/src/components/menus/Menu.svelte
+++ b/src/components/menus/Menu.svelte
@@ -68,6 +68,7 @@
   export function show(): void {
     hideAllMenus(type);
     shown = true;
+    dispatch('show');
   }
 
   export function toggle(): void {
@@ -80,6 +81,7 @@
 
   const dispatch = createEventDispatcher<{
     hide: void;
+    show: void;
   }>();
 
   const [popperRef, popperContent] = createPopperActions({
@@ -137,7 +139,7 @@
     }}
   >
     <div
-      class="menu-slot st-typography-medium"
+      class="st-menu st-typography-medium"
       style:width={typeof width === 'number' ? `${width}px` : null}
       use:popperContent={extraOpts}
     >
@@ -154,14 +156,4 @@
     top: 4px;
     width: 100%;
   }
-
-  .menu-slot {
-    background: #fff;
-    border: var(--st-border-popover);
-    border-radius: var(--st-border-radius-popover);
-    box-shadow: var(--st-shadow-popover);
-    outline: 0;
-    overflow: hidden;
-    z-index: 1000;
-  }
 </style>
diff --git a/src/components/menus/MenuHeader.svelte b/src/components/menus/MenuHeader.svelte
index 050c7873b9..40b4817c7f 100644
--- a/src/components/menus/MenuHeader.svelte
+++ b/src/components/menus/MenuHeader.svelte
@@ -4,10 +4,17 @@
 </script>
 
 <div class="header" class:menu-border-bottom={showBorder}>
-  <div class="title st-typography-small-caps">
-    {title}
-    <slot />
-  </div>
+  {#if title || $$slots.left}
+    <div class="left">
+      {#if title}
+        <div class="title st-typography-small-caps">
+          {title}
+        </div>
+      {/if}
+      <slot name="left" />
+    </div>
+  {/if}
+  <slot />
 </div>
 
 <style>
@@ -15,14 +22,20 @@
     align-items: center;
     color: var(--st-gray-40);
     cursor: auto;
-    display: grid;
-    grid-template-columns: auto auto;
+    display: flex;
     justify-content: space-between;
     padding: 8px;
   }
 
+  .left {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+  }
+
   .title {
     color: var(--st-gray-40);
+    flex-shrink: 0;
     font-size: 11px;
     font-weight: 700;
   }
diff --git a/src/components/menus/MenuItem.svelte b/src/components/menus/MenuItem.svelte
index 4e1e98386f..5baf97055d 100644
--- a/src/components/menus/MenuItem.svelte
+++ b/src/components/menus/MenuItem.svelte
@@ -7,10 +7,11 @@
   export let use: ActionArray = [];
 
   export let disabled: boolean = false;
+  export let selectable: boolean = true;
   export let selected: boolean = false;
 
   const dispatch = createEventDispatcher<{
-    click: MouseEvent;
+    click: MouseEvent | KeyboardEvent;
   }>();
 
   function onClick(event: MouseEvent) {
@@ -21,10 +22,27 @@
       dispatch('click', event);
     }
   }
+
+  function onKeydown(event: KeyboardEvent) {
+    const { key } = event;
+    if (key === 'Enter' && !disabled) {
+      event.preventDefault();
+      dispatch('click', event);
+    }
+  }
 </script>
 
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<div class="menu-item" class:disabled class:selected role="menuitem" use:useActions={use} on:mouseup={onClick}>
+<div
+  class="menu-item"
+  class:disabled
+  class:selected
+  class:selectable
+  role="menuitem"
+  use:useActions={use}
+  on:mouseup={onClick}
+  on:keydown={onKeydown}
+  tabindex={0}
+>
   <slot />
 </div>
 
@@ -45,7 +63,11 @@
     width: 100%;
   }
 
-  .menu-item:hover {
+  .menu-item:not(.selectable) {
+    cursor: auto;
+  }
+
+  .menu-item.selectable:hover {
     background: var(--st-gray-20);
   }
 
diff --git a/src/components/sequencing/form/EnumEditor.svelte b/src/components/sequencing/form/EnumEditor.svelte
index b237f7bcbf..d0fdafc185 100644
--- a/src/components/sequencing/form/EnumEditor.svelte
+++ b/src/components/sequencing/form/EnumEditor.svelte
@@ -25,12 +25,12 @@
     display: ev,
     value: ev,
   }));
-  $: selectedOptionValue = value;
+  $: selectedOptionValues = [value];
 
-  function onSelectReferenceModel(event: CustomEvent<SelectedDropdownOptionValue>) {
-    const { detail: enumVal } = event;
-    if (typeof enumVal === 'string') {
-      setInEditor(enumVal);
+  function onSelectReferenceModel(event: CustomEvent<SelectedDropdownOptionValue[]>) {
+    const { detail: values } = event;
+    if (typeof values[0] === 'string') {
+      setInEditor(values[0]);
     }
   }
 </script>
@@ -40,8 +40,8 @@
     <SearchableDropdown
       {options}
       maxItems={MAX_SEARCH_ITEMS}
-      on:selectOption={onSelectReferenceModel}
-      {selectedOptionValue}
+      on:change={onSelectReferenceModel}
+      {selectedOptionValues}
       placeholder={value}
       searchPlaceholder="Filter values"
     />
diff --git a/src/components/timeline/DropTarget.svelte b/src/components/timeline/DropTarget.svelte
index ecfa715b26..fac5faefa3 100644
--- a/src/components/timeline/DropTarget.svelte
+++ b/src/components/timeline/DropTarget.svelte
@@ -2,7 +2,7 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import type { TimelineItemType } from '../../types/timeline';
+  import type { TimelineItemMetadata, TimelineItemType } from '../../types/timeline';
 
   export let hint: string = '';
   export let hintPosition: 'center' | 'bottom' = 'center';
@@ -13,7 +13,7 @@
   const dispatch = createEventDispatcher<{
     dragend: DragEvent;
     dragstart: DragEvent;
-    drop: { items?: TimelineItemType[]; type?: string };
+    drop: { items?: TimelineItemType[]; metadata?: TimelineItemMetadata; type?: string };
   }>();
 
   function onDragEnter() {
diff --git a/src/components/timeline/Row.svelte b/src/components/timeline/Row.svelte
index 8e07830199..f758396367 100644
--- a/src/components/timeline/Row.svelte
+++ b/src/components/timeline/Row.svelte
@@ -9,12 +9,14 @@
   import FilterWithXIcon from '../../assets/filter-with-x.svg?component';
   import { ViewDefaultDiscreteOptions } from '../../constants/view';
   import { Status } from '../../enums/status';
+  import { activityArgumentDefaultsMap } from '../../stores/activities';
   import { catchError } from '../../stores/errors';
   import {
     derivationGroupVisibilityMap,
     externalSources,
     planDerivationGroupLinks,
   } from '../../stores/external-source';
+  import { activityTypes } from '../../stores/plan';
   import {
     externalResources,
     fetchingResourcesExternal,
@@ -56,9 +58,11 @@
     Point,
     RowMouseOverEvent,
     TimeRange,
+    TimelineItemMetadata,
     TimelineItemType,
     XAxisTick,
   } from '../../types/timeline';
+  import { getAllSpansForActivityDirective } from '../../utilities/activities';
   import effects from '../../utilities/effects';
   import { getExternalEventRowId } from '../../utilities/externalEvents';
   import { classNames, unique } from '../../utilities/generic';
@@ -69,9 +73,11 @@
   import { getDoyTime } from '../../utilities/time';
   import {
     TimelineInteractionMode,
+    applyActivityLayerFilter,
     directiveInView,
     externalEventInView,
     generateDiscreteTreeUtil,
+    getMatchingTypesForActivityLayerFilter,
     getYAxesWithScaleDomains,
     isActivityLayer,
     isExternalEventLayer,
@@ -197,7 +203,6 @@
   let hasActivityLayer: boolean = false;
   let hasExternalEventsLayer: boolean = false;
   let hasResourceLayer: boolean = false;
-  let associatedActivityTypes: number;
 
   $: if ($selectedRow?.id === id && rowRef) {
     rowRef.scrollIntoView({ block: 'nearest' });
@@ -208,7 +213,9 @@
     const resourceNamesSet = new Set<string>();
     layers.map(layer => {
       if (layer.chartType === 'line' || layer.chartType === 'x-range') {
-        layer.filter.resource?.names.forEach(name => resourceNamesSet.add(name));
+        if (layer.filter.resource) {
+          resourceNamesSet.add(layer.filter.resource);
+        }
       }
     });
     const resourceNames = Array.from(resourceNamesSet);
@@ -340,17 +347,13 @@
     discreteOptions?.activityOptions?.composition === 'both' ||
     discreteOptions?.activityOptions?.composition === 'directives';
 
-  // helper for hasExternalEventsLayer; counts how many external event types are associated with this row (if all layers have 0 event types, we
-  //    don't want to allocate any canvas space in the row for the layer)
-  $: associatedActivityTypes = activityLayers
-    .map(layer => (layer.filter.activity ? layer.filter.activity.types.length : 0))
-    .reduce((currentSum, newValue) => currentSum + newValue, 0);
+  // helper for hasExternalEventsLayer; counts how many external event types are associated with this row
+  // (if all layers have 0 event types, we don't want to allocate any canvas space in the row for the layer)
   $: associatedEventTypes = externalEventLayers
     .map(layer => (layer.filter.externalEvent ? layer.filter.externalEvent.event_types.length : 0))
     .reduce((currentSum, newValue) => currentSum + newValue, 0);
 
   // only consider a layer to be present if it is defined AND it actually has types/values selected.
-  $: hasActivityLayer = activityLayers.length > 0 && associatedActivityTypes > 0;
   $: hasExternalEventsLayer = externalEventLayers.length > 0 && associatedEventTypes > 0;
   $: hasResourceLayer = lineLayers.length + xRangeLayers.length > 0;
 
@@ -422,8 +425,6 @@
     };
     if (activityLayers && spansMap && activityDirectives) {
       let spansList = Object.values(spansMap);
-      const directivesByType = groupBy(activityDirectives, 'type');
-      const spansByType = groupBy(spansList, 'type');
       if (activityLayers.length) {
         let directives: ActivityDirective[] = [];
         let spans: Span[] = [];
@@ -433,34 +434,41 @@
         let seenDirectiveIds: Record<number, boolean> = {};
         let seenSpanIds: Record<number, boolean> = {};
         activityLayers.forEach(layer => {
-          if (layer.filter && layer.filter.activity !== undefined) {
-            const types = layer.filter.activity.types || [];
-            types.forEach(type => {
-              const matchingDirectives = directivesByType[type];
-              if (matchingDirectives) {
-                const uniqueDirectives: ActivityDirective[] = [];
-                matchingDirectives.forEach(directive => {
-                  if (!seenDirectiveIds[directive.id]) {
-                    updatedIdToColorMaps.directives[directive.id] = layer.activityColor;
-                    seenDirectiveIds[directive.id] = true;
-                    uniqueDirectives.push(directive);
-                  }
+          if (layer.filter) {
+            const { directives: matchingDirectives, spans: matchingSpans } = applyActivityLayerFilter(
+              layer.filter.activity,
+              activityDirectives,
+              spansList,
+              $activityTypes,
+              $activityArgumentDefaultsMap,
+            );
+            const uniqueDirectives: ActivityDirective[] = [];
+            matchingDirectives.forEach(directive => {
+              if (!seenDirectiveIds[directive.id]) {
+                idToColorMaps.directives[directive.id] = layer.activityColor;
+                seenDirectiveIds[directive.id] = true;
+                uniqueDirectives.push(directive);
+
+                // Gather spans for directive since we always show all spans for a directive
+                const childSpans = getAllSpansForActivityDirective(directive.id, spansMap, spanUtilityMaps);
+                childSpans.forEach(span => {
+                  seenSpanIds[span.span_id] = true;
+                  idToColorMaps.spans[span.span_id] = layer.activityColor;
                 });
-                directives = directives.concat(uniqueDirectives);
+                spans = spans.concat(childSpans);
               }
-              const matchingSpans = spansByType[type];
-              if (matchingSpans) {
-                const uniqueSpans: Span[] = [];
-                matchingSpans.forEach(span => {
-                  if (!seenSpanIds[span.span_id]) {
-                    updatedIdToColorMaps.spans[span.span_id] = layer.activityColor;
-                    seenSpanIds[span.span_id] = true;
-                    uniqueSpans.push(span);
-                  }
-                });
-                spans = spans.concat(uniqueSpans);
+            });
+            directives = directives.concat(uniqueDirectives);
+
+            const uniqueSpans: Span[] = [];
+            matchingSpans.forEach(span => {
+              if (!seenSpanIds[span.span_id]) {
+                idToColorMaps.spans[span.span_id] = layer.activityColor;
+                seenSpanIds[span.span_id] = true;
+                uniqueSpans.push(span);
               }
             });
+            spans = spans.concat(uniqueSpans);
           }
         });
         directives.sort((a, b) => ((a.start_time_ms ?? 0) < (b.start_time_ms ?? 0) ? -1 : 1));
@@ -471,69 +479,67 @@
           // regeneration upon viewTimeRange change when not in filterActivitiesByTime mode.
           filteredActivityDirectives = directives;
           filteredSpans = spans;
-          timeFilteredActivityDirectives = directives; // if not actively filtering by time
-          timeFilteredSpans = spans; // if not actively filtering by time
+          timeFilteredActivityDirectives = directives;
+          timeFilteredSpans = spans;
         } else {
           filteredActivityDirectives = [];
           filteredSpans = [];
           timeFilteredActivityDirectives = [];
           timeFilteredSpans = [];
         }
+
+        hasActivityLayer = timeFilteredActivityDirectives.length > 0 || timeFilteredActivityDirectives.length > 0;
+      } else {
+        hasActivityLayer = false;
       }
-    }
-    if (hasExternalEventsLayer) {
-      let externalEventsFilteredByDG = [];
-      filteredExternalEvents = [];
-
-      let filteredDerivationGroups = $planDerivationGroupLinks
-        .filter(
-          link => link.plan_id === plan?.id && !($derivationGroupVisibilityMap[link.derivation_group_name] ?? true),
-        )
-        .map(link => link.derivation_group_name);
-
-      // Apply filter for hiding derivation groups
-      externalEventsFilteredByDG = externalEvents.filter(ee => {
-        let derivationGroup =
-          $externalSources.find(
-            externalSource =>
-              externalSource.derivation_group_name === ee.pkey.derivation_group_name &&
-              externalSource.key === ee.pkey.source_key,
-          )?.derivation_group_name ?? undefined;
-        // the statement below says return true (keep) if the plan is not null and if the filter for this plan does not include this derivation group
-        return plan && derivationGroup ? !filteredDerivationGroups.includes(derivationGroup) : false;
-      });
-      // Filter by external event type
-      const externalEventsByType = groupBy(externalEventsFilteredByDG, 'pkey.event_type_name');
-      externalEventLayers.forEach(layer => {
-        if (layer.filter && layer.filter.externalEvent !== undefined) {
-          const event_types = layer.filter.externalEvent.event_types || [];
-          event_types.forEach(type => {
-            const matchingEvents = externalEventsByType[type];
-            if (matchingEvents) {
-              matchingEvents.forEach(
-                event =>
-                  (updatedIdToColorMaps.external_events[getExternalEventRowId(event.pkey)] = layer.externalEventColor),
-              );
-              filteredExternalEvents = filteredExternalEvents.concat(unique(matchingEvents));
-            }
-          });
-        }
-      });
-      filteredExternalEvents.sort((a, b) => (a.start_ms < b.start_ms ? -1 : 1));
 
-      timeFilteredExternalEvents = filteredExternalEvents; // if not actively filtering by time
-    }
+      if (hasExternalEventsLayer) {
+        let externalEventsFilteredByDG = [];
+        filteredExternalEvents = [];
+
+        let filteredDerivationGroups = $planDerivationGroupLinks
+          .filter(
+            link => link.plan_id === plan?.id && !($derivationGroupVisibilityMap[link.derivation_group_name] ?? true),
+          )
+          .map(link => link.derivation_group_name);
+
+        // Apply filter for hiding derivation groups
+        externalEventsFilteredByDG = externalEvents.filter(ee => {
+          let derivationGroup =
+            $externalSources.find(
+              externalSource =>
+                externalSource.derivation_group_name === ee.pkey.derivation_group_name &&
+                externalSource.key === ee.pkey.source_key,
+            )?.derivation_group_name ?? undefined;
+          // the statement below says return true (keep) if the plan is not null and if the filter for this plan does not include this derivation group
+          return plan && derivationGroup ? !filteredDerivationGroups.includes(derivationGroup) : false;
+        });
+        // Filter by external event type
+        const externalEventsByType = groupBy(externalEventsFilteredByDG, 'pkey.event_type_name');
+        externalEventLayers.forEach(layer => {
+          if (layer.filter && layer.filter.externalEvent !== undefined) {
+            const event_types = layer.filter.externalEvent.event_types || [];
+            event_types.forEach(type => {
+              const matchingEvents = externalEventsByType[type];
+              if (matchingEvents) {
+                matchingEvents.forEach(
+                  event =>
+                    (updatedIdToColorMaps.external_events[getExternalEventRowId(event.pkey)] =
+                      layer.externalEventColor),
+                );
+                filteredExternalEvents = filteredExternalEvents.concat(unique(matchingEvents));
+              }
+            });
+          }
+        });
+        filteredExternalEvents.sort((a, b) => (a.start_ms < b.start_ms ? -1 : 1));
 
-    // we update idToColorMaps via reassignment instead of by mutation so that Svelte reacts to updates correctly
-    idToColorMaps = updatedIdToColorMaps;
+        timeFilteredExternalEvents = filteredExternalEvents; // if not actively filtering by time
+      }
+    }
   }
 
-  $: if (
-    ((hasActivityLayer && filteredActivityDirectives && filteredSpans) ||
-      (hasExternalEventsLayer && filteredExternalEvents)) &&
-    viewTimeRange &&
-    filterItemsByTime
-  ) {
+  $: if (hasActivityLayer && filterItemsByTime && filteredActivityDirectives && filteredSpans && viewTimeRange) {
     timeFilteredSpans = filteredSpans.filter(span => spanInView(span, viewTimeRange));
     timeFilteredActivityDirectives = filteredActivityDirectives.filter(directive => {
       let inView = directiveInView(directive, viewTimeRange);
@@ -715,16 +721,17 @@
         const json = JSON.parse(data || '');
         const type = json.type ?? '';
         const items = (json.items as TimelineItemType[]) ?? '';
+        const metadata = (json.metadata as TimelineItemMetadata) ?? {};
 
         // Only allow creating an activity if we have an actual activity in the drag data.
         if (type === 'activity' && items && plan) {
           // Determine if the row will visualize all requested activities
-          let activitiesInRow = new Set();
+          let typesInRow = new Set();
           activityLayers.forEach(layer => {
-            const layerActivities = layer.filter.activity?.types ?? [];
-            activitiesInRow = new Set([...activitiesInRow, ...layerActivities]);
+            const matchingTypes = getMatchingTypesForActivityLayerFilter(layer.filter.activity, $activityTypes);
+            typesInRow = new Set([...typesInRow, ...matchingTypes.map(t => t.name)]);
           });
-          const missingActivity = (items as ActivityType[]).find(item => !activitiesInRow.has(item.name));
+          const missingActivity = (items as ActivityType[]).find(item => !typesInRow.has(item.name));
 
           const createActivities = () => {
             items.forEach(item => {
@@ -739,7 +746,14 @@
             const { confirm, value } = await showConfirmActivityCreationModal();
             if (confirm) {
               if (value?.addFilter) {
-                viewAddFilterToRow(items, type, id, activityLayers.length ? activityLayers[0] : undefined, index);
+                viewAddFilterToRow(
+                  items,
+                  type,
+                  metadata,
+                  id,
+                  activityLayers.length ? activityLayers[0] : undefined,
+                  index,
+                );
               }
               createActivities();
             }
@@ -808,31 +822,37 @@
       return [];
     }
     const resources: Resource[] = [];
-    layer.filter.resource.names.forEach(name => {
-      const resourceRequest = resourceRequestMap[name];
+    if (layer.filter.resource) {
+      const resourceRequest = resourceRequestMap[layer.filter.resource];
       if (resourceRequest && !resourceRequest.loading && !resourceRequest.error && resourceRequest.resource) {
         resources.push(resourceRequest.resource);
       }
-    });
+    }
+
     return resources;
   }
 
-  function onTimelineItemsDrop(rowId?: number, type?: string, items?: TimelineItemType[], index?: number) {
-    if (!type || !items || items.length === 0) {
+  function onTimelineItemsDrop(
+    rowId?: number,
+    type?: string,
+    items?: TimelineItemType[],
+    metadata?: TimelineItemMetadata,
+    index?: number,
+  ) {
+    if (!type || !items) {
       return;
     }
-    let toAdd: Layer;
-    if ('parameters' in items[0]) {
+    let layer: Layer | undefined;
+    // Note: skipping resource layer assignment since only one resource
+    // can be assigned to a layer
+    if (type === 'activity') {
       // adding an activity
-      toAdd = activityLayers[0];
-    } else if ('schema' in items[0]) {
-      // adding a resource
-      toAdd = activityLayers[0];
-    } else {
+      layer = activityLayers[0];
+    } else if (type === 'externalEvent' && items.length) {
       // adding an external event
-      toAdd = externalEventLayers[0];
+      layer = externalEventLayers[0];
     }
-    viewAddFilterToRow(items, type, rowId, toAdd, index);
+    viewAddFilterToRow(items, type, metadata, rowId, layer, index);
   }
 </script>
 
@@ -847,7 +867,8 @@
       width={drawWidth + marginLeft}
       top={4}
       hintPosition="bottom"
-      on:drop={event => onTimelineItemsDrop(undefined, event.detail.type, event.detail.items, -1)}
+      on:drop={event =>
+        onTimelineItemsDrop(undefined, event.detail.type, event.detail.items, event.detail.metadata, -1)}
     />
   {/if}
 
@@ -858,7 +879,7 @@
       on:discrete-tree-node-change={onDiscreteTreeNodeChange}
       on:mouseDown={onMouseDown}
       on:dblClick
-      on:drop={event => onTimelineItemsDrop(id, event.detail.type, event.detail.items)}
+      on:drop={event => onTimelineItemsDrop(id, event.detail.type, event.detail.items, event.detail.metadata)}
       {discreteTree}
       width={marginLeft}
       height={computedDrawHeight}
@@ -1075,7 +1096,7 @@
 
   <RowDividerDropTarget
     width={drawWidth + marginLeft}
-    on:drop={e => onTimelineItemsDrop(undefined, e.detail.type, e.detail.items, index)}
+    on:drop={e => onTimelineItemsDrop(undefined, e.detail.type, e.detail.items, e.detail.metadata, index)}
   />
   <!-- Drag Handle for Row Height Resizing. -->
   {#if !autoAdjustHeight && expanded}
diff --git a/src/components/timeline/RowHeader.svelte b/src/components/timeline/RowHeader.svelte
index 649d465c25..858dd2174a 100644
--- a/src/components/timeline/RowHeader.svelte
+++ b/src/components/timeline/RowHeader.svelte
@@ -299,6 +299,16 @@
     pointer-events: auto;
   }
 
+  .row-header:hover :global(.row-header-menu),
+  :global(.row-header-menu:focus),
+  :global(.row-header-menu:active) {
+    opacity: 1;
+  }
+
+  :global(.row-header-menu) {
+    opacity: 0;
+  }
+
   .row-menu-container {
     align-items: flex-end;
     color: var(--st-gray-50);
@@ -367,6 +377,12 @@
     white-space: nowrap;
   }
 
+  :global(.row-header-y-axis-label svg) {
+    flex-shrink: 0;
+    height: 16px;
+    width: 16px;
+  }
+
   .discrete-tree {
     padding-left: 16px;
   }
diff --git a/src/components/timeline/RowHeaderDiscreteTree.svelte b/src/components/timeline/RowHeaderDiscreteTree.svelte
index 4193b04d84..60751fdfb2 100644
--- a/src/components/timeline/RowHeaderDiscreteTree.svelte
+++ b/src/components/timeline/RowHeaderDiscreteTree.svelte
@@ -218,7 +218,7 @@
       <Collapse
         headerHeight={rowHeight}
         defaultExpanded={node.expanded}
-        className={classNames('row-header-discrete-group')}
+        className="row-header-discrete-group"
         on:collapse={() => dispatch('discrete-tree-node-change', node)}
       >
         <div slot="left" style="align-items: center;display: flex">
diff --git a/src/components/timeline/RowHeaderDragHandleWidth.svelte b/src/components/timeline/RowHeaderDragHandleWidth.svelte
index 6af3db009c..6302fc51a8 100644
--- a/src/components/timeline/RowHeaderDragHandleWidth.svelte
+++ b/src/components/timeline/RowHeaderDragHandleWidth.svelte
@@ -31,10 +31,12 @@
 
   function onMouseDown(): void {
     document.addEventListener('mousemove', onMouseMove, false);
+    document.body.classList.add('prevent-selection');
   }
 
   function onMouseUp(): void {
     document.removeEventListener('mousemove', onMouseMove, false);
+    document.body.classList.remove('prevent-selection');
   }
 </script>
 
@@ -51,6 +53,9 @@
 </div>
 
 <style>
+  :global(.prevent-selection) {
+    user-select: none;
+  }
   .row-header-drag-handle-width {
     height: 100%;
     pointer-events: none;
diff --git a/src/components/timeline/form/TimelineEditor/ActivityFilterBuilder.svelte b/src/components/timeline/form/TimelineEditor/ActivityFilterBuilder.svelte
new file mode 100644
index 0000000000..e908145835
--- /dev/null
+++ b/src/components/timeline/form/TimelineEditor/ActivityFilterBuilder.svelte
@@ -0,0 +1,774 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
+  import SearchIcon from '@nasa-jpl/stellar/icons/search.svg?component';
+  import { createEventDispatcher } from 'svelte';
+  import FilterWithPlusIcon from '../../../../assets/filter-with-plus.svg?component';
+  import DirectiveIcon from '../../../../assets/timeline-directive.svg?component';
+  import SpanIcon from '../../../../assets/timeline-span.svg?component';
+  import { activityArgumentDefaultsMap, activityDirectivesMap } from '../../../../stores/activities';
+  import { activityTypes, subsystemTags } from '../../../../stores/plan';
+  import { spans, spanUtilityMaps } from '../../../../stores/simulation';
+  import { tags } from '../../../../stores/tags';
+  import type { ValueSchemaVariant } from '../../../../types/schema';
+  import type { ActivityLayerFilter, ActivityLayerFilterSubfieldSchema } from '../../../../types/timeline';
+  import { compare, getTarget, lowercase } from '../../../../utilities/generic';
+  import { pluralize } from '../../../../utilities/text';
+  import {
+    applyActivityLayerFilter,
+    getMatchingTypesForActivityLayerFilter,
+    getNextThingID,
+  } from '../../../../utilities/timeline';
+  import { tooltip } from '../../../../utilities/tooltip';
+  import Input from '../../../form/Input.svelte';
+  import Menu from '../../../menus/Menu.svelte';
+  import MenuHeader from '../../../menus/MenuHeader.svelte';
+  import MenuItem from '../../../menus/MenuItem.svelte';
+  import CssGrid from '../../../ui/CssGrid.svelte';
+  import CssGridGutter from '../../../ui/CssGridGutter.svelte';
+  import ActivityTypeResult from './ActivityTypeResult.svelte';
+  import Draggable from './Draggable.svelte';
+  import DynamicFilter from './DynamicFilter.svelte';
+
+  export let filter: ActivityLayerFilter | undefined;
+  export const filterWidth = 1000;
+  export const filterHeight = 500;
+  export let layerName: string = '';
+
+  let parameterSubfields: ActivityLayerFilterSubfieldSchema[] = [];
+  let dirtyFilter: ActivityLayerFilter = {
+    dynamic_type_filters: [],
+    other_filters: [],
+    static_types: [],
+    type_subfilters: {},
+  };
+  let manualInputOpen: boolean = false;
+  let manualMenu: Menu;
+  let resultingTypesMessage: string = '';
+  let rootRef: HTMLDivElement;
+  let manualInputRef: HTMLInputElement;
+  let manualInputWidth: number = 600;
+  let manualInputValue: string = '';
+  let resultingTypesInputValue: string = '';
+  let shown: boolean = false;
+  let instanceCount: number = 0;
+
+  const dispatch = createEventDispatcher<{
+    filterChange: { filter: ActivityLayerFilter };
+    rename: { name: string };
+  }>();
+
+  export function toggle() {
+    if (shown) {
+      hide();
+    } else {
+      show();
+    }
+  }
+
+  export function show() {
+    shown = true;
+  }
+
+  export function hide() {
+    shown = false;
+  }
+
+  function onManualTypeToggled(name: string) {
+    const existingStaticTypes = dirtyFilter.static_types || [];
+    let newStaticTypes = [];
+    const checked = existingStaticTypes.indexOf(name) > -1;
+    if (checked) {
+      newStaticTypes = existingStaticTypes?.filter(t => t !== name);
+    } else {
+      newStaticTypes = existingStaticTypes.concat(name);
+    }
+    dirtyFilter = { ...dirtyFilter, static_types: newStaticTypes };
+    dispatch('filterChange', { filter: dirtyFilter });
+  }
+
+  function onAddAllManualTypes() {
+    dirtyFilter = { ...dirtyFilter, static_types: filteredActivityTypes.map(t => t.name) };
+    dispatch('filterChange', { filter: dirtyFilter });
+  }
+
+  function onRemoveAllManualTypes() {
+    dirtyFilter = { ...dirtyFilter, static_types: [] };
+    dispatch('filterChange', { filter: dirtyFilter });
+  }
+
+  function onAddDynamicFilter(list: 'dynamic_type_filters' | 'other_filters') {
+    const field = list === 'dynamic_type_filters' ? 'Type' : 'Tags';
+    const listObj = dirtyFilter[list] || [];
+    const currentFilters = Array.isArray(listObj) ? listObj : [];
+    const id = getNextThingID(listObj);
+    dirtyFilter = {
+      ...dirtyFilter,
+      [list]: [...currentFilters, { field, id, operator: 'includes', value: '' }],
+    };
+    dispatch('filterChange', { filter: dirtyFilter });
+  }
+
+  function onDynamicFilterChange(list: 'dynamic_type_filters' | 'other_filters', { detail: { filter } }: CustomEvent) {
+    const currentFilters = Array.isArray(dirtyFilter[list]) ? dirtyFilter[list] : [];
+    dirtyFilter = {
+      ...dirtyFilter,
+      [list]: (currentFilters || []).map(f => {
+        if (f.id === filter.id) {
+          return filter;
+        }
+        return f;
+      }),
+    };
+    dispatch('filterChange', { filter: dirtyFilter });
+  }
+
+  function onDynamicFilterRemove(list: 'dynamic_type_filters' | 'other_filters', id: number) {
+    const currentFilters: ActivityLayerFilter['dynamic_type_filters'] | ActivityLayerFilter['other_filters'] =
+      Array.isArray(dirtyFilter[list]) ? dirtyFilter[list] : [];
+    dirtyFilter = {
+      ...dirtyFilter,
+      // TODO unsure how to resolve the svelte ts check errors if these basic types here don't exist
+      [list]: ((currentFilters as { id: number }[]) || []).filter((f: { id: number }) => {
+        return f.id !== id;
+      }),
+    };
+    dispatch('filterChange', { filter: dirtyFilter });
+  }
+
+  function onTypeSubfilterChange(type: string, { detail: { filter } }: CustomEvent) {
+    const typeSubfilters = dirtyFilter.type_subfilters || {};
+    const currentFilters = typeSubfilters[type];
+    dirtyFilter = {
+      ...dirtyFilter,
+      type_subfilters: {
+        ...typeSubfilters,
+        [type]: currentFilters.map(f => {
+          if (f.id === filter.id) {
+            return filter;
+          }
+          return f;
+        }),
+      },
+    };
+    dispatch('filterChange', { filter: dirtyFilter });
+  }
+
+  function onTypeSubfilterRemove(type: string, id: number) {
+    const typeSubfilters = dirtyFilter.type_subfilters || {};
+    const currentFilters = typeSubfilters[type];
+    const newFilters = currentFilters.filter(f => f.id !== id);
+    dirtyFilter = {
+      ...dirtyFilter,
+      type_subfilters: {
+        ...typeSubfilters,
+        [type]: newFilters,
+      },
+    };
+    if (dirtyFilter.type_subfilters && newFilters.length === 0) {
+      delete dirtyFilter.type_subfilters[type];
+    }
+    dispatch('filterChange', { filter: dirtyFilter });
+  }
+
+  function onAddTypeSubfilter(type: string) {
+    const typeSubfilters = dirtyFilter.type_subfilters || {};
+    if (!typeSubfilters[type]) {
+      typeSubfilters[type] = [];
+    }
+    const currentFilters = typeSubfilters[type];
+    const id = getNextThingID(currentFilters);
+    dirtyFilter = {
+      ...dirtyFilter,
+      type_subfilters: {
+        ...typeSubfilters,
+        [type]: [...currentFilters, { field: 'Name', id, operator: 'includes', value: '' }],
+      },
+    };
+    dispatch('filterChange', { filter: dirtyFilter });
+  }
+
+  $: if (filter) {
+    dirtyFilter = structuredClone(filter);
+  }
+
+  $: activityDirectives = Object.values($activityDirectivesMap);
+  $: appliedFilter = applyActivityLayerFilter(
+    dirtyFilter,
+    activityDirectives,
+    $spans,
+    $activityTypes,
+    $activityArgumentDefaultsMap,
+  );
+
+  $: if (appliedFilter) {
+    const seenSpans: Record<number, boolean> = {};
+    let count = appliedFilter.directives.length;
+    appliedFilter.directives.forEach(directive => {
+      const matchingSpanId = $spanUtilityMaps.directiveIdToSpanIdMap[directive.id];
+      if (typeof matchingSpanId === 'number') {
+        seenSpans[matchingSpanId] = true;
+      }
+    });
+    appliedFilter.spans.forEach(span => {
+      if (!seenSpans[span.span_id]) {
+        count++;
+      }
+    });
+    instanceCount = count;
+  }
+
+  $: matchingTypes = getMatchingTypesForActivityLayerFilter(dirtyFilter, $activityTypes);
+  $: filteredMatchingTypes = matchingTypes.filter(type => {
+    if (!resultingTypesInputValue) {
+      return true;
+    }
+
+    return lowercase(type.name).indexOf(lowercase(resultingTypesInputValue)) > -1;
+  });
+
+  $: {
+    const allParameterTypes = (matchingTypes.length ? matchingTypes : $activityTypes).reduce(
+      (acc: Record<string, ActivityLayerFilterSubfieldSchema>, activityType) => {
+        Object.entries(activityType.parameters).forEach(([parameterName, parameter]) => {
+          const parameterType = parameter.schema.type;
+          // TODO support series and struct?
+          if (parameterType === 'series' || parameterType === 'struct') {
+            return;
+          }
+          const key = `${parameterName} (${parameterType})`;
+          const matchingName = !!acc[key];
+          const matchingEntry = matchingName && acc[key].type === parameterType;
+          const isVariant = parameterType === 'variant';
+          let values = null;
+          if (matchingEntry) {
+            acc[key].activityTypes.push(activityType.name);
+            if (isVariant) {
+              // If we have a matching variant, add unique variants to the list
+              const variantValues = (parameter.schema as ValueSchemaVariant).variants.map(variant => variant.key);
+              values = Array.from(new Set([...variantValues, ...(acc[key].values || [])]));
+              acc[key].values = values;
+            }
+          }
+          if (!matchingEntry) {
+            const values = isVariant
+              ? (parameter.schema as ValueSchemaVariant).variants.map(variant => variant.key)
+              : null;
+            const unit = parameter.schema.metadata?.unit?.value ?? null;
+            acc[key] = {
+              activityTypes: [activityType.name],
+              name: parameterName,
+              type: parameterType,
+              ...(values ? { values } : null),
+              ...(unit ? { unit } : null),
+              label: `${parameterName} (${parameterType})`,
+            };
+          }
+        });
+        return acc;
+      },
+      {},
+    );
+    // TODO support key/value for values array?
+    parameterSubfields = Object.values(allParameterTypes).sort((a, b) => compare(a.label, b.label));
+  }
+
+  $: filteredActivityTypes = $activityTypes.filter(type => {
+    if (!manualInputValue) {
+      return true;
+    }
+
+    return lowercase(type.name).indexOf(lowercase(manualInputValue)) > -1;
+  });
+
+  $: if (manualInputOpen) {
+    manualMenu?.show();
+  } else {
+    manualMenu?.hide();
+  }
+
+  $: {
+    const noFiltersApplied =
+      !filter ||
+      (!filter.dynamic_type_filters?.length && !filter.other_filters?.length && !filter.static_types?.length);
+
+    if (matchingTypes.length && !filteredMatchingTypes.length) {
+      resultingTypesMessage = `No types matching "${resultingTypesInputValue}"`;
+    } else if (!matchingTypes.length && !noFiltersApplied) {
+      resultingTypesMessage = 'No types matching your filter';
+    } else {
+      resultingTypesMessage = '';
+    }
+  }
+
+  function onLayerNameChange(event: Event) {
+    const { value } = getTarget(event);
+    dispatch('rename', { name: value as string });
+  }
+
+  function getDefaultPosition() {
+    if (!rootRef) {
+      return { x: 0, y: 0 };
+    }
+    const { x, y, width, height } = rootRef.getBoundingClientRect();
+    let defaultX = 0;
+    let defaultY = 0;
+    const padding = 16;
+
+    if (x - filterWidth > padding / 2) {
+      defaultX = x - filterWidth - padding / 2;
+    } else if (x + width + filterWidth < document.body.clientWidth - padding / 2) {
+      defaultX = x + width + padding / 2;
+    } else {
+      defaultX = Math.max(0, document.body.clientWidth / 2 - filterWidth / 2);
+    }
+
+    if (y - filterHeight / 2 > padding && y + filterHeight < document.body.clientHeight - padding) {
+      defaultY = y - filterHeight / 2;
+    } else if (y + filterHeight < document.body.clientHeight - padding) {
+      // Show below
+      defaultY = y;
+    } else if (y + height - filterHeight > padding) {
+      // Show above
+      defaultY = y + height - filterHeight;
+    } else {
+      defaultY = Math.max(0, document.body.clientHeight / 2 - filterHeight / 2);
+    }
+
+    return {
+      x: defaultX,
+      y: defaultY,
+    };
+  }
+</script>
+
+<div bind:this={rootRef} class="w-100" style:display="grid">
+  <slot name="trigger" />
+  {#if shown}
+    <Draggable
+      className="st-menu activity-filter-builder"
+      initialWidth={filterWidth}
+      initialHeight={filterHeight}
+      dragOptions={{ defaultPosition: getDefaultPosition() }}
+    >
+      <div slot="handle">
+        <MenuHeader title="Activity Filtering">
+          <input
+            slot="left"
+            value={layerName}
+            autocomplete="off"
+            class="st-input cancel-drag"
+            name="layer-name"
+            aria-label="layer-name"
+            placeholder="Enter a name for this filter..."
+            style="width: 220px"
+            on:input={onLayerNameChange}
+          />
+          <button on:click|stopPropagation={hide} class="st-button icon" aria-label="close">
+            <CloseIcon />
+          </button>
+        </MenuHeader>
+      </div>
+      <div class="body">
+        <CssGrid columns="0.7fr 3px 0.3fr" columnMinSizes={{ 0: 500, 1: 3, 2: 300 }} class="activity-filter-grid">
+          <div class="filters">
+            <div class="filter-section" aria-label="manual-types">
+              <div class="filter-section-header st-typography-medium">
+                Manually Select Types
+                {#if dirtyFilter.static_types?.length}
+                  <button
+                    on:click={onRemoveAllManualTypes}
+                    class="st-button icon"
+                    use:tooltip={{ content: 'Remove Types' }}
+                  >
+                    <CloseIcon />
+                  </button>
+                {/if}
+              </div>
+              <div class="filter-section-content filter-section-content-bordered">
+                <div bind:clientWidth={manualInputWidth}>
+                  <Input>
+                    <div class="search-icon" slot="left"><SearchIcon /></div>
+                    <input
+                      bind:this={manualInputRef}
+                      name="manual-types-filter-input"
+                      class="st-input w-100 manual-types-filter-input"
+                      placeholder="Select types"
+                      bind:value={manualInputValue}
+                      on:click={() => {
+                        requestAnimationFrame(() => {
+                          if (!manualInputOpen) {
+                            manualInputOpen = true;
+                          }
+                        });
+                      }}
+                    />
+                  </Input>
+                </div>
+                <div style:position="relative" style:width="0px">
+                  <Menu
+                    width={manualInputWidth}
+                    hideAfterClick={false}
+                    placement="right-start"
+                    bind:this={manualMenu}
+                    on:hide={() => (manualInputOpen = false)}
+                  >
+                    <div class="manual-types-menu">
+                      {#if filteredActivityTypes.length > 0}
+                        <MenuItem on:click={() => onAddAllManualTypes()}>
+                          <div class="st-typography-bold manual-types-add-all">
+                            Add {filteredActivityTypes.length !== $activityTypes.length ? 'Matching' : 'All'} +
+                          </div>
+                        </MenuItem>
+                        {#each filteredActivityTypes as type}
+                          <MenuItem on:click={() => onManualTypeToggled(type.name)}>
+                            <input
+                              type="checkbox"
+                              checked={(dirtyFilter.static_types || []).indexOf(type.name) > -1}
+                              tabindex={-1}
+                              style:pointer-events="none"
+                            />
+                            <div class="st-typography-body">{type.name}</div>
+                          </MenuItem>
+                        {/each}
+                      {:else}
+                        <MenuItem disabled>No activities matching your filter</MenuItem>
+                      {/if}
+                    </div>
+                  </Menu>
+                </div>
+                {#if dirtyFilter.static_types?.length}
+                  <div class="manual-types-results">
+                    {#each dirtyFilter.static_types as name}
+                      <ActivityTypeResult {name} on:remove={() => onManualTypeToggled(name)} />
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+            </div>
+            <div class="filter-section" aria-label="dynamic-types">
+              <div class="filter-section-header st-typography-medium">
+                <div class="filter-section-title">
+                  Dynamically Select Types
+                  <div class="hint st-typography-body">Type includes...</div>
+                </div>
+                <button
+                  class="st-button icon"
+                  on:click={() => onAddDynamicFilter('dynamic_type_filters')}
+                  aria-label="Add Filter"
+                  use:tooltip={{ content: 'Add Filter' }}
+                >
+                  <FilterWithPlusIcon />
+                </button>
+              </div>
+              {#if dirtyFilter.dynamic_type_filters?.length}
+                <div class="filter-section-content">
+                  <div class="dynamic-filter-content" role="list">
+                    {#each dirtyFilter.dynamic_type_filters as filter, i (filter.id)}
+                      <DynamicFilter
+                        {filter}
+                        on:remove={() => onDynamicFilterRemove('dynamic_type_filters', filter.id)}
+                        on:change={event => onDynamicFilterChange('dynamic_type_filters', event)}
+                        verb={i === 0 ? 'Where' : 'and'}
+                        schema={{
+                          Subsystem: {
+                            does_not_include: { type: 'tag', values: $subsystemTags },
+                            includes: { type: 'tag', values: $subsystemTags },
+                          },
+                          Type: {
+                            does_not_equal: { type: 'variant', values: $activityTypes.map(type => type.name) },
+                            does_not_include: { type: 'string' },
+                            equals: { type: 'variant', values: $activityTypes.map(type => type.name) },
+                            includes: { type: 'string' },
+                          },
+                        }}
+                      />
+                    {/each}
+                  </div>
+                </div>
+              {/if}
+            </div>
+            <div class="filter-section" aria-label="other-filters">
+              <div class="filter-section-header st-typography-medium">
+                <div class="filter-section-title">
+                  Other Filters
+                  <div class="hint st-typography-body">Tags, parameter, scheduling goal, etc...</div>
+                </div>
+                <button
+                  class="st-button icon"
+                  aria-label="Add Filter"
+                  on:click={() => onAddDynamicFilter('other_filters')}
+                  use:tooltip={{ content: 'Add Filter' }}
+                >
+                  <FilterWithPlusIcon />
+                </button>
+              </div>
+              {#if dirtyFilter.other_filters?.length}
+                <div class="filter-section-content">
+                  <div class="dynamic-filter-content" role="list">
+                    {#each dirtyFilter.other_filters as filter, i (filter.id)}
+                      <DynamicFilter
+                        {filter}
+                        on:remove={() => onDynamicFilterRemove('other_filters', filter.id)}
+                        on:change={event => onDynamicFilterChange('other_filters', event)}
+                        verb={i === 0 ? 'Where' : 'and'}
+                        schema={{
+                          Name: {
+                            does_not_equal: { type: 'string' },
+                            does_not_include: { type: 'string' },
+                            equals: { type: 'string' },
+                            includes: { type: 'string' },
+                          },
+                          Parameter: {
+                            subfields: parameterSubfields,
+                          },
+                          SchedulingGoalId: {
+                            does_not_equal: { type: 'int' },
+                            equals: { type: 'int' },
+                          },
+                          Tags: {
+                            does_not_include: { type: 'tag', values: $tags },
+                            includes: { type: 'tag', values: $tags },
+                          },
+                        }}
+                      />
+                    {/each}
+                  </div>
+                </div>
+              {/if}
+            </div>
+          </div>
+
+          <CssGridGutter track={1} type="column" />
+
+          <div class="resulting-types">
+            <div class="resulting-types-title st-typography-medium">
+              Resulting Types
+              <div class="resulting-types-info-container">
+                <div class="resulting-types-info"><DirectiveIcon /> {matchingTypes.length} types</div>
+                <div class="resulting-types-info"><SpanIcon /> {instanceCount} instance{pluralize(instanceCount)}</div>
+              </div>
+            </div>
+            <Input>
+              <div class="search-icon" slot="left"><SearchIcon /></div>
+              <input class="st-input w-100" placeholder="Filter types" bind:value={resultingTypesInputValue} />
+            </Input>
+            <div class="resulting-types-list">
+              {#each filteredMatchingTypes as type}
+                <ActivityTypeResult name={type.name} removable={false}>
+                  <button
+                    slot="right"
+                    on:click={() => onAddTypeSubfilter(type.name)}
+                    class="st-button icon"
+                    aria-label="Add Filter"
+                    use:tooltip={{ content: 'Add Filter' }}
+                  >
+                    <FilterWithPlusIcon />
+                  </button>
+                  <svelte:fragment slot="bottom">
+                    {#if dirtyFilter.type_subfilters && dirtyFilter.type_subfilters[type.name] && dirtyFilter.type_subfilters[type.name].length}
+                      <div class="resulting-type-filters">
+                        {#each dirtyFilter.type_subfilters[type.name] as filter (filter.id)}
+                          <DynamicFilter
+                            {filter}
+                            on:remove={() => onTypeSubfilterRemove(type.name, filter.id)}
+                            on:change={event => onTypeSubfilterChange(type.name, event)}
+                            verb={''}
+                            schema={{
+                              Name: {
+                                does_not_equal: { type: 'string' },
+                                does_not_include: { type: 'string' },
+                                equals: { type: 'string' },
+                                includes: { type: 'string' },
+                              },
+                              Parameter: {
+                                // Filter subfields to only those matching this type
+                                subfields: parameterSubfields.filter(subfield => {
+                                  return subfield.activityTypes.indexOf(type.name) > -1;
+                                }),
+                              },
+                              SchedulingGoalId: {
+                                does_not_equal: { type: 'int' },
+                                equals: { type: 'int' },
+                              },
+                              Tags: {
+                                does_not_include: { type: 'tag', values: $tags },
+                                includes: { type: 'tag', values: $tags },
+                              },
+                            }}
+                          />
+                        {/each}
+                      </div>
+                    {/if}
+                  </svelte:fragment>
+                </ActivityTypeResult>
+              {/each}
+              {#if resultingTypesMessage}
+                <div class="st-typography-label p-1">{resultingTypesMessage}</div>
+              {/if}
+            </div>
+          </div>
+        </CssGrid>
+      </div>
+    </Draggable>
+  {/if}
+</div>
+
+<style>
+  :global(.activity-filter-builder) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 90vh;
+    max-width: 95vw;
+    min-height: 400px;
+    min-width: 600px;
+    width: 100%;
+  }
+
+  :global(.activity-filter-builder .header) {
+    cursor: inherit;
+  }
+
+  .body {
+    /* background: var(--st-gray-15); */
+    background: #f7f7f8; /* TODO: color not in design system */
+    display: flex;
+    flex: 1;
+    height: inherit;
+    overflow: hidden;
+  }
+
+  .filter-section {
+    background: white;
+    border: 1px solid var(--st-gray-20);
+    border-radius: 4px;
+  }
+
+  .filter-section-header {
+    align-items: center;
+    display: flex;
+    height: 40px;
+    justify-content: space-between;
+    padding: 16px 8px;
+  }
+
+  .filter-section-title {
+    display: flex;
+    gap: 8px;
+    user-select: none;
+  }
+
+  .filter-section-title .hint {
+    opacity: 0.5;
+  }
+
+  .filter-section-content {
+    padding: 0px 8px 8px;
+  }
+
+  .filter-section-content-bordered {
+    border-top: 1px solid var(--st-gray-20);
+    padding: 8px;
+  }
+
+  .filters {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: auto;
+    padding: 8px;
+  }
+
+  .resulting-types {
+    background: white;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 8px;
+  }
+
+  .resulting-types input {
+    background: white;
+  }
+
+  .resulting-types-title {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 8px;
+  }
+
+  .resulting-types-info-container {
+    display: flex;
+    gap: 8px;
+  }
+
+  .resulting-types-info {
+    color: var(--st-gray-50);
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+  }
+
+  .resulting-types-list {
+    margin-top: 8px;
+    overflow: auto;
+  }
+
+  .manual-types-menu {
+    --aerie-menu-item-padding: 8px;
+    cursor: pointer;
+    max-height: 320px;
+    overflow: auto;
+    width: 100%;
+  }
+
+  .manual-types-add-all {
+    align-items: center;
+    display: flex;
+    font-style: italic;
+    height: 16px;
+    padding-left: 24px;
+  }
+
+  .manual-types-filter-input {
+    background: white;
+  }
+
+  .manual-types-menu input {
+    margin: 0;
+  }
+
+  .manual-types-results {
+    margin-top: 8px;
+    max-height: 200px;
+    overflow: auto;
+  }
+  .dynamic-filter-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 200px;
+    overflow: auto;
+  }
+
+  .search-icon {
+    align-items: center;
+    color: var(--st-gray-50);
+    display: flex;
+  }
+
+  :global(.activity-filter-grid) {
+    width: 100%;
+  }
+
+  .resulting-type-filters {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 4px;
+    padding-bottom: 8px;
+    padding-left: 16px;
+  }
+</style>
diff --git a/src/components/timeline/form/TimelineEditor/ActivityTypeResult.svelte b/src/components/timeline/form/TimelineEditor/ActivityTypeResult.svelte
new file mode 100644
index 0000000000..3e212952b3
--- /dev/null
+++ b/src/components/timeline/form/TimelineEditor/ActivityTypeResult.svelte
@@ -0,0 +1,77 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
+  import { createEventDispatcher } from 'svelte';
+  import DirectiveIcon from '../../../../assets/timeline-directive.svg?component';
+  import { tooltip } from '../../../../utilities/tooltip';
+
+  export let name: string;
+  export let removable: boolean = true;
+
+  const dispatch = createEventDispatcher<{
+    addFilter: void;
+    remove: void;
+  }>();
+</script>
+
+<div class="activity-type-result" role="listitem" aria-label="activity-type-result-{name}">
+  <div class="top-row">
+    <div class="title st-typography-medium">
+      <DirectiveIcon />
+      <div class="title-text">{name}</div>
+    </div>
+    <slot name="right" />
+    {#if removable}
+      <button
+        on:click|stopPropagation={() => dispatch('remove')}
+        class="st-button icon"
+        use:tooltip={{ content: 'Remove Type' }}
+      >
+        <CloseIcon />
+      </button>
+    {/if}
+  </div>
+  <slot name="bottom" />
+</div>
+
+<style>
+  .activity-type-result {
+    box-shadow: 0px 0px 0px 1px var(--st-gray-20);
+    display: flex;
+    flex-direction: column;
+    margin: 1px;
+    padding-right: 4px;
+  }
+
+  .top-row {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .title {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    overflow: hidden;
+    padding: 8px;
+  }
+
+  .title-text {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .title :global(svg) {
+    flex-shrink: 0;
+  }
+
+  button.icon {
+    color: var(--st-gray-70);
+  }
+</style>
diff --git a/src/components/timeline/form/TimelineEditor/Draggable.svelte b/src/components/timeline/form/TimelineEditor/Draggable.svelte
new file mode 100644
index 0000000000..5234b94f10
--- /dev/null
+++ b/src/components/timeline/form/TimelineEditor/Draggable.svelte
@@ -0,0 +1,59 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import { draggable, type DragOptions } from '@neodrag/svelte';
+  import Resizable from './Resizable.svelte';
+
+  export let dragOptions: DragOptions = {};
+  export let className: string = '';
+  export let initialWidth: number = 500;
+  export let initialHeight: number = 500;
+
+  let rootRef: HTMLDivElement;
+
+  const marginTransform = ({
+    offsetX,
+    offsetY,
+    rootNode,
+  }: {
+    offsetX: number;
+    offsetY: number;
+    rootNode: HTMLElement;
+  }) => {
+    rootNode.style.marginLeft = `${offsetX}px`;
+    rootNode.style.marginTop = `${offsetY}px`;
+  };
+</script>
+
+<div
+  bind:this={rootRef}
+  use:draggable={{
+    bounds: 'body',
+    cancel: '.cancel-drag',
+    handle: $$slots.handle ? '.handle' : undefined,
+    transform: marginTransform,
+    ...dragOptions,
+  }}
+  class="root"
+  role="dialog"
+>
+  <Resizable {className} width={initialWidth} height={initialHeight}>
+    <div class="handle">
+      <slot name="handle" />
+    </div>
+    <slot />
+  </Resizable>
+</div>
+
+<style>
+  .root {
+    left: 0%;
+    position: fixed;
+    top: 0%;
+    z-index: 9999;
+  }
+
+  .handle {
+    cursor: move;
+  }
+</style>
diff --git a/src/components/timeline/form/TimelineEditor/DynamicFilter.svelte b/src/components/timeline/form/TimelineEditor/DynamicFilter.svelte
new file mode 100644
index 0000000000..4686cc503e
--- /dev/null
+++ b/src/components/timeline/form/TimelineEditor/DynamicFilter.svelte
@@ -0,0 +1,358 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import ChevronDownIcon from '@nasa-jpl/stellar/icons/chevron_down.svg?component';
+  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
+  import { createEventDispatcher } from 'svelte';
+  import {
+    ActivityLayerFilterField,
+    ActivityLayerFilterField as ActivityLayerFilterFieldType,
+    FilterOperator,
+  } from '../../../../enums/timeline';
+  import type { SelectedDropdownOptionValue } from '../../../../types/dropdown';
+  import type { TagsChangeEvent } from '../../../../types/tags';
+  import {
+    type ActivityLayerDynamicFilter,
+    type ActivityLayerFilterSubfieldSchema,
+    type DynamicFilterDataType,
+  } from '../../../../types/timeline';
+  import { getTarget } from '../../../../utilities/generic';
+  import { tooltip } from '../../../../utilities/tooltip';
+  import Input from '../../../form/Input.svelte';
+  import ParameterUnits from '../../../parameters/ParameterUnits.svelte';
+  import SearchableDropdown from '../../../ui/SearchableDropdown.svelte';
+  import TagsInput from '../../../ui/Tags/TagsInput.svelte';
+
+  type OperatorSchema<T = any> = Record<
+    keyof typeof FilterOperator,
+    { type: DynamicFilterDataType; values?: Array<T> }
+  >;
+
+  export let filter: ActivityLayerDynamicFilter<any>;
+  export let schema: Partial<Record<keyof typeof ActivityLayerFilterFieldType, Partial<OperatorSchema>>> & {
+    Parameter?: { subfields: ActivityLayerFilterSubfieldSchema[] };
+  } = {};
+  export let verb: string = 'Where';
+
+  const dispatch = createEventDispatcher<{
+    change: { filter: ActivityLayerDynamicFilter<any> };
+    remove: void;
+  }>();
+
+  let dirtyFilter = structuredClone(filter);
+  let currentField = dirtyFilter.field as keyof typeof ActivityLayerFilterFieldType;
+  let currentOperator: keyof typeof FilterOperator | null = dirtyFilter.operator;
+  let subfields: ActivityLayerFilterSubfieldSchema[] | undefined = undefined;
+  let currentSubfieldLabel =
+    dirtyFilter.field === 'Parameter' ? `${dirtyFilter.subfield?.name} (${dirtyFilter.subfield?.type})` : '';
+  let currentType: DynamicFilterDataType = 'string';
+  let currentValue = dirtyFilter.value;
+  let currentValueAsStringOrNumber: string | number = '';
+  let operatorKeys: (keyof typeof FilterOperator)[] = [];
+  let currentUnit: string = '';
+  let currentValuePossibilities: Array<any> = [];
+
+  $: subfields = schema.Parameter?.subfields;
+
+  $: if (currentField !== 'Parameter') {
+    currentSubfieldLabel = '';
+    currentUnit = '';
+    const schemaField = schema[currentField];
+    if (schemaField) {
+      operatorKeys = Object.keys(schemaField) as (keyof typeof FilterOperator)[];
+
+      const firstSchemaField = Object.values(schemaField)[0];
+      currentType = firstSchemaField.type;
+      currentValuePossibilities = firstSchemaField.values || [];
+      if (currentOperator) {
+        const schemaOperator = schemaField[currentOperator];
+        if (schemaOperator !== undefined) {
+          currentType = schemaOperator.type;
+          currentValuePossibilities = schemaOperator.values || [];
+        }
+      }
+    }
+  }
+
+  $: if (currentField === 'Parameter' && currentSubfieldLabel !== undefined && subfields) {
+    const matchingSubfield = subfields.find(subfield => subfield.label === currentSubfieldLabel);
+    if (matchingSubfield) {
+      // Map subfield type to filter type
+      currentType = matchingSubfield.type;
+      currentUnit = matchingSubfield.unit || '';
+      if (matchingSubfield.type === 'string' || matchingSubfield.type === 'path') {
+        operatorKeys = ['includes', 'does_not_include', 'equals', 'does_not_equal'];
+      } else if (matchingSubfield.type === 'int' || matchingSubfield.type === 'real') {
+        operatorKeys = ['equals', 'does_not_equal', 'is_greater_than', 'is_less_than', 'is_within', 'is_not_within'];
+      } else if (matchingSubfield.type === 'duration') {
+        operatorKeys = ['equals', 'does_not_equal', 'is_greater_than', 'is_less_than', 'is_within', 'is_not_within'];
+      } else if (matchingSubfield.type === 'boolean') {
+        operatorKeys = ['equals'];
+      } else if (matchingSubfield.type === 'variant') {
+        operatorKeys = ['equals', 'does_not_equal'];
+        currentValuePossibilities = matchingSubfield.values || [];
+      } else {
+        operatorKeys = [];
+      }
+    }
+  }
+
+  $: if (currentField && currentOperator && currentValue !== undefined) {
+    const newFilter: ActivityLayerDynamicFilter<any> = {
+      field: currentField,
+      id: dirtyFilter.id,
+      operator: currentOperator,
+      value: currentValue,
+    };
+    if (currentSubfieldLabel) {
+      const matchingSubfield = (subfields || []).find(subfield => subfield.label === currentSubfieldLabel);
+      if (matchingSubfield) {
+        newFilter.subfield = { name: matchingSubfield.name, type: matchingSubfield.type };
+      }
+    }
+    // Make sure the filter is different before dispatching a change
+    // since svelte reactivity will run this statement when subfields changes
+    if (JSON.stringify(newFilter) !== JSON.stringify(filter)) {
+      dispatch('change', { filter: newFilter });
+    }
+  }
+
+  $: currentValueAsStringOrNumber = currentValue as string | number;
+
+  async function onTagsInputChange(event: TagsChangeEvent) {
+    const {
+      detail: { tag, type },
+    } = event;
+    let newValue = Array.isArray(currentValue) ? currentValue : [];
+    if (type === 'remove') {
+      currentValue = (newValue as number[]).filter(tagId => tagId !== tag.id) as number[];
+    } else if (type === 'select') {
+      currentValue = (newValue as number[]).concat(tag.id) as number[];
+    }
+  }
+
+  function onFieldChange(event: Event) {
+    const { value } = getTarget(event);
+    if (value) {
+      // Since we changed the field we should reset the value
+      currentValue = getDefaultCurrentValue();
+      currentField = value as keyof typeof ActivityLayerFilterFieldType;
+    }
+  }
+
+  function onSelectParameter(event: CustomEvent<SelectedDropdownOptionValue[]>) {
+    currentSubfieldLabel = event.detail.length ? event.detail[0]?.toString() ?? '' : '';
+    currentValue = getDefaultCurrentValue();
+    currentOperator = null;
+  }
+
+  function onSelectValue(event: CustomEvent<SelectedDropdownOptionValue[]>) {
+    currentValue = event.detail.length ? event.detail[0]?.toString() ?? '' : '';
+  }
+
+  function onOperatorChange(event: Event) {
+    const { value } = getTarget(event);
+    const operator = value as keyof typeof FilterOperator;
+    currentOperator = operator;
+    currentValue = getDefaultCurrentValue();
+  }
+
+  function onRangeInputChange(event: Event, bound: 'min' | 'max' = 'min') {
+    const { value } = getTarget(event);
+    if (typeof value === 'number') {
+      let newValue = Array.isArray(currentValue) ? currentValue.slice() : [0, 0];
+      if (bound === 'min') {
+        newValue[0] = value;
+      } else {
+        newValue[1] = value;
+      }
+      currentValue = newValue;
+    }
+  }
+
+  function asActivityLayerFilterField(s: string): keyof typeof ActivityLayerFilterField {
+    return s as keyof typeof ActivityLayerFilterField;
+  }
+
+  function getDefaultCurrentValue() {
+    if (currentOperator === 'is_within' || currentOperator === 'is_not_within') {
+      return [];
+    }
+    return '';
+  }
+</script>
+
+<div class="dynamic-filter" role="listitem">
+  {#if verb}
+    <div class="st-typography-body verb">{verb}</div>
+  {/if}
+  <select aria-label="field" class="st-select" on:change={onFieldChange} value={currentField}>
+    {#each Object.keys(schema) as key}
+      <option value={key}>{ActivityLayerFilterField[asActivityLayerFilterField(key)]}</option>
+    {/each}
+  </select>
+  {#if currentField === 'Parameter' && subfields}
+    <SearchableDropdown
+      className="dynamic-filter-searchable-dropdown-hide-overflow"
+      placeholder="Select Parameter"
+      selectTooltip="Select Parameter"
+      searchPlaceholder="Filter parameters"
+      on:change={onSelectParameter}
+      selectedOptionValues={[currentSubfieldLabel]}
+      options={subfields.map(subfield => ({ display: subfield.label, value: subfield.label }))}
+    >
+      <ChevronDownIcon slot="icon" />
+    </SearchableDropdown>
+  {/if}
+  <select aria-label="operator" class="st-select" value={currentOperator} on:change={onOperatorChange}>
+    {#each operatorKeys as operator}
+      <option value={operator}>{FilterOperator[operator]}</option>
+    {/each}
+  </select>
+  <div class="dynamic-filter-value">
+    {#if currentType === 'string' || currentType === 'path'}
+      <input
+        name="filter-value"
+        aria-label="value"
+        class="st-input w-100"
+        bind:value={currentValue}
+        autocomplete="off"
+      />
+    {:else if currentOperator === 'is_within' || currentOperator === 'is_not_within'}
+      {#if Array.isArray(currentValue)}
+        <div class="range-input">
+          <Input class="dynamic-filter-input">
+            <input
+              value={currentValue[0]}
+              name="filter-value-min"
+              aria-label="value-min"
+              class="st-input w-100"
+              type="number"
+              on:input={event => onRangeInputChange(event, 'min')}
+              autocomplete="off"
+            />
+            <div class="parameter-right" slot="right">
+              <ParameterUnits unit={currentUnit} />
+            </div>
+          </Input>
+          <div class="st-typography-label">To</div>
+          <Input class="dynamic-filter-input">
+            <input
+              value={currentValue[1]}
+              name="filter-value-max"
+              aria-label="value-max"
+              class="st-input w-100"
+              type="number"
+              on:input={event => onRangeInputChange(event, 'max')}
+              autocomplete="off"
+            />
+            <div class="parameter-right" slot="right">
+              <ParameterUnits unit={currentUnit} />
+            </div>
+          </Input>
+        </div>
+      {/if}
+    {:else if currentType === 'int' || currentType === 'real'}
+      <Input class="dynamic-filter-input">
+        <input
+          name="filter-value"
+          aria-label="value"
+          bind:value={currentValue}
+          class="st-input w-100"
+          type="number"
+          autocomplete="off"
+        />
+        <div class="parameter-right" slot="right">
+          <ParameterUnits unit={currentUnit} />
+        </div>
+      </Input>
+    {:else if currentType === 'duration'}
+      <Input class="dynamic-filter-input">
+        <input
+          name="filter-value"
+          aria-label="value"
+          bind:value={currentValue}
+          class="st-input w-100"
+          type="number"
+          autocomplete="off"
+        />
+        <div class="parameter-right" slot="right">
+          <ParameterUnits unit="ms" />
+        </div>
+      </Input>
+    {:else if currentType === 'boolean'}
+      <select name="filter-value" aria-label="value" class="st-select w-100" bind:value={currentValue}>
+        <option value={true}>True</option>
+        <option value={false}>False</option>
+      </select>
+    {:else if currentType === 'variant'}
+      <SearchableDropdown
+        className="dynamic-filter-searchable-dropdown-hide-overflow"
+        placeholder="Select Variant"
+        selectTooltip="Select Variant"
+        searchPlaceholder="Filter Variants"
+        on:change={onSelectValue}
+        selectedOptionValues={[currentValueAsStringOrNumber]}
+        options={currentValuePossibilities.sort().map(value => ({ display: value, value: value }))}
+      >
+        <ChevronDownIcon slot="icon" />
+      </SearchableDropdown>
+    {:else if currentType === 'tag'}
+      {@const currentValueTags = (Array.isArray(currentValue) ? currentValue : []).map(t =>
+        currentValuePossibilities.find(v => v.id === t),
+      )}
+      <div style:width="100%">
+        <TagsInput
+          name="filter-value"
+          options={currentValuePossibilities}
+          selected={currentValueTags}
+          on:change={onTagsInputChange}
+          creatable={false}
+        />
+      </div>
+    {/if}
+  </div>
+  <button
+    aria-label="Remove filter"
+    on:click|stopPropagation={() => dispatch('remove')}
+    class="st-button icon"
+    use:tooltip={{ content: 'Remove Filter' }}
+    style="min-width: min-content"
+  >
+    <CloseIcon />
+  </button>
+</div>
+
+<style>
+  .dynamic-filter {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    min-height: 26px;
+  }
+
+  .verb {
+    min-width: 40px;
+    width: 40px;
+  }
+
+  :global(.dynamic-filter-searchable-dropdown-hide-overflow) {
+    min-width: 64px;
+    overflow: hidden;
+  }
+
+  .dynamic-filter-value {
+    flex: 1;
+  }
+
+  .range-input {
+    align-items: center;
+    display: flex;
+    gap: 4px;
+  }
+
+  :global(.dynamic-filter-input.input.input-stacked) {
+    display: grid;
+    min-width: 64px;
+  }
+</style>
diff --git a/src/components/timeline/form/TimelineEditor/DynamicFilter.svelte.test.ts b/src/components/timeline/form/TimelineEditor/DynamicFilter.svelte.test.ts
new file mode 100644
index 0000000000..556f1aa64f
--- /dev/null
+++ b/src/components/timeline/form/TimelineEditor/DynamicFilter.svelte.test.ts
@@ -0,0 +1,31 @@
+import { cleanup, fireEvent, render } from '@testing-library/svelte';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import DynamicFilter from './DynamicFilter.svelte';
+
+vi.mock('$env/dynamic/public', () => import.meta.env); // https://github.com/sveltejs/kit/issues/8180
+
+describe('Dynamic Filter component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('Should render the selected field and operator', async () => {
+    const { getByLabelText, getByRole, getByDisplayValue } = render(DynamicFilter, {
+      filter: { field: 'Type', id: 0, operator: 'includes', value: 'ban' },
+      schema: {
+        Type: {
+          equals: { type: 'variant', values: ['BiteBanana', 'PeelBanana'] },
+          includes: { type: 'string' },
+        },
+      },
+    });
+
+    expect((getByRole('option', { name: 'Type' }) as HTMLOptionElement).selected).toBe(true);
+    expect((getByRole('option', { name: 'includes' }) as HTMLOptionElement).selected).toBe(true);
+    expect(getByDisplayValue('ban')).toBeDefined();
+
+    await fireEvent.change(getByLabelText('operator'), { target: { value: 'equals' } });
+    expect((getByRole('option', { name: 'equals' }) as HTMLOptionElement).selected).toBe(true);
+    expect(getByRole('combobox', { name: 'Select Variant' })).toBeDefined();
+  });
+});
diff --git a/src/components/timeline/form/TimelineEditor/EditorSection.svelte b/src/components/timeline/form/TimelineEditor/EditorSection.svelte
new file mode 100644
index 0000000000..bb7c5e7be2
--- /dev/null
+++ b/src/components/timeline/form/TimelineEditor/EditorSection.svelte
@@ -0,0 +1,89 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import PlusIcon from '@nasa-jpl/stellar/icons/plus.svg?component';
+  import RemoveAllIcon from '@nasa-jpl/stellar/icons/remove_all.svg?component';
+  import { createEventDispatcher } from 'svelte';
+  import { classNames } from '../../../../utilities/generic';
+  import { tooltip } from '../../../../utilities/tooltip';
+
+  export let isDragContainer: boolean = false;
+  export let creatable: boolean = false;
+  export let item: string = '';
+  export let itemPlural: string = '';
+  export let itemCount: number | undefined = undefined;
+
+  let pluralizedItem = itemPlural || `${item}s`;
+
+  const dispatch = createEventDispatcher<{
+    create: void;
+    removeAll: void;
+  }>();
+</script>
+
+<fieldset
+  aria-label="{item}-editor"
+  class={classNames('editor-section', { 'editor-section-draggable': isDragContainer })}
+>
+  <div class="editor-section-header">
+    <div class="st-typography-medium">{pluralizedItem}</div>
+    {#if creatable}
+      <div>
+        {#if typeof itemCount === 'number' && itemCount > 0}
+          <button
+            on:click|stopPropagation={() => dispatch('removeAll')}
+            use:tooltip={{ content: `Delete All ${pluralizedItem}`, placement: 'top' }}
+            class="st-button icon"
+          >
+            <RemoveAllIcon />
+          </button>
+        {/if}
+        <button
+          aria-label={`New ${item}`}
+          on:click|stopPropagation={() => dispatch('create')}
+          use:tooltip={{ content: `New ${item}`, placement: 'top' }}
+          class="st-button icon"
+        >
+          <PlusIcon />
+        </button>
+      </div>
+    {/if}
+  </div>
+
+  <slot />
+</fieldset>
+
+<style>
+  .editor-section {
+    border-bottom: 1px solid var(--st-gray-20);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .editor-section-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    user-select: none;
+  }
+
+  .editor-section-header .st-button.icon {
+    color: var(--st-gray-50);
+  }
+
+  .editor-section-header-with-button {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .editor-section-draggable {
+    padding: 0;
+  }
+
+  .editor-section-draggable .editor-section-header {
+    padding: 16px 16px 0;
+  }
+</style>
diff --git a/src/components/timeline/form/TimelineEditor/Resizable.svelte b/src/components/timeline/form/TimelineEditor/Resizable.svelte
new file mode 100644
index 0000000000..4a57f0cefa
--- /dev/null
+++ b/src/components/timeline/form/TimelineEditor/Resizable.svelte
@@ -0,0 +1,53 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import { debounce } from 'lodash-es';
+  import { onDestroy, onMount } from 'svelte';
+  import { classNames } from '../../../../utilities/generic';
+
+  export let resizable: boolean = true;
+  export let width: number = 0;
+  export let height: number = 0;
+  export let className: string = '';
+
+  let rootRef: HTMLDivElement;
+  let currentWidth = width;
+  let currentHeight = height;
+  let resizeObserver: ResizeObserver | null = null;
+  let onResizeDebounced = debounce(onResize, 0);
+
+  onMount(() => {
+    resizeObserver = new ResizeObserver(() => {
+      onResizeDebounced();
+    });
+    resizeObserver.observe(rootRef);
+  });
+
+  onDestroy(() => {
+    resizeObserver?.disconnect();
+  });
+
+  function onResize() {
+    if (rootRef) {
+      const { width, height } = rootRef.getBoundingClientRect();
+      currentWidth = width;
+      currentHeight = height;
+    }
+  }
+</script>
+
+<div
+  bind:this={rootRef}
+  style:width={`${currentWidth}px`}
+  style:height={`${currentHeight}px`}
+  class={classNames('root', { [className]: !!className })}
+  style:resize={resizable ? 'both' : 'none'}
+>
+  <slot />
+</div>
+
+<style>
+  .root {
+    overflow: hidden;
+  }
+</style>
diff --git a/src/components/timeline/form/TimelineEditor/TimelineLayerEditor.svelte b/src/components/timeline/form/TimelineEditor/TimelineLayerEditor.svelte
new file mode 100644
index 0000000000..c275203e74
--- /dev/null
+++ b/src/components/timeline/form/TimelineEditor/TimelineLayerEditor.svelte
@@ -0,0 +1,289 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import ChevronDownIcon from '@nasa-jpl/stellar/icons/chevron_down.svg?component';
+  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
+  import DuplicateIcon from '@nasa-jpl/stellar/icons/duplicate.svg?component';
+  import FilterIcon from '@nasa-jpl/stellar/icons/filter.svg?component';
+  import { createEventDispatcher } from 'svelte';
+  import TimelineLineLayerIcon from '../../../../assets/timeline-line-layer.svg?component';
+  import TimelineXRangeLayerIcon from '../../../../assets/timeline-x-range-layer.svg?component';
+  import { ViewDiscreteLayerColorPresets, ViewLineLayerColorPresets } from '../../../../constants/view';
+  import { externalEventTypes } from '../../../../stores/external-event';
+  import { externalResourceNames, resourceTypes } from '../../../../stores/simulation';
+  import type { RadioButtonId } from '../../../../types/radio-buttons';
+  import type {
+    ActivityLayer,
+    Axis,
+    ChartType,
+    ExternalEventLayerFilter,
+    Layer,
+    ResourceLayerFilter,
+  } from '../../../../types/timeline';
+  import { isActivityLayer, isExternalEventLayer, isLineLayer, isXRangeLayer } from '../../../../utilities/timeline';
+  import { tooltip } from '../../../../utilities/tooltip';
+  import ColorPresetsPicker from '../../../form/ColorPresetsPicker.svelte';
+  import ColorSchemePicker from '../../../form/ColorSchemePicker.svelte';
+  import RadioButton from '../../../ui/RadioButtons/RadioButton.svelte';
+  import RadioButtons from '../../../ui/RadioButtons/RadioButtons.svelte';
+  import SearchableDropdown from '../../../ui/SearchableDropdown.svelte';
+  import TimelineEditorLayerSettings from '../TimelineEditorLayerSettings.svelte';
+  import ActivityFilterBuilder from './ActivityFilterBuilder.svelte';
+
+  export let layer: Layer;
+  export let yAxes: Axis[] = [];
+
+  let filterMenu: ActivityFilterBuilder;
+  let color: string = '';
+  let colorPresets: string[] = [];
+  let isColorScheme: boolean = false;
+  let name: string = '';
+
+  const dispatch = createEventDispatcher<{
+    colorChange: { color: string };
+    duplicate: void;
+    filterChange: { filter: ResourceLayerFilter | ExternalEventLayerFilter };
+    remove: void;
+    updateChartType: ChartType;
+    updateLayer: { property: string; value: string | number | boolean | object | null };
+    visibilityChange: void;
+  }>();
+
+  $: {
+    if (isActivityLayer(layer)) {
+      color = layer.activityColor;
+      colorPresets = ViewDiscreteLayerColorPresets;
+      isColorScheme = false;
+    } else if (isLineLayer(layer)) {
+      color = layer.lineColor;
+      colorPresets = ViewLineLayerColorPresets;
+      isColorScheme = false;
+    } else if (isXRangeLayer(layer)) {
+      color = layer.colorScheme;
+      isColorScheme = true;
+    } else if (isExternalEventLayer(layer)) {
+      color = layer.externalEventColor;
+      colorPresets = ViewDiscreteLayerColorPresets;
+      isColorScheme = false;
+    }
+  }
+
+  $: name = getLayerName(layer);
+
+  $: resourceNames = $resourceTypes
+    .map(type => type.name)
+    .concat($externalResourceNames)
+    .sort();
+
+  function getLayerName(layer: Layer) {
+    if (isActivityLayer(layer)) {
+      name = layer.name;
+    } else if (isLineLayer(layer)) {
+      name = layer.name || layer.filter.resource || 'Line Layer';
+    } else if (isXRangeLayer(layer)) {
+      name = layer.name || layer.filter.resource || 'X-Range Layer';
+    } else if (isExternalEventLayer(layer)) {
+      name = layer.name || 'Events Layer';
+    }
+    return name;
+  }
+
+  function toggleFilterMenu() {
+    filterMenu.toggle();
+  }
+
+  function getActivityLayerFilterCount(layer: ActivityLayer) {
+    return (
+      (layer.filter.activity?.static_types?.length ?? 0) +
+      (layer.filter.activity?.dynamic_type_filters?.length ?? 0) +
+      (layer.filter.activity?.other_filters?.length ?? 0) +
+      (layer.filter.activity?.type_subfilters ? Object.keys(layer.filter.activity?.type_subfilters).length : 0)
+    );
+  }
+
+  function onUpdateChartType(event: CustomEvent<{ id: RadioButtonId }>) {
+    dispatch('updateChartType', event.detail.id as ChartType);
+  }
+</script>
+
+<div class="timeline-layer-editor">
+  <div class="left">
+    <div class="color">
+      {#if isColorScheme}
+        <ColorSchemePicker
+          layout="compact"
+          value={color}
+          on:input={({ detail: { value } }) => dispatch('colorChange', { color: value })}
+        />
+      {:else}
+        <ColorPresetsPicker
+          value={color}
+          presetColors={colorPresets}
+          on:input={({ detail: { value } }) => dispatch('colorChange', { color: value })}
+        />
+      {/if}
+    </div>
+    {#if isActivityLayer(layer)}
+      {@const filterCount = getActivityLayerFilterCount(layer)}
+      <ActivityFilterBuilder
+        layerName={layer.name}
+        filter={layer.filter.activity}
+        on:filterChange
+        on:rename={({ detail: { name: newName } }) => dispatch('updateLayer', { property: 'name', value: newName })}
+        bind:this={filterMenu}
+      >
+        <button
+          aria-label="Toggle activity filter builder modal"
+          slot="trigger"
+          on:click|stopPropagation={toggleFilterMenu}
+          class="st-button icon w-100"
+          style:position="relative"
+          use:tooltip={{
+            content: `Filter Activities${filterCount > 0 ? ` (${filterCount} applied)` : ''}`,
+            placement: 'top',
+          }}
+        >
+          <div class="activity-layer-name st-select">
+            <div class="activity-layer-name-text">
+              {name || 'Activity Layer'}
+            </div>
+            <div class="activity-layer-name-badge">
+              {#if filterCount > 0}
+                <div>{filterCount}</div>
+              {/if}
+              <FilterIcon />
+            </div>
+          </div>
+        </button>
+      </ActivityFilterBuilder>
+    {:else if isLineLayer(layer) || isXRangeLayer(layer)}
+      <SearchableDropdown
+        maxListHeight="400px"
+        selectedOptionLabel={layer.name}
+        selectTooltip={layer.filter.resource || 'Select Resource'}
+        showPlaceholderOption={false}
+        className="w-100"
+        placeholder="Select Resource"
+        searchPlaceholder="Filter resources"
+        selectedOptionValues={layer.filter.resource ? [layer.filter.resource] : []}
+        options={resourceNames.map(resourceName => ({ display: resourceName, value: resourceName }))}
+        on:change={({ detail: values }) => dispatch('filterChange', { filter: values.length ? values[0] : '' })}
+      >
+        <ChevronDownIcon slot="icon" />
+      </SearchableDropdown>
+    {:else if isExternalEventLayer(layer)}
+      <SearchableDropdown
+        allowMultiple
+        selectedOptionLabel={layer.name}
+        showPlaceholderOption={false}
+        className="w-100"
+        placeholder="Select Event Types"
+        selectTooltip="Select Event Types"
+        searchPlaceholder="Filter event types"
+        selectedOptionValues={layer.filter.externalEvent?.event_types ?? []}
+        options={$externalEventTypes.map(type => ({ display: type.name, value: type.name }))}
+        on:change={({ detail: values }) => dispatch('filterChange', { filter: { event_types: values } })}
+      >
+        <ChevronDownIcon slot="icon" />
+      </SearchableDropdown>
+    {/if}
+  </div>
+  <div class="actions">
+    {#if isLineLayer(layer) || isXRangeLayer(layer)}
+      <RadioButtons selectedButtonId={layer.chartType} on:select-radio-button={onUpdateChartType}>
+        <RadioButton use={[[tooltip, { content: 'Line', placement: 'top' }]]} id="line">
+          <TimelineLineLayerIcon />
+        </RadioButton>
+        <RadioButton use={[[tooltip, { content: 'X-Range', placement: 'top' }]]} id="x-range">
+          <TimelineXRangeLayerIcon />
+        </RadioButton>
+      </RadioButtons>
+    {/if}
+    {#if !isActivityLayer(layer)}
+      <TimelineEditorLayerSettings
+        {layer}
+        on:input={event => dispatch('updateLayer', { property: event.detail.name, value: event.detail.value })}
+        on:delete={() => dispatch('remove')}
+        {yAxes}
+      />
+    {/if}
+    <button
+      on:click|stopPropagation={() => dispatch('duplicate')}
+      use:tooltip={{ content: 'Duplicate', placement: 'top' }}
+      class="st-button icon"
+    >
+      <DuplicateIcon />
+    </button>
+    <button
+      on:click|stopPropagation={() => dispatch('remove')}
+      use:tooltip={{ content: 'Delete', placement: 'top' }}
+      class="st-button icon"
+    >
+      <CloseIcon />
+    </button>
+  </div>
+</div>
+
+<style>
+  .timeline-layer-editor {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+    padding: 4px 0px;
+  }
+
+  .left,
+  .actions {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+  }
+
+  :global(.actions > .st-button) {
+    color: var(--st-gray-50);
+  }
+
+  .left {
+    flex: 1;
+  }
+
+  .actions {
+    display: flex;
+    gap: 4px;
+  }
+
+  .color {
+    display: flex;
+    height: min-content;
+  }
+
+  .activity-layer-name {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    gap: 4px;
+    justify-content: space-between;
+    overflow: hidden;
+    padding: 0px 4px;
+  }
+
+  .activity-layer-name-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .activity-layer-name-badge {
+    align-items: center;
+    display: flex;
+    gap: 4px;
+  }
+
+  .activity-layer-name-badge > div {
+    background: var(--st-gray-15);
+    border-radius: 2px;
+    min-width: 16px;
+    padding: 0px 4px;
+  }
+</style>
diff --git a/src/components/timeline/form/TimelineEditorLayerFilter.svelte b/src/components/timeline/form/TimelineEditorLayerFilter.svelte
deleted file mode 100644
index 6b00175185..0000000000
--- a/src/components/timeline/form/TimelineEditorLayerFilter.svelte
+++ /dev/null
@@ -1,212 +0,0 @@
-<svelte:options immutable={true} />
-
-<script lang="ts">
-  import SearchIcon from '@nasa-jpl/stellar/icons/search.svg?component';
-  import { createEventDispatcher } from 'svelte';
-  import type { Layer } from '../../../types/timeline';
-  import { unique } from '../../../utilities/generic';
-  import { isActivityLayer, isExternalEventLayer, isLineLayer, isXRangeLayer } from '../../../utilities/timeline';
-  import Input from '../../form/Input.svelte';
-  import Menu from '../../menus/Menu.svelte';
-  import MenuHeader from '../../menus/MenuHeader.svelte';
-
-  export let layer: Layer;
-  export let values: string[];
-  export let options: string[] = [];
-
-  const dispatch = createEventDispatcher<{
-    change: { values: string[] };
-  }>();
-
-  let filterMenu: Menu;
-  let input: HTMLInputElement;
-  let filterString: string = '';
-  let filteredValues: string[] = [];
-  let menuTitle: string = '';
-  let selectedValuesMap: Record<string, boolean> = {};
-  let searchText: string = '';
-
-  $: if (layer) {
-    selectedValuesMap = listToMap(values);
-    if (isActivityLayer(layer)) {
-      menuTitle = 'Activity Dictionary';
-    } else if (isExternalEventLayer(layer)) {
-      menuTitle = 'External Event Types';
-    } else if (isLineLayer(layer)) {
-      menuTitle = 'Resource Types';
-    } else if (isXRangeLayer(layer)) {
-      menuTitle = 'Resource Types';
-    }
-    if (isActivityLayer(layer)) {
-      searchText = 'Search activities';
-    } else if (isExternalEventLayer(layer)) {
-      searchText = 'Search external event types';
-    } else {
-      searchText = 'Search resources';
-    }
-  }
-
-  $: {
-    if (filterString) {
-      const filterStringLower = filterString.toLocaleLowerCase();
-      filteredValues = options.filter(item => item.toLocaleLowerCase().indexOf(filterStringLower) > -1);
-    } else {
-      filteredValues = options.slice();
-    }
-    filteredValues = unique(filteredValues);
-  }
-
-  function listToMap(list: string[]): Record<string, boolean> {
-    return list.reduce((map: Record<string, true>, item) => {
-      if (!map[item]) {
-        map[item] = true;
-      }
-      return map;
-    }, {});
-  }
-
-  function selectFilteredValues() {
-    const newValues = [...new Set([...values, ...filteredValues])];
-    dispatch('change', { values: newValues });
-  }
-
-  function unselectFilteredValues() {
-    const newValues: string[] = [];
-    dispatch('change', { values: newValues });
-  }
-
-  function toggleItem(value: string) {
-    let newValues = [];
-    if (selectedValuesMap[value]) {
-      newValues = values.filter(i => value !== i);
-    } else {
-      newValues = [...values, value];
-    }
-    dispatch('change', { values: newValues });
-  }
-</script>
-
-<div class="timeline-editor-layer-filter" style="position: relative">
-  <!-- TODO work out how to have focus also properly open the menu
-  without stomping on click -->
-  <Input>
-    <input
-      bind:this={input}
-      bind:value={filterString}
-      on:click|stopPropagation={() => {
-        if (!filterMenu.isShown()) {
-          filterMenu.show();
-          input.focus();
-        }
-      }}
-      autocomplete="off"
-      class="st-input w-100"
-      name="filter"
-      placeholder={searchText}
-    />
-    <div class="filter-search-icon" slot="left"><SearchIcon /></div>
-  </Input>
-  <Menu hideAfterClick={false} bind:this={filterMenu} placement="bottom-start" on:hide={() => (filterString = '')}>
-    <div class="menu-content">
-      <MenuHeader title={menuTitle} />
-      <div class="body st-typography-body">
-        {#if filteredValues.length}
-          <div class="values">
-            {#each filteredValues as item}
-              <button
-                class="value st-button tertiary st-typography-body"
-                on:click={() => toggleItem(item)}
-                class:active={selectedValuesMap[item]}
-              >
-                {item}
-              </button>
-            {/each}
-          </div>
-        {:else}
-          <div class="st-typography-label empty-state">No items matching filter</div>
-        {/if}
-      </div>
-      <div class="list-buttons menu-border-top">
-        <button class="st-button secondary list-button" on:click={selectFilteredValues}>
-          Select {filteredValues.length}
-          {#if filteredValues.length === 1}
-            {isActivityLayer(layer) ? 'activity' : isExternalEventLayer(layer) ? 'external event type' : 'resource'}
-          {:else}
-            {isActivityLayer(layer) ? 'activities' : isExternalEventLayer(layer) ? 'external event types' : 'resources'}
-          {/if}
-        </button>
-        <button class="st-button secondary list-button" on:click={unselectFilteredValues}>Unselect all</button>
-      </div>
-    </div>
-  </Menu>
-</div>
-
-<style>
-  .timeline-editor-layer-filter {
-    display: flex;
-  }
-
-  .timeline-editor-layer-filter :global(.input) {
-    z-index: 1;
-  }
-
-  .filter-search-icon {
-    align-items: center;
-    color: var(--st-gray-50);
-    display: flex;
-  }
-
-  .menu-content {
-    display: grid;
-    grid-template-rows: min-content 1fr min-content;
-    max-height: 360px;
-  }
-
-  .body {
-    cursor: auto;
-    display: grid;
-    gap: 8px;
-    overflow: auto;
-    text-align: left;
-  }
-
-  .values {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .value {
-    border-radius: 0;
-    justify-content: left;
-    padding: 16px 8px;
-  }
-
-  .value:hover {
-    background: var(--st-gray-20);
-  }
-
-  .value.active,
-  .value.active:hover {
-    background: #4fa1ff4f;
-  }
-
-  .body :global(.input-inline) {
-    padding: 0;
-  }
-
-  .list-buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 8px;
-    width: 100%;
-  }
-
-  .empty-state {
-    margin: 8px;
-  }
-
-  .menu-border-top {
-    border-top: 1px solid var(--st-gray-20);
-  }
-</style>
diff --git a/src/components/timeline/form/TimelineEditorLayerSection.svelte b/src/components/timeline/form/TimelineEditorLayerSection.svelte
deleted file mode 100644
index d37b5436e0..0000000000
--- a/src/components/timeline/form/TimelineEditorLayerSection.svelte
+++ /dev/null
@@ -1,220 +0,0 @@
-<svelte:options immutable={true} />
-
-<script lang="ts">
-  import TrashIcon from '@nasa-jpl/stellar/icons/trash.svg?component';
-  import { createEventDispatcher } from 'svelte';
-  import { ViewDiscreteLayerColorPresets, ViewLineLayerColorPresets } from '../../../constants/view';
-  import { externalEventTypes } from '../../../stores/external-event';
-  import { activityTypes } from '../../../stores/plan';
-  import { externalResourceNames, resourceTypes } from '../../../stores/simulation';
-  import type { Axis, Layer, XRangeLayerColorScheme } from '../../../types/timeline';
-  import { getTarget } from '../../../utilities/generic';
-  import { isActivityLayer, isExternalEventLayer, isLineLayer, isXRangeLayer } from '../../../utilities/timeline';
-  import { tooltip } from '../../../utilities/tooltip';
-  import ColorPresetsPicker from '../../form/ColorPresetsPicker.svelte';
-  import ColorSchemePicker from '../../form/ColorSchemePicker.svelte';
-  import CssGrid from '../../ui/CssGrid.svelte';
-  import TimelineEditorLayerFilter from './TimelineEditorLayerFilter.svelte';
-  import TimelineEditorLayerSelectedFilters from './TimelineEditorLayerSelectedFilters.svelte';
-  import TimelineEditorLayerSettings from './TimelineEditorLayerSettings.svelte';
-
-  export let layer: Layer;
-  export let yAxes: Axis[];
-
-  const dispatch = createEventDispatcher<{
-    handleDeleteLayerClick: object;
-    handleUpdateLayerChartType: { value: string | number | boolean | null };
-    handleUpdateLayerColor: { value: string };
-    handleUpdateLayerColorScheme: { value: XRangeLayerColorScheme };
-    handleUpdateLayerFilter: { values: string[] };
-    handleUpdateLayerProperty: { name: string; value: string | number | boolean | null };
-  }>();
-
-  let filterOptions: string[] = [];
-  let filterValues: string[] = [];
-
-  $: {
-    if (isActivityLayer(layer)) {
-      filterOptions = $activityTypes.map(type => type.name);
-    } else if (isExternalEventLayer(layer)) {
-      filterOptions = $externalEventTypes.map(type => type.name);
-    } else if (isLineLayer(layer) || isXRangeLayer(layer)) {
-      filterOptions = $resourceTypes
-        .map(type => type.name)
-        .concat($externalResourceNames)
-        .sort();
-    }
-  }
-
-  $: {
-    // getFilterValuesForLayer
-    if (isActivityLayer(layer)) {
-      const activityLayer = layer;
-      const activityTypes = activityLayer.filter?.activity?.types ?? [];
-      filterValues = [...activityTypes];
-    } else if (isExternalEventLayer(layer)) {
-      // NOTE: if a derivation group is disabled, this doesn't get invoked and does not update. however, on dissociation it does.
-      const externalEventLayer = layer;
-      const externalEventTypes = externalEventLayer.filter?.externalEvent?.event_types ?? [];
-      filterValues = [...externalEventTypes];
-    } else if (isLineLayer(layer) || isXRangeLayer(layer)) {
-      const resourceLayer = layer;
-      const resourceNames = resourceLayer.filter?.resource?.names ?? [];
-      filterValues = [...resourceNames];
-    }
-  }
-
-  function handleDeleteLayerFilterValue(value: string) {
-    const values = filterValues.filter(entry => entry !== value);
-    dispatch('handleUpdateLayerFilter', { values }); // dispatch update layer filter here with newValues
-  }
-</script>
-
-<div class="timeline-layer timeline-element">
-  <CssGrid columns="1fr 0.75fr 24px 24px 24px" gap="8px" class="editor-section-grid">
-    <TimelineEditorLayerFilter
-      values={filterValues}
-      options={filterOptions}
-      {layer}
-      on:change={event => {
-        const { values } = event.detail;
-        dispatch('handleUpdateLayerFilter', { values });
-      }}
-    />
-    <select
-      class="st-select w-100"
-      name="chartType"
-      value={layer.chartType}
-      on:change={event => dispatch('handleUpdateLayerChartType', { value: getTarget(event).value })}
-    >
-      <option value="activity">Activity</option>
-      <option value="line">Line</option>
-      <option value="x-range">X-Range</option>
-      <option value="externalEvent">External Event</option>
-    </select>
-    <TimelineEditorLayerSettings
-      {layer}
-      on:input={event => dispatch('handleUpdateLayerProperty', { name: event.detail.name, value: event.detail.value })}
-      on:delete={() => dispatch('handleDeleteLayerClick', {})}
-      {yAxes}
-    />
-
-    {#if isActivityLayer(layer)}
-      <ColorPresetsPicker
-        presetColors={ViewDiscreteLayerColorPresets}
-        tooltipText="Layer Color"
-        value={layer.activityColor}
-        on:input={event => dispatch('handleUpdateLayerColor', { value: event.detail.value })}
-      />
-    {:else if isLineLayer(layer)}
-      <ColorPresetsPicker
-        presetColors={ViewLineLayerColorPresets}
-        tooltipText="Layer Color"
-        value={layer.lineColor}
-        on:input={event => dispatch('handleUpdateLayerColor', { value: event.detail.value })}
-      />
-    {:else if isXRangeLayer(layer)}
-      <ColorSchemePicker
-        layout="compact"
-        value={layer.colorScheme}
-        on:input={event => dispatch('handleUpdateLayerColorScheme', { value: event.detail.value })}
-      />
-    {:else if isExternalEventLayer(layer)}
-      <ColorPresetsPicker
-        presetColors={ViewDiscreteLayerColorPresets}
-        tooltipText="Layer Color"
-        value={layer.externalEventColor}
-        on:input={event => dispatch('handleUpdateLayerColor', { value: event.detail.value })}
-      />
-    {/if}
-
-    <button
-      on:click={() => dispatch('handleDeleteLayerClick', {})}
-      use:tooltip={{ content: 'Delete Layer', placement: 'top' }}
-      class="st-button icon"
-    >
-      <TrashIcon />
-    </button>
-  </CssGrid>
-  <TimelineEditorLayerSelectedFilters
-    chartType={layer.chartType}
-    filters={filterValues}
-    on:remove={event => handleDeleteLayerFilterValue(event.detail.filter)}
-  />
-</div>
-
-<style>
-  :global(.editor-section-grid form) {
-    display: grid;
-  }
-
-  :global(.editor-section-grid) {
-    align-items: center;
-    flex: 1;
-    position: relative;
-    width: 100%;
-  }
-
-  :global(.editor-section-grid-labels > *) {
-    min-width: 40px;
-  }
-
-  :global(.input.input-stacked.editor-input) {
-    display: grid;
-    min-width: 40px;
-    width: auto;
-  }
-
-  :global(.input.input-stacked.editor-input label) {
-    display: none;
-  }
-
-  :global(.input.input-inline.editor-input) {
-    grid-template-columns: 60px auto;
-    padding: 0;
-  }
-
-  :global(.editor-section-grid form) {
-    display: grid;
-  }
-
-  :global(.editor-section-grid) {
-    align-items: center;
-    flex: 1;
-    position: relative;
-    width: 100%;
-  }
-
-  :global(.editor-section-grid-labels > *) {
-    min-width: 40px;
-  }
-
-  .timeline-layer {
-    padding: 4px 16px;
-  }
-
-  .timeline-layer {
-    align-items: flex-end;
-    display: flex;
-  }
-
-  :global(.input.input-stacked.editor-input) {
-    display: grid;
-    min-width: 40px;
-    width: auto;
-  }
-
-  :global(.input.input-stacked.editor-input label) {
-    display: none;
-  }
-
-  :global(.input.input-inline.editor-input) {
-    grid-template-columns: 60px auto;
-    padding: 0;
-  }
-
-  .timeline-layer {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-</style>
diff --git a/src/components/timeline/form/TimelineEditorLayerSettings.svelte b/src/components/timeline/form/TimelineEditorLayerSettings.svelte
index eec5896e8d..a9ff3210a8 100644
--- a/src/components/timeline/form/TimelineEditorLayerSettings.svelte
+++ b/src/components/timeline/form/TimelineEditorLayerSettings.svelte
@@ -67,7 +67,7 @@
             class="st-input w-100"
             name="name"
             type="string"
-            value={layerAsLine.name || ''}
+            value={layer.name || ''}
             on:input={onInput}
           />
         </Input>
@@ -118,7 +118,7 @@
             class="st-input w-100"
             name="name"
             type="string"
-            value={layerAsXRange.name || ''}
+            value={layer.name || ''}
             on:input={onInput}
           />
         </Input>
diff --git a/src/components/timeline/form/TimelineEditorPanel.svelte b/src/components/timeline/form/TimelineEditorPanel.svelte
index c970accaef..e1ce91d401 100644
--- a/src/components/timeline/form/TimelineEditorPanel.svelte
+++ b/src/components/timeline/form/TimelineEditorPanel.svelte
@@ -2,11 +2,9 @@
 
 <script lang="ts">
   import ArrowLeftIcon from '@nasa-jpl/stellar/icons/arrow_left.svg?component';
+  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
   import DuplicateIcon from '@nasa-jpl/stellar/icons/duplicate.svg?component';
   import PenIcon from '@nasa-jpl/stellar/icons/pen.svg?component';
-  import PlusIcon from '@nasa-jpl/stellar/icons/plus.svg?component';
-  import RemoveAllIcon from '@nasa-jpl/stellar/icons/remove_all.svg?component';
-  import TrashIcon from '@nasa-jpl/stellar/icons/trash.svg?component';
   import GripVerticalIcon from 'bootstrap-icons/icons/grip-vertical.svg?component';
   import { onMount } from 'svelte';
   import { dndzone } from 'svelte-dnd-action';
@@ -44,6 +42,7 @@
     ActivityLayer,
     ActivityOptions,
     Axis,
+    ChartType,
     DiscreteOptions,
     ExternalEventLayer,
     ExternalEventOptions,
@@ -54,7 +53,6 @@
     Timeline,
     VerticalGuide,
     XRangeLayer,
-    XRangeLayerColorScheme,
   } from '../../../types/timeline';
   import type { ViewGridSection } from '../../../types/view';
   import effects from '../../../utilities/effects';
@@ -68,6 +66,7 @@
     createTimelineXRangeLayer,
     createVerticalGuide,
     createYAxis,
+    getNextLayerID,
     isActivityLayer,
     isExternalEventLayer,
     isLineLayer,
@@ -83,7 +82,8 @@
   import Panel from '../../ui/Panel.svelte';
   import RadioButton from '../../ui/RadioButtons/RadioButton.svelte';
   import RadioButtons from '../../ui/RadioButtons/RadioButtons.svelte';
-  import TimelineEditorLayerSection from './TimelineEditorLayerSection.svelte';
+  import EditorSection from './TimelineEditor/EditorSection.svelte';
+  import TimelineLayerEditor from './TimelineEditor/TimelineLayerEditor.svelte';
   import TimelineEditorYAxisSettings from './TimelineEditorYAxisSettings.svelte';
 
   export let gridSection: ViewGridSection;
@@ -91,6 +91,9 @@
   let horizontalGuides: HorizontalGuide[] = [];
   let editorWidth: number;
   let layers: Layer[] = [];
+  let activityLayers: ActivityLayer[] = [];
+  let resourceLayers: (LineLayer | XRangeLayer)[] = [];
+  let externalEventLayers: ExternalEventLayer[] = [];
   let timelines: Timeline[] = [];
   let rowHasNonActivityChartLayer: boolean = false;
   let rows: Row[] = [];
@@ -109,6 +112,20 @@
   $: horizontalGuides = selectedRow?.horizontalGuides || [];
   $: yAxes = selectedRow?.yAxes || [];
   $: layers = selectedRow?.layers || [];
+  $: if (layers) {
+    activityLayers = [];
+    resourceLayers = [];
+    externalEventLayers = [];
+    layers.forEach(l => {
+      if (isActivityLayer(l)) {
+        activityLayers.push(l);
+      } else if (isLineLayer(l) || isXRangeLayer(l)) {
+        resourceLayers.push(l);
+      } else if (isExternalEventLayer(l)) {
+        externalEventLayers.push(l);
+      }
+    });
+  }
   $: rowHasActivityLayer = !!selectedRow?.layers.find(isActivityLayer) || false;
   $: rowHasExternalEventLayer = selectedRow?.layers.find(isExternalEventLayer) || false;
   $: rowHasNonActivityChartLayer =
@@ -176,14 +193,39 @@
     viewUpdateRow('yAxes', filteredYAxes);
   }
 
-  function handleNewLayerClick() {
-    const layer = createTimelineActivityLayer(timelines);
+  // TODO move to a util?
+  function createTimelineLayer(chartType: Layer['chartType']): Layer {
+    switch (chartType) {
+      case 'line':
+        return createTimelineLineLayer(timelines, yAxes);
+      case 'x-range':
+        return createTimelineXRangeLayer(timelines, yAxes);
+      case 'externalEvent':
+        return createTimelineExternalEventLayer(timelines);
+      default:
+        return createTimelineActivityLayer(timelines);
+    }
+  }
+
+  function handleNewLayerClick(chartType: Layer['chartType']) {
+    let layer = createTimelineLayer(chartType);
+
+    // Assign yAxisId to existing value or new axis
+    if (chartType === 'line' || chartType === 'x-range') {
+      if (yAxes.length > 0) {
+        layer.yAxisId = yAxes[0].id;
+      } else {
+        handleNewYAxisClick();
+        layer.yAxisId = yAxes[0].id;
+      }
+    }
+
     layers = [...layers, layer];
     viewUpdateRow('layers', layers);
   }
 
-  function handleRemoveAllLayersClick() {
-    effects.deleteTimelineLayers();
+  function handleRemoveAllLayersClick(chartType: 'activity' | 'resource' | 'externalEvent') {
+    effects.deleteTimelineLayers(layers, chartType);
   }
 
   function handleDeleteLayerClick(layer: Layer) {
@@ -191,6 +233,11 @@
     viewUpdateRow('layers', filteredLayers);
   }
 
+  function handleDuplicateLayer(layer: Layer) {
+    const duplicatedLayer = { ...structuredClone(layer), id: getNextLayerID(timelines) };
+    viewUpdateRow('layers', [...layers, duplicatedLayer]);
+  }
+
   function handleOptionRadioChange(event: CustomEvent<{ id: RadioButtonId }>, name: keyof DiscreteOptions) {
     const { id } = event.detail;
     viewUpdateRow('discreteOptions', { ...discreteOptions, [name]: id });
@@ -321,56 +368,12 @@
     viewUpdateRow('horizontalGuides', newHorizontalGuides);
   }
 
-  function handleUpdateLayerFilter(values: string[], layer: Layer) {
-    const newLayers = layers.map(currentLayer => {
-      if (layer.id === currentLayer.id) {
-        if (isActivityLayer(currentLayer)) {
-          const newLayer: Layer = {
-            ...currentLayer,
-            filter: {
-              ...currentLayer.filter,
-              activity: {
-                types: values,
-              },
-            },
-          };
-          return newLayer;
-        } else if (isExternalEventLayer(currentLayer)) {
-          const newLayer: Layer = {
-            ...currentLayer,
-            filter: {
-              ...currentLayer.filter,
-              externalEvent: {
-                event_types: values,
-              },
-            },
-          };
-          return newLayer;
-        } else if (currentLayer.chartType === 'line' || currentLayer.chartType === 'x-range') {
-          const newLayer: Layer = {
-            ...currentLayer,
-            filter: {
-              ...currentLayer.filter,
-              resource: {
-                names: values,
-              },
-            },
-          };
-          return newLayer;
-        }
-      }
-      return currentLayer;
-    });
-
-    viewUpdateRow('layers', newLayers);
-  }
-
-  function handleUpdateLayerProperty(name: string, value: string | number | boolean | null, layer: Layer) {
+  function handleUpdateLayerProperty(property: string, value: string | number | boolean | object | null, layer: Layer) {
     const newLayers = layers.map(l => {
       if (layer.id === l.id) {
         return {
           ...layer,
-          [name]: value,
+          [property]: value,
         };
       }
       return l;
@@ -378,33 +381,13 @@
     viewUpdateRow('layers', newLayers);
   }
 
-  function handleUpdateLayerChartType(value: string | number | boolean | null, layer: Layer) {
+  function handleUpdateResourceLayerChartType(value: ChartType, layer: Layer) {
     const newLayers = layers.map(l => {
       if (layer.id === l.id) {
-        let newLayer: ActivityLayer | LineLayer | XRangeLayer | ExternalEventLayer | undefined;
-        if (value === 'activity') {
-          newLayer = { ...createTimelineActivityLayer(timelines), id: l.id };
-        } else if (value === 'externalEvent') {
-          newLayer = { ...createTimelineExternalEventLayer(timelines), id: l.id };
-        } else if (value === 'line' || value === 'x-range') {
-          if (value === 'line') {
-            newLayer = { ...createTimelineLineLayer(timelines, yAxes), id: l.id };
-          } else {
-            newLayer = { ...createTimelineXRangeLayer(timelines, yAxes), id: l.id };
-          }
-
-          // Assign yAxisId to existing value or new axis
-          if (typeof layer.yAxisId === 'number') {
-            newLayer.yAxisId = l.yAxisId;
-          } else if (yAxes.length > 0) {
-            newLayer.yAxisId = yAxes[0].id;
-          } else {
-            handleNewYAxisClick();
-            newLayer.yAxisId = yAxes[0].id;
-          }
-        }
-        if (newLayer !== undefined) {
-          return newLayer;
+        if (isXRangeLayer(l) && value === 'line') {
+          return createTimelineLineLayer(timelines, yAxes, { filter: l.filter, id: l.id, name: l.name });
+        } else if (isLineLayer(l) && value === 'x-range') {
+          return createTimelineXRangeLayer(timelines, yAxes, { filter: l.filter, id: l.id, name: l.name });
         }
       }
       return l;
@@ -420,8 +403,10 @@
           return { ...l, activityColor: value };
         } else if (isExternalEventLayer(l)) {
           return { ...l, externalEventColor: value };
-        } else if (l.chartType === 'line') {
+        } else if (isLineLayer(l)) {
           return { ...l, lineColor: value };
+        } else if (isXRangeLayer(l)) {
+          return { ...l, colorScheme: value };
         }
       }
       return l;
@@ -429,15 +414,15 @@
     viewUpdateRow('layers', newLayers);
   }
 
-  function handleUpdateLayerColorScheme(value: XRangeLayerColorScheme, layer: Layer) {
-    const newLayers = layers.map(l => {
-      if (layer.id === l.id) {
-        (l as XRangeLayer).colorScheme = value;
-      }
-      return l;
-    });
-    viewUpdateRow('layers', newLayers);
-  }
+  // function handleUpdateLayerColorScheme(value: XRangeLayerColorScheme, layer: Layer) {
+  //   const newLayers = layers.map(l => {
+  //     if (layer.id === l.id) {
+  //       (l as XRangeLayer).colorScheme = value;
+  //     }
+  //     return l;
+  //   });
+  //   viewUpdateRow('layers', newLayers);
+  // }
 
   function handleNewHorizontalGuideClick() {
     if (!selectedRow) {
@@ -520,8 +505,7 @@
       {#if !selectedTimeline}
         <fieldset class="editor-section">No timeline selected</fieldset>
       {:else}
-        <fieldset class="editor-section">
-          <div class="st-typography-medium editor-section-header">Margins</div>
+        <EditorSection item="Margin">
           <CssGrid columns="1fr 1fr" gap="8px" class="editor-section-grid">
             <form on:submit={event => event.preventDefault()}>
               <Input>
@@ -548,30 +532,15 @@
               />
             </Input>
           </CssGrid>
-        </fieldset>
-
-        <fieldset class="editor-section">
-          <div class="editor-section-header editor-section-header-with-button">
-            <div class="st-typography-medium">Vertical Guides</div>
-            <div>
-              {#if verticalGuides.length}
-                <button
-                  on:click|stopPropagation={handleRemoveAllVerticalGuidesClick}
-                  use:tooltip={{ content: 'Delete All Vertical Guides', placement: 'top' }}
-                  class="st-button icon"
-                >
-                  <RemoveAllIcon />
-                </button>
-              {/if}
-              <button
-                on:click={handleNewVerticalGuideClick}
-                use:tooltip={{ content: 'New Vertical Guide', placement: 'top' }}
-                class="st-button icon"
-              >
-                <PlusIcon />
-              </button>
-            </div>
-          </div>
+        </EditorSection>
+
+        <EditorSection
+          creatable
+          item="Vertical Guide"
+          itemCount={verticalGuides.length}
+          on:create={handleNewVerticalGuideClick}
+          on:removeAll={handleRemoveAllVerticalGuidesClick}
+        >
           {#if verticalGuides.length}
             <div class="editor-section-labeled-grid-container">
               <CssGrid columns="1fr 168px 24px 24px" gap="8px" class="editor-section-grid">
@@ -624,7 +593,7 @@
                         use:tooltip={{ content: 'Delete Guide', placement: 'top' }}
                         class="st-button icon"
                       >
-                        <TrashIcon />
+                        <CloseIcon />
                       </button>
                     </CssGrid>
                   </div>
@@ -632,30 +601,16 @@
               </div>
             </div>
           {/if}
-        </fieldset>
-
-        <fieldset class="editor-section editor-section-draggable">
-          <div class="editor-section-header editor-section-header-with-button">
-            <div class="st-typography-medium">Rows</div>
-            <div>
-              {#if rows.length}
-                <button
-                  on:click|stopPropagation={removeAllTimelineRows}
-                  use:tooltip={{ content: 'Delete All Rows', placement: 'top' }}
-                  class="st-button icon"
-                >
-                  <RemoveAllIcon />
-                </button>
-              {/if}
-              <button
-                on:click={addTimelineRow}
-                use:tooltip={{ content: 'New Row', placement: 'top' }}
-                class="st-button icon"
-              >
-                <PlusIcon />
-              </button>
-            </div>
-          </div>
+        </EditorSection>
+
+        <EditorSection
+          creatable
+          item="Row"
+          isDragContainer
+          itemCount={rows.length}
+          on:create={addTimelineRow}
+          on:removeAll={removeAllTimelineRows}
+        >
           {#if rows.length}
             <div
               class="timeline-rows timeline-elements"
@@ -704,7 +659,7 @@
                           effects.deleteTimelineRow(row, rows, $selectedTimelineId);
                         }}
                       >
-                        <TrashIcon />
+                        <CloseIcon />
                       </button>
                     </div>
                   </div>
@@ -714,7 +669,7 @@
           {:else}
             <div />
           {/if}
-        </fieldset>
+        </EditorSection>
       {/if}
     {:else}
       <!-- Row editing -->
@@ -745,8 +700,7 @@
           {/each}
         </select>
       </div>
-      <fieldset class="editor-section">
-        <div class="st-typography-medium editor-section-header">Details</div>
+      <EditorSection item="Detail">
         <div style="display: grid">
           <Input>
             <label for="name">Row Name</label>
@@ -792,31 +746,16 @@
             </select>
           </Input>
         </CssGrid>
-      </fieldset>
+      </EditorSection>
 
       {#if rowHasNonActivityChartLayer}
-        <fieldset class="editor-section">
-          <div class="editor-section-header editor-section-header-with-button">
-            <div class="st-typography-medium">Horizontal Guides</div>
-            <div>
-              {#if horizontalGuides.length}
-                <button
-                  on:click|stopPropagation={handleRemoveAllHorizontalGuidesClick}
-                  use:tooltip={{ content: 'Delete All Horizontal Guides', placement: 'top' }}
-                  class="st-button icon"
-                >
-                  <RemoveAllIcon />
-                </button>
-              {/if}
-              <button
-                on:click={handleNewHorizontalGuideClick}
-                use:tooltip={{ content: 'New Horizontal Guide', placement: 'top' }}
-                class="st-button icon"
-              >
-                <PlusIcon />
-              </button>
-            </div>
-          </div>
+        <EditorSection
+          creatable
+          item="Horizontal Guide"
+          itemCount={horizontalGuides.length}
+          on:create={handleNewHorizontalGuideClick}
+          on:removeAll={handleRemoveAllHorizontalGuidesClick}
+        >
           {#if horizontalGuides.length}
             <div class="editor-section-labeled-grid-container">
               <CssGrid columns="1fr 1fr 1fr 24px 24px" gap="8px" class="editor-section-grid">
@@ -876,7 +815,7 @@
                         use:tooltip={{ content: 'Delete Guide', placement: 'top' }}
                         class="st-button icon"
                       >
-                        <TrashIcon />
+                        <CloseIcon />
                       </button>
                     </CssGrid>
                   </div>
@@ -884,13 +823,14 @@
               </div>
             </div>
           {/if}
-        </fieldset>
+        </EditorSection>
       {/if}
       {#if rowHasActivityLayer || rowHasExternalEventLayer}
-        <fieldset class="editor-section">
-          <div class="editor-section-header">
-            <div class="st-typography-medium">Layer Options</div>
-          </div>
+        <EditorSection
+          item="Layer Option"
+          on:create={handleNewHorizontalGuideClick}
+          on:removeAll={handleRemoveAllHorizontalGuidesClick}
+        >
           <form on:submit={event => event.preventDefault()} style="flex: 1">
             <Input layout="inline" class="editor-input">
               <label for="text">Height</label>
@@ -1068,32 +1008,20 @@
               </RadioButtons>
             </Input>
           {/if}
-        </fieldset>
+        </EditorSection>
       {/if}
       <!-- TODO perhaps separate out each section into a mini editor? -->
+
       {#if yAxes.length > 0 || rowHasNonActivityChartLayer}
-        <fieldset class="editor-section editor-section-draggable">
-          <div class="editor-section-header editor-section-header-with-button">
-            <div class="st-typography-medium">Y Axes</div>
-            <div>
-              {#if yAxes.length}
-                <button
-                  on:click|stopPropagation={handleRemoveAllYAxesClick}
-                  use:tooltip={{ content: 'Delete All Y Axes', placement: 'top' }}
-                  class="st-button icon"
-                >
-                  <RemoveAllIcon />
-                </button>
-              {/if}
-              <button
-                on:click={handleNewYAxisClick}
-                use:tooltip={{ content: 'New Y Axis', placement: 'top' }}
-                class="st-button icon"
-              >
-                <PlusIcon />
-              </button>
-            </div>
-          </div>
+        <EditorSection
+          isDragContainer
+          creatable
+          item="Y Axis"
+          itemPlural="Y Axes"
+          itemCount={yAxes.length}
+          on:create={handleNewYAxisClick}
+          on:removeAll={handleRemoveAllYAxesClick}
+        >
           {#if yAxes.length}
             <div class="editor-section-labeled-grid-container">
               <CssGrid columns="1fr 56px 24px 24px" gap="8px" class="editor-section-grid-labels" padding="0px 16px">
@@ -1155,7 +1083,7 @@
                         use:tooltip={{ content: 'Delete Y Axis', placement: 'top' }}
                         class="st-button icon"
                       >
-                        <TrashIcon />
+                        <CloseIcon />
                       </button>
                     </CssGrid>
                   </div>
@@ -1165,57 +1093,92 @@
           {:else}
             <div />
           {/if}
-        </fieldset>
+        </EditorSection>
       {/if}
-      <fieldset class="editor-section editor-section-draggable">
-        <div class="editor-section-header editor-section-header-with-button">
-          <div class="st-typography-medium">Layers</div>
-          <div>
-            {#if layers.length}
-              <button
-                on:click|stopPropagation={handleRemoveAllLayersClick}
-                use:tooltip={{ content: 'Delete All Layers', placement: 'top' }}
-                class="st-button icon"
-              >
-                <RemoveAllIcon />
-              </button>
-            {/if}
-            <button
-              on:click={handleNewLayerClick}
-              use:tooltip={{ content: 'New Layer', placement: 'top' }}
-              class="st-button icon"
-            >
-              <PlusIcon />
-            </button>
+      <EditorSection
+        creatable
+        item="Activity Layer"
+        itemCount={activityLayers.length}
+        on:create={() => handleNewLayerClick('activity')}
+        on:removeAll={() => handleRemoveAllLayersClick('activity')}
+      >
+        {#if activityLayers.length}
+          <div class="timeline-layers timeline-elements">
+            {#each activityLayers as layer (layer.id)}
+              <TimelineLayerEditor
+                {yAxes}
+                {layer}
+                on:updateLayer={({ detail: { property, value } }) => handleUpdateLayerProperty(property, value, layer)}
+                on:colorChange={({ detail: { color } }) => handleUpdateLayerColor(color, layer)}
+                on:remove={() => handleDeleteLayerClick(layer)}
+                on:duplicate={() => handleDuplicateLayer(layer)}
+                on:filterChange={({ detail: { filter } }) =>
+                  handleUpdateLayerProperty('filter', { activity: filter }, layer)}
+              />
+            {/each}
           </div>
-        </div>
-        {#if layers.length}
-          <div class="editor-section-labeled-grid-container">
-            <CssGrid columns="1fr 0.75fr 24px 24px 24px" gap="8px" class="editor-section-grid" padding="0px 16px">
-              <div>Filter</div>
-              <div>Layer Type</div>
-            </CssGrid>
-            <!-- TODO bug when dragging something into a different draggable area -->
-            <div class="timeline-layers timeline-elements">
-              {#each layers as layer (layer.id)}
-                <TimelineEditorLayerSection
-                  on:handleUpdateLayerFilter={event => handleUpdateLayerFilter(event.detail.values, layer)}
-                  on:handleUpdateLayerProperty={event =>
-                    handleUpdateLayerProperty(event.detail.name, event.detail.value, layer)}
-                  on:handleUpdateLayerChartType={event => handleUpdateLayerChartType(event.detail.value, layer)}
-                  on:handleUpdateLayerColor={event => handleUpdateLayerColor(event.detail.value, layer)}
-                  on:handleUpdateLayerColorScheme={event => handleUpdateLayerColorScheme(event.detail.value, layer)}
-                  on:handleDeleteLayerClick={() => handleDeleteLayerClick(layer)}
-                  {layer}
-                  {yAxes}
-                />
-              {/each}
-            </div>
+        {/if}
+      </EditorSection>
+      <EditorSection
+        creatable
+        item="Resource Layer"
+        itemCount={resourceLayers.length}
+        on:create={() => handleNewLayerClick('line')}
+        on:removeAll={() => handleRemoveAllLayersClick('resource')}
+      >
+        {#if resourceLayers.length}
+          <!-- TODO bug when dragging something into a different draggable area -->
+          <div class="timeline-layers timeline-elements">
+            {#each resourceLayers as layer (layer.id)}
+              <TimelineLayerEditor
+                {layer}
+                {yAxes}
+                on:updateLayer={({ detail: { property, value } }) => handleUpdateLayerProperty(property, value, layer)}
+                on:updateChartType={({ detail: chartType }) => handleUpdateResourceLayerChartType(chartType, layer)}
+                on:colorChange={({ detail: { color } }) => handleUpdateLayerColor(color, layer)}
+                on:remove={() => handleDeleteLayerClick(layer)}
+                on:duplicate={() => handleDuplicateLayer(layer)}
+                on:filterChange={({ detail: { filter } }) =>
+                  handleUpdateLayerProperty('filter', { resource: filter }, layer)}
+              />
+              <!-- <TimelineEditorLayerSection
+                on:handleUpdateResourceLayerChartType={event => handleUpdateResourceLayerChartType(event.detail.value, layer)}
+                on:handleUpdateLayerFilter={event => handleUpdateLayerFilter(event.detail.values, layer)}
+                on:handleUpdateLayerProperty={event =>
+                  handleUpdateLayerProperty(event.detail.name, event.detail.value, layer)}
+                on:handleUpdateLayerColorScheme={event => handleUpdateLayerColorScheme(event.detail.value, layer)}
+                on:handleDeleteLayerClick={() => handleDeleteLayerClick(layer)}
+                {layer}
+                {yAxes}
+              /> -->
+            {/each}
           </div>
-        {:else}
-          <div />
         {/if}
-      </fieldset>
+      </EditorSection>
+      <EditorSection
+        creatable
+        item="Event Layer"
+        itemCount={externalEventLayers.length}
+        on:create={() => handleNewLayerClick('externalEvent')}
+        on:removeAll={() => handleRemoveAllLayersClick('externalEvent')}
+      >
+        {#if externalEventLayers.length}
+          <div class="timeline-layers timeline-elements">
+            {#each externalEventLayers as layer (layer.id)}
+              <TimelineLayerEditor
+                {layer}
+                on:updateLayer={({ detail: { property, value } }) => handleUpdateLayerProperty(property, value, layer)}
+                on:rename={({ detail: { name } }) => handleUpdateLayerProperty('name', name, layer)}
+                on:colorChange={({ detail: { color } }) => handleUpdateLayerColor(color, layer)}
+                on:remove={() => handleDeleteLayerClick(layer)}
+                on:duplicate={() => handleDuplicateLayer(layer)}
+                on:filterChange={({ detail: { filter } }) =>
+                  handleUpdateLayerProperty('filter', { externalEvent: filter }, layer)}
+              />
+            {/each}
+          </div>
+        {/if}
+      </EditorSection>
     {/if}
   </div>
 </Panel>
@@ -1240,24 +1203,6 @@
     padding: 16px 8px;
   }
 
-  .editor-section {
-    border-bottom: 1px solid var(--st-gray-20);
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    padding: 16px;
-  }
-
-  .editor-section-header {
-    user-select: none;
-  }
-
-  .editor-section-draggable .timeline-rows.timeline-elements {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .editor-section-header .st-button.icon,
   .timeline-row .st-button.icon,
   .guide .st-button.icon,
   .timeline-y-axis .st-button.icon,
@@ -1266,35 +1211,17 @@
     color: var(--st-gray-50);
   }
 
-  .editor-section-header-with-button {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .editor-section-draggable {
-    padding: 0;
-  }
-
-  .editor-section-draggable .editor-section-header {
-    padding: 16px 16px 0;
-  }
-
-  .editor-section-draggable .timeline-elements {
-    display: grid;
-    gap: 4px;
-  }
-
   .editor-section-labeled-grid-container {
     display: grid;
     gap: 8px;
   }
 
-  .editor-section-draggable .editor-section-labeled-grid-container {
+  .editor-section-labeled-grid-container {
     gap: 4px;
   }
 
-  .editor-section-draggable .timeline-elements {
+  .timeline-elements {
+    display: block;
     outline: none !important;
     overflow-x: hidden;
     overflow-y: auto;
@@ -1351,7 +1278,7 @@
     display: flex;
   }
 
-  .editor-section-draggable .timeline-element:hover .drag-icon,
+  .timeline-element:hover .drag-icon,
   :global(.timeline-element-dragging) .drag-icon {
     display: flex;
   }
diff --git a/src/components/ui/Association/DefinitionEditor.svelte b/src/components/ui/Association/DefinitionEditor.svelte
index 8f258efe55..10c3271cd9 100644
--- a/src/components/ui/Association/DefinitionEditor.svelte
+++ b/src/components/ui/Association/DefinitionEditor.svelte
@@ -60,8 +60,9 @@
     worker = eventWorker;
   }
 
-  function onSelectReferenceModel(event: CustomEvent<SelectedDropdownOptionValue>) {
-    const { detail: modelId } = event;
+  function onSelectReferenceModel(event: CustomEvent<SelectedDropdownOptionValue[]>) {
+    const { detail: values } = event;
+    const modelId = values[0];
     if (modelId === null) {
       dispatch('selectReferenceModel', modelId);
     } else {
@@ -77,11 +78,11 @@
       {#if !readOnly}
         <label for="models">Reference Model:</label>
         <SearchableDropdown
-          selectedOptionValue={referenceModelId}
+          selectedOptionValues={typeof referenceModelId === 'number' ? [referenceModelId] : []}
           placeholder="No Model"
           name="models"
           options={modelOptions}
-          on:selectOption={onSelectReferenceModel}
+          on:change={onSelectReferenceModel}
         />
       {/if}
     </div>
diff --git a/src/components/ui/CssGrid.svelte b/src/components/ui/CssGrid.svelte
index 94af87807d..3704412d03 100644
--- a/src/components/ui/CssGrid.svelte
+++ b/src/components/ui/CssGrid.svelte
@@ -1,15 +1,17 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import Split, { type SplitInstance } from 'split-grid';
+  import Split, { type MinSizes, type SplitInstance } from 'split-grid';
   import { createEventDispatcher, onMount, tick } from 'svelte';
 
   export { className as class };
   export let padding: string = '0';
   export let columns: string = 'none';
+  export let columnMinSizes: MinSizes | undefined = undefined;
   export let gap: string = '0';
   export let rows: string = 'none';
   export let minHeight: string = 'unset';
+  export let rowMinSizes: MinSizes | undefined = undefined;
 
   const dispatch = createEventDispatcher<{
     changeColumnSizes: string;
@@ -50,7 +52,7 @@
     if (split) {
       split.destroy();
     }
-    split = Split({ onDragEnd });
+    split = Split({ columnMinSizes, onDragEnd, rowMinSizes, snapOffset: 10 });
 
     if (div) {
       const columnGutters = div.querySelectorAll<HTMLDivElement>(':scope > .css-grid-gutter.column');
diff --git a/src/components/ui/EditableDropdown.svelte b/src/components/ui/EditableDropdown.svelte
index 33c8cd0ff7..fbb65b8015 100644
--- a/src/components/ui/EditableDropdown.svelte
+++ b/src/components/ui/EditableDropdown.svelte
@@ -32,13 +32,14 @@
   export let selectedOptionValue: SelectedDropdownOptionValue | undefined = undefined;
   export let showPlaceholderOption: boolean = true;
   export let searchPlaceholder: string = `Search ${upperFirst(optionLabel)}s`;
-  export let settingsIconTooltip: string = `Set ${upperFirst(optionLabel)}`;
-  export let settingsIconTooltipPlacement: string = 'top';
+  export let selectTooltip: string = `Set ${upperFirst(optionLabel)}`;
+  export let selectTooltipPlacement: string = 'top';
 
   const dispatch = createEventDispatcher<{
     deleteOption: DropdownOptionValue;
     saveNewOption: string;
     saveOption: DropdownOption;
+    selectOption: SelectedDropdownOptionValue;
   }>();
 
   let deletePermission: boolean = true;
@@ -132,6 +133,10 @@
     const { value } = getTarget(event);
     optionName = `${value}`;
   }
+
+  function onSelectOption(event: CustomEvent<SelectedDropdownOptionValue[]>) {
+    dispatch('selectOption', event.detail[0] ?? null);
+  }
 </script>
 
 <SearchableDropdown
@@ -142,12 +147,13 @@
   {placeholder}
   {planReadOnly}
   {searchPlaceholder}
-  {selectedOptionValue}
-  {settingsIconTooltip}
-  {settingsIconTooltipPlacement}
+  selectedOptionValues={selectedOptionValue !== undefined ? [selectedOptionValue] : []}
+  name={selectTooltip}
+  {selectTooltip}
+  {selectTooltipPlacement}
   {showPlaceholderOption}
   on:openMenu={onOpenMenu}
-  on:selectOption
+  on:change={onSelectOption}
 >
   <svelte:fragment slot="dropdown-header">
     <div class="dropdown-header">
@@ -215,8 +221,7 @@
   }
 
   .dropdown-header {
-    column-gap: 6px;
-    display: grid;
-    grid-template-columns: auto repeat(3, 16px);
+    display: flex;
+    flex: 1;
   }
 </style>
diff --git a/src/components/ui/ListItem.svelte b/src/components/ui/ListItem.svelte
index f746b72e19..23d2ce22ee 100644
--- a/src/components/ui/ListItem.svelte
+++ b/src/components/ui/ListItem.svelte
@@ -58,7 +58,7 @@
   }
 
   .list-item-content {
-    display: flex;
+    display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/components/ui/SearchableDropdown.svelte b/src/components/ui/SearchableDropdown.svelte
index a2fcf02841..12c3f6ad73 100644
--- a/src/components/ui/SearchableDropdown.svelte
+++ b/src/components/ui/SearchableDropdown.svelte
@@ -1,4 +1,4 @@
-<svelte:options accessors={true} immutable={true} />
+<svelte:options accessors={true} />
 
 <script lang="ts">
   // eslint-disable-next-line
@@ -8,18 +8,20 @@
     selectOption: CustomEvent<SelectedDropdownOptionValue>;
   }
 
+  import CheckIcon from '@nasa-jpl/stellar/icons/check.svg?component';
   import SearchIcon from '@nasa-jpl/stellar/icons/search.svg?component';
   import SettingsIcon from '@nasa-jpl/stellar/icons/settings.svg?component';
   import { SvelteComponent, createEventDispatcher, type ComponentEvents } from 'svelte';
   import { PlanStatusMessages } from '../../enums/planStatusMessages';
   import type { DropdownOption, DropdownOptions, SelectedDropdownOptionValue } from '../../types/dropdown';
-  import { getTarget } from '../../utilities/generic';
+  import { classNames, getTarget } from '../../utilities/generic';
   import { permissionHandler } from '../../utilities/permissionHandler';
   import { tooltip } from '../../utilities/tooltip';
   import Input from '../form/Input.svelte';
   import Menu from '../menus/Menu.svelte';
   import MenuHeader from '../menus/MenuHeader.svelte';
   import MenuItem from '../menus/MenuItem.svelte';
+  import RowVirtualizerFixed from '../RowVirtualizerFixed.svelte';
 
   interface PlaceholderOption extends Omit<DropdownOption, 'value'> {
     value: null;
@@ -27,6 +29,8 @@
   type DisplayOption = DropdownOption | PlaceholderOption;
   type DisplayOptions = DisplayOption[];
 
+  export let allowMultiple: boolean = false;
+  export let className: string = '';
   export let disabled: boolean = false;
   export let error: string | undefined = undefined;
   export let hasUpdatePermission: boolean = true;
@@ -37,39 +41,61 @@
   export let updatePermissionError: string = 'You do not have permission to update this';
   export let placeholder: string = '';
   export let planReadOnly: boolean = false;
-  export let selectedOptionValue: SelectedDropdownOptionValue | undefined = undefined;
+  export let selectedOptionLabel: string = '';
+  export let selectedOptionValues: SelectedDropdownOptionValue[] = [];
   export let showPlaceholderOption: boolean = true;
   export let searchPlaceholder: string = 'Search Items';
-  export let settingsIconTooltip: string = 'Set Selection';
-  export let settingsIconTooltipPlacement: string = 'top';
+  export let selectTooltip: string = '';
+  export let selectTooltipPlacement: string = 'top';
 
   export function hideMenu() {
-    if (presetMenu) {
+    if (menuRef) {
       dispatch('hideMenu');
-      presetMenu.hide();
+      menuRef.hide();
     }
   }
   export function openMenu() {
-    if (!disabled && hasUpdatePermission && presetMenu) {
+    if (!disabled && hasUpdatePermission && menuRef) {
       dispatch('openMenu');
-      presetMenu.show();
+      menuRef.show();
     }
   }
 
   const dispatch = createEventDispatcher<{
+    change: SelectedDropdownOptionValue[];
     hideMenu: void;
     openMenu: void;
-    selectOption: SelectedDropdownOptionValue;
   }>();
 
+  let filteredOptions: DisplayOptions = [];
   let displayedOptions: DisplayOptions = [];
-  let presetMenu: Menu | undefined;
+  let label: string = '';
+  let menuRef: Menu | undefined;
+  let menuOpen: boolean = false;
   let searchFilter: string = '';
-  let selectedOption: DropdownOption | undefined;
+  let selectedOptions: DropdownOptions = [];
+  let maxWidth: number = 0;
 
-  $: selectedOption = options.find(option => option.value === selectedOptionValue);
   $: {
-    displayedOptions = !searchFilter
+    selectedOptions = [];
+    let maxOptionChars = 0;
+    options.forEach(option => {
+      if (selectedOptionValues.find(value => value === option.value)) {
+        selectedOptions.push(option);
+      }
+      const optionCharacterLength = option.display.toString().length;
+      maxOptionChars = Math.max(maxOptionChars, optionCharacterLength);
+    });
+    // avg char length + 48 padding for the rest of the menu
+    maxWidth = Math.max(50, maxOptionChars * 8 + 48);
+  }
+
+  $: selectedOptions = options.filter(option => {
+    return !!selectedOptionValues.find(value => value === option.value);
+  });
+
+  $: {
+    filteredOptions = !searchFilter
       ? [
           ...(showPlaceholderOption && placeholder
             ? [
@@ -85,83 +111,131 @@
           return new RegExp(searchFilter, 'i').test(option.display);
         });
     if (maxItems !== undefined) {
-      displayedOptions = displayedOptions.slice(0, maxItems);
+      displayedOptions = filteredOptions.slice(0, maxItems);
+    } else {
+      displayedOptions = filteredOptions;
     }
   }
   $: if (disabled) {
     hideMenu();
   }
+  $: rootClasses = classNames('searchable-dropdown-container', {
+    [className]: !!className,
+  });
+
+  $: {
+    if (selectedOptions.length < 1) {
+      label = placeholder;
+    } else if (selectedOptionLabel) {
+      label = selectedOptionLabel;
+    } else if (selectedOptions.length === 1) {
+      label = selectedOptions[0].display;
+    } else {
+      label = selectedOptions.map(selectedOption => selectedOption.display).join(', ');
+    }
+  }
 
   function onCloseMenu() {
     searchFilter = '';
+    menuOpen = false;
   }
 
   function onSearchPresets(event: Event) {
     const { value } = getTarget(event);
-
     searchFilter = `${value}`;
   }
-  function onSelectOption(option: DisplayOption, event: MouseEvent) {
+
+  function onSelectOption(option: DisplayOption, event: MouseEvent | KeyboardEvent) {
     event.stopPropagation();
     if (!disabled) {
-      dispatch('selectOption', option.value as SelectedDropdownOptionValue);
+      let newValues = [];
+      if (allowMultiple) {
+        const isSelected = selectedOptionValues.find(value => value === option.value);
+        if (isSelected) {
+          newValues = selectedOptionValues.filter(value => value !== option.value);
+        } else {
+          newValues = [...selectedOptionValues, option.value];
+        }
+      } else {
+        newValues = [option.value];
+      }
+      dispatch('change', newValues);
+    }
+    if (!allowMultiple) {
+      hideMenu();
     }
-    hideMenu();
   }
 </script>
 
-<div class="searchable-dropdown-container">
+<div class={rootClasses}>
   <!-- svelte-ignore a11y-click-events-have-key-events a11y-interactive-supports-focus -->
   <div
-    class="selected-display st-input w-100"
+    class="selected-display st-select w-100"
     class:error
     class:disabled
     {name}
     on:click|stopPropagation={openMenu}
-    role="textbox"
-    aria-label={selectedOption?.display ?? placeholder}
+    role="combobox"
+    aria-controls="menu"
+    aria-expanded={menuOpen}
+    aria-label={label}
     use:permissionHandler={{
       hasPermission: hasUpdatePermission && !planReadOnly,
       permissionError: planReadOnly ? PlanStatusMessages.READ_ONLY : updatePermissionError,
     }}
-    use:tooltip={{ content: error, placement: 'top' }}
+    use:tooltip={{ content: error || selectTooltip, placement: selectTooltipPlacement }}
   >
-    <span class="selected-display-value" class:error>{selectedOption?.display ?? placeholder}</span>
-    <button
-      use:tooltip={{
-        content: settingsIconTooltip,
-        disabled: !hasUpdatePermission && planReadOnly,
-        placement: settingsIconTooltipPlacement,
-      }}
-      class="icon st-button settings-icon"
-      on:click|stopPropagation={openMenu}
-    >
-      <SettingsIcon />
+    <span class="selected-display-value" class:error>{label}</span>
+    <button class="icon st-button icon-right" on:click|stopPropagation={openMenu}>
+      {#if $$slots.icon}
+        <slot name="icon" />
+      {:else}
+        <SettingsIcon />
+      {/if}
     </button>
   </div>
-  <Menu bind:this={presetMenu} hideAfterClick={false} placement="bottom-end" type="input" on:hide={onCloseMenu}>
-    {#if $$slots['dropdown-header']}
-      <MenuHeader>
-        <slot name="dropdown-header" />
-      </MenuHeader>
-    {/if}
-    <div class="dropdown-items-container">
-      <div class="dropdown-search">
-        <Input>
-          <div class="search-icon" slot="left"><SearchIcon /></div>
-          <input
-            class="st-input w-100"
-            placeholder={searchPlaceholder}
-            value={searchFilter}
-            on:input={onSearchPresets}
-          />
-        </Input>
-      </div>
-      <div class="dropdown-items" style={`max-height:${maxListHeight}`}>
-        {#each displayedOptions as displayedOption}
+  <div id="menu">
+    <Menu
+      bind:this={menuRef}
+      hideAfterClick={false}
+      placement="bottom-end"
+      type="input"
+      on:hide={onCloseMenu}
+      on:show={() => (menuOpen = true)}
+    >
+      {#if $$slots['dropdown-header']}
+        <MenuHeader>
+          <slot name="dropdown-header" />
+        </MenuHeader>
+      {/if}
+      <div class="dropdown-items-container">
+        <div class="dropdown-search">
+          <Input>
+            <div class="search-icon" slot="left"><SearchIcon /></div>
+            <input
+              class="st-input w-100"
+              placeholder={searchPlaceholder}
+              value={searchFilter}
+              on:input={onSearchPresets}
+            />
+          </Input>
+        </div>
+        <RowVirtualizerFixed
+          count={displayedOptions.length}
+          overscan={100}
+          maxHeight={maxListHeight}
+          minWidth="{maxWidth}px"
+          selectedIndex={selectedOptions.length
+            ? displayedOptions.findIndex(o => o.value === selectedOptions[0].value)
+            : undefined}
+          let:index
+        >
+          {@const displayedOption = displayedOptions[index]}
+          {@const selected =
+            !!selectedOptions.find(o => o.value === displayedOption.value) ||
+            (!!showPlaceholderOption && selectedOptions.length === 0 && index === 0)}
           <MenuItem
-            selected={(selectedOption?.value ?? null) === displayedOption.value}
-            disabled={(selectedOption?.value ?? null) === displayedOption.value}
+            {selected}
             use={[
               [
                 permissionHandler,
@@ -171,16 +245,30 @@
                 },
               ],
             ]}
-            on:click={event => {
-              onSelectOption(displayedOption, event.detail);
-            }}
+            on:click={event => onSelectOption(displayedOption, event.detail)}
           >
-            <span class="st-typography-body">{displayedOption.display}</span>
+            <div class="dropdown-item">
+              <div class="dropdown-item-icon">
+                {#if selected}
+                  <CheckIcon />
+                {/if}
+              </div>
+
+              <span class="dropdown-item-text st-typography-body">{displayedOption.display}</span>
+            </div>
+          </MenuItem>
+        </RowVirtualizerFixed>
+        {#if displayedOptions.length < 1}
+          <MenuItem selectable={false}>
+            <div class="dropdown-item">
+              <div class="dropdown-item-icon" />
+              <span class="dropdown-item-text st-typography-label">No results found</span>
+            </div>
           </MenuItem>
-        {/each}
+        {/if}
       </div>
-    </div>
-  </Menu>
+    </Menu>
+  </div>
 </div>
 
 <style>
@@ -192,23 +280,25 @@
   }
 
   .selected-display {
+    align-items: center;
     color: inherit;
     column-gap: 6px;
     display: grid;
     grid-template-columns: auto 16px;
+    padding: 0px 4px;
     position: relative;
   }
 
-  .st-input {
+  .dropdown-search :global(.st-input) {
     background-color: var(--aerie-dropdown-background-color, var(--st-white));
   }
 
-  .st-input.disabled {
+  .st-select.disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
 
-  .st-input.error {
+  .st-select.error {
     background-color: var(--st-input-error-background-color);
   }
 
@@ -224,7 +314,7 @@
     min-width: inherit;
   }
 
-  .settings-icon {
+  .icon-right {
     align-items: center;
     cursor: pointer;
     display: flex;
@@ -249,4 +339,22 @@
   .dropdown-items {
     overflow-y: auto;
   }
+
+  .dropdown-item {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    overflow: hidden;
+  }
+
+  .dropdown-item-icon {
+    display: flex;
+    flex-shrink: 0;
+    width: 24px;
+  }
+
+  .dropdown-item-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 </style>
diff --git a/src/components/ui/SearchableDropdown.svelte.test.ts b/src/components/ui/SearchableDropdown.svelte.test.ts
index eea58c71d7..2686a75f8f 100644
--- a/src/components/ui/SearchableDropdown.svelte.test.ts
+++ b/src/components/ui/SearchableDropdown.svelte.test.ts
@@ -1,11 +1,34 @@
 import { cleanup, fireEvent, render } from '@testing-library/svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import type { DropdownOptions } from '../../types/dropdown';
 import SearchableDropdown from './SearchableDropdown.svelte';
 
 vi.mock('$env/dynamic/public', () => import.meta.env); // https://github.com/sveltejs/kit/issues/8180
 
 describe('Searchable Dropdown component', () => {
+  // Store original function and restore after tests complete
+  const gbcr = window.Element.prototype.getBoundingClientRect;
+
+  beforeAll(() => {
+    // TODO should try to use spy here but typing was tricky, need help
+    window.Element.prototype.getBoundingClientRect = () => ({
+      bottom: 0,
+      height: 100,
+      left: 0,
+      right: 0,
+      toJSON: () => {},
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    });
+  });
+
+  afterAll(() => {
+    // Restore
+    window.Element.prototype.getBoundingClientRect = gbcr;
+  });
+
   const options: DropdownOptions = [
     {
       display: 'Option 1',
@@ -45,19 +68,46 @@ describe('Searchable Dropdown component', () => {
     const { getByText, queryByText } = render(SearchableDropdown, {
       options,
       placeholder: 'None',
-      selectedOptionValue: selectedOption.value,
+      selectedOptionValues: [selectedOption.value],
     });
 
     expect(queryByText(placeholderText)).toBeNull();
     expect(getByText(selectedOption.display)).toBeDefined();
   });
 
+  it('Should render the selected option label when provided and when an option is selected', () => {
+    const selectedOption = options[1];
+    const selectedOptionLabel = 'Alternative Label';
+    const placeholderText = 'None';
+    const { getByText, queryByText } = render(SearchableDropdown, {
+      options,
+      placeholder: 'None',
+      selectedOptionLabel,
+      selectedOptionValues: [selectedOption.value],
+    });
+
+    expect(queryByText(placeholderText)).toBeNull();
+    expect(getByText(selectedOptionLabel)).toBeDefined();
+  });
+
+  it('Should render the selected value text when multiple options are selected', () => {
+    const placeholderText = 'None';
+    const { getByText, queryByText } = render(SearchableDropdown, {
+      options,
+      placeholder: 'None',
+      selectedOptionValues: [options[0].value, options[1].value],
+    });
+
+    expect(queryByText(placeholderText)).toBeNull();
+    expect(getByText(`${options[0].display}, ${options[1].display}`)).toBeDefined();
+  });
+
   it('Should render the option items after clicking on the input', async () => {
     const selectedOption = options[0];
     const { getByText, getAllByRole } = render(SearchableDropdown, {
       options,
       placeholder: 'None',
-      selectedOptionValue: selectedOption.value,
+      selectedOptionValues: [selectedOption.value],
     });
 
     await fireEvent.click(getByText(selectedOption.display));
@@ -66,17 +116,17 @@ describe('Searchable Dropdown component', () => {
   });
 
   it('Should render the filtered options after searching in the search field', async () => {
-    const { getByText, getAllByRole, getByPlaceholderText } = render(SearchableDropdown, {
+    const { getByLabelText, getAllByRole, findAllByRole, getByPlaceholderText } = render(SearchableDropdown, {
       options,
       placeholder: 'None',
       searchPlaceholder: 'Search options',
     });
 
-    await fireEvent.click(getByText('None'));
+    await fireEvent.click(getByLabelText('None'));
     await fireEvent.click(getByPlaceholderText('Search options'));
     await fireEvent.input(getByPlaceholderText('Search options'), { target: { value: '2' } });
 
-    expect(getAllByRole('menuitem')).toHaveLength(2);
+    expect(await findAllByRole('menuitem')).toHaveLength(2);
 
     await fireEvent.input(getByPlaceholderText('Search options'), { target: { value: '1' } });
 
diff --git a/src/components/ui/Tags/TagsInput.svelte b/src/components/ui/Tags/TagsInput.svelte
index fbc4604de0..d1d90b27d5 100644
--- a/src/components/ui/Tags/TagsInput.svelte
+++ b/src/components/ui/Tags/TagsInput.svelte
@@ -246,6 +246,7 @@
           {name}
           {disabled}
           placeholder={disabled ? '' : placeholder}
+          autocomplete="off"
           class="st-input"
           style:min-width={`${minWidth}px`}
           on:mouseup={openSuggestions}
diff --git a/src/constants/view.ts b/src/constants/view.ts
index 2a13c402e2..607a22c944 100644
--- a/src/constants/view.ts
+++ b/src/constants/view.ts
@@ -70,6 +70,6 @@ export const ViewXRangeLayerSchemePresets: Record<XRangeLayerColorScheme, readon
   schemeTableau10,
 };
 
-export const viewSchemaVersion = 1;
+export const viewSchemaVersion = 2;
 
 export const viewSchemaVersionName = `v${viewSchemaVersion}`;
diff --git a/src/css/app.css b/src/css/app.css
index 11e3221d45..415e40465a 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -83,3 +83,13 @@ fieldset {
 .st-input {
   margin: 0;
 }
+
+.st-menu {
+  background: #fff;
+  border: var(--st-border-popover);
+  border-radius: var(--st-border-radius-popover);
+  box-shadow: var(--st-shadow-popover);
+  outline: 0;
+  overflow: hidden;
+  z-index: 1000;
+}
diff --git a/src/enums/timeline.ts b/src/enums/timeline.ts
new file mode 100644
index 0000000000..6927542913
--- /dev/null
+++ b/src/enums/timeline.ts
@@ -0,0 +1,19 @@
+export enum ActivityLayerFilterField {
+  'Type' = 'Type',
+  'Name' = 'Name',
+  'Subsystem' = 'Subsystem',
+  'Tags' = 'Tags',
+  'Parameter' = 'Parameter',
+  'SchedulingGoalId' = 'Scheduling Goal Id',
+}
+
+export enum FilterOperator {
+  'equals' = 'equals',
+  'does_not_equal' = 'does not equal',
+  'includes' = 'includes',
+  'does_not_include' = 'does not include',
+  'is_greater_than' = 'is greater than',
+  'is_less_than' = 'is less than',
+  'is_within' = 'is within',
+  'is_not_within' = 'is not within',
+}
diff --git a/src/routes/plans/[id]/+page.svelte b/src/routes/plans/[id]/+page.svelte
index a012c53b16..08397cf3b8 100644
--- a/src/routes/plans/[id]/+page.svelte
+++ b/src/routes/plans/[id]/+page.svelte
@@ -37,6 +37,7 @@
   import { SearchParameters } from '../../../enums/searchParameters';
   import { Status } from '../../../enums/status';
   import {
+    activityArgumentDefaults,
     activityDirectiveValidationStatuses,
     resetActivityStores,
     selectActivity,
@@ -282,6 +283,7 @@
     });
 
     activityTypes.updateValue(() => data.initialActivityTypes);
+    activityArgumentDefaults.set(data.initialActivityArguments);
     planTags.updateValue(() => data.initialPlanTags);
   }
   $: if (data.initialPlanSnapshotId !== null) {
diff --git a/src/routes/plans/[id]/+page.ts b/src/routes/plans/[id]/+page.ts
index b10932aa63..75f4e4d796 100644
--- a/src/routes/plans/[id]/+page.ts
+++ b/src/routes/plans/[id]/+page.ts
@@ -43,9 +43,13 @@ export const load: PageLoad = async ({ parent, params, url }) => {
       }
 
       const initialActivityTypes = await effects.getActivityTypes(initialPlan.model_id, user);
-      const initialResourceTypes = await effects.getResourceTypes(initialPlan.model_id, user, 20);
-      const initialExternalEventTypes = await effects.getExternalEventTypes(planId, user);
-      const initialPlanTags = await effects.getPlanTags(initialPlan.id, user);
+      const [initialActivityArguments, initialResourceTypes, initialExternalEventTypes, initialPlanTags] =
+        await Promise.all([
+          await effects.getDefaultActivityArguments(initialPlan.model_id, initialActivityTypes, user),
+          await effects.getResourceTypes(initialPlan.model_id, user, 20),
+          await effects.getExternalEventTypes(planId, user),
+          await effects.getPlanTags(initialPlan.id, user),
+        ]);
       const initialView = await effects.getView(
         url.searchParams,
         user,
@@ -55,9 +59,11 @@ export const load: PageLoad = async ({ parent, params, url }) => {
         initialExternalEventTypes,
         initialPlan.model.view,
       );
+
       const initialPlanSnapshotId = getSearchParameterNumber(SearchParameters.SNAPSHOT_ID, url.searchParams);
 
       return {
+        initialActivityArguments,
         initialActivityTypes,
         initialPlan,
         initialPlanSnapshotId,
diff --git a/src/schemas/index.ts b/src/schemas/index.ts
index 915187e594..9b27b1e30a 100644
--- a/src/schemas/index.ts
+++ b/src/schemas/index.ts
@@ -1,7 +1,9 @@
 import * as v0 from './ui-view-schema-v0.json';
 import * as v1 from './ui-view-schema-v1.json';
+import * as v2 from './ui-view-schema-v2.json';
 
 export default {
   v0,
   v1,
+  v2,
 };
diff --git a/src/schemas/ui-view-schema-v2.json b/src/schemas/ui-view-schema-v2.json
new file mode 100644
index 0000000000..d7e458704d
--- /dev/null
+++ b/src/schemas/ui-view-schema-v2.json
@@ -0,0 +1,670 @@
+{
+  "$id": "https://github.com/NASA-AMMOS/aerie-ui/blob/develop/src/schemas/ui-view-schema-v1.json",
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "additionalProperties": false,
+  "definitions": {
+    "color": {
+      "description": "RGB color in hex format",
+      "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
+      "type": "string"
+    },
+    "activityLayerDynamicFilter": {
+      "additionalProperties": false,
+      "properties": {
+        "field": {
+          "description": "Type of the filter (Type, Tag, etc)",
+          "type": "string"
+        },
+        "id": {
+          "$ref": "#/definitions/id"
+        },
+        "operator": {
+          "oneOf": [
+            { "const": "equals" },
+            { "const": "does_not_equal" },
+            { "const": "includes" },
+            { "const": "does_not_include" },
+            { "const": "is_greater_than" },
+            { "const": "is_less_than" },
+            { "const": "is_within" },
+            { "const": "is_not_within" }
+          ]
+        },
+        "subfield": {
+          "additionalProperties": false,
+          "description": "Array of activity types to display in this layer",
+          "properties": {
+            "name": { "description": "Subfield name", "type": "string" },
+            "type": {
+              "oneOf": [
+                { "const": "string" },
+                { "const": "boolean" },
+                { "const": "duration" },
+                { "const": "int" },
+                { "const": "path" },
+                { "const": "real" },
+                { "const": "series" },
+                { "const": "struct" },
+                { "const": "variant" },
+                { "const": "tag" }
+              ]
+            }
+          },
+          "type": "object"
+        },
+        "value": {
+          "description": "Value of the filter",
+          "type": ["string", "integer", "array", "boolean"]
+        }
+      },
+      "required": ["field", "id", "operator", "value"]
+    },
+    "filterActivity": {
+      "additionalProperties": false,
+      "properties": {
+        "activity": {
+          "additionalProperties": false,
+          "properties": {
+            "static_types": {
+              "description": "Array of activity types to display in this layer",
+              "items": {
+                "type": "string"
+              },
+              "type": "array"
+            },
+            "dynamic_type_filters": {
+              "description": "Array of filters with which to dynamically select activity types for display in this layer",
+              "items": {
+                "$ref": "#/definitions/activityLayerDynamicFilter"
+              },
+              "type": "array"
+            },
+            "other_filters": {
+              "description": "Array of filters with which to globally filter activities for display in this layer",
+              "items": {
+                "$ref": "#/definitions/activityLayerDynamicFilter"
+              },
+              "type": "array"
+            },
+            "type_subfilters": {
+              "description": "Map of types, each with an array of filters with which to subfilter activities of that type for display in this layer",
+              "additionalProperties": {
+                "$ref": "#/definitions/activityLayerDynamicFilter"
+              },
+              "type": "object"
+            }
+          },
+          "type": "object"
+        }
+      },
+      "type": "object"
+    },
+    "filterResource": {
+      "additionalProperties": false,
+      "properties": {
+        "resource": {
+          "additionalProperties": false,
+          "description": "Resource to display in this layer",
+          "type": "string"
+        }
+      },
+      "type": "object"
+    },
+    "id": {
+      "description": "Numeric unique id >= 0",
+      "minimum": 0,
+      "type": "number"
+    },
+    "label": {
+      "additionalProperties": false,
+      "description": "Generic label object",
+      "properties": {
+        "color": {
+          "$ref": "#/definitions/color"
+        },
+        "text": {
+          "description": "Label text content",
+          "type": "string"
+        }
+      },
+      "required": ["text"],
+      "type": "object"
+    },
+    "table": {
+      "additionalProperties": false,
+      "description": "Table specification for visualizing tabular data via ag-grid",
+      "properties": {
+        "autoSizeColumns": {
+          "default": "fill",
+          "description": "The state of which the table should resize automatically",
+          "type": "string"
+        },
+        "columnDefs": {
+          "description": "Array of column definition objects that conform to the ag-grid ColumnDef type",
+          "items": {
+            "type": "object"
+          },
+          "type": "array"
+        },
+        "columnStates": {
+          "description": "Array of column state objects that conform to the ag-grid ColumnState type",
+          "items": {
+            "type": "object"
+          },
+          "type": "array"
+        }
+      },
+      "required": ["columnDefs", "columnStates"],
+      "type": "object"
+    },
+    "viewGridComponent": {
+      "description": "Set of components available to view in a grid section",
+      "enum": [
+        "ActivityDirectivesTablePanel",
+        "ActivityFormPanel",
+        "ActivitySpansTablePanel",
+        "TimelineItemsPanel",
+        "ConstraintsPanel",
+        "ExpansionPanel",
+        "IFramePanel",
+        "PlanMetadataPanel",
+        "SchedulingConditionsPanel",
+        "SchedulingGoalsPanel",
+        "SimulationEventsPanel",
+        "SimulationPanel",
+        "TimelineEditorPanel"
+      ]
+    },
+    "yAxisId": {
+      "description": "Id of the associated y-axis. Can be null for no association.",
+      "type": ["number", "null"]
+    }
+  },
+  "description": "JSON schema definition used for configuring the Aerie UI",
+  "properties": {
+    "version": { "type": "number" },
+    "plan": {
+      "additionalProperties": false,
+      "description": "View configuration for a plan",
+      "properties": {
+        "activityDirectivesTable": {
+          "$ref": "#/definitions/table"
+        },
+        "activitySpansTable": {
+          "$ref": "#/definitions/table"
+        },
+        "simulationEventsTable": {
+          "$ref": "#/definitions/table"
+        },
+        "grid": {
+          "additionalProperties": false,
+          "description": "Defines the different visible sections for a plan",
+          "properties": {
+            "columnSizes": {
+              "description": "Size of each column and gutter using CSS grid notation",
+              "type": "string"
+            },
+            "leftComponentBottom": {
+              "$ref": "#/definitions/viewGridComponent"
+            },
+            "leftComponentTop": {
+              "$ref": "#/definitions/viewGridComponent"
+            },
+            "leftHidden": {
+              "description": "If true hide the left panel, if false show the left panel",
+              "type": "boolean"
+            },
+            "leftRowSizes": {
+              "description": "Size of each left row and gutter using CSS grid notation",
+              "type": "string"
+            },
+            "leftSplit": {
+              "description": "If true the left panel is split into two, if false show single left panel",
+              "type": "boolean"
+            },
+            "middleComponentBottom": {
+              "$ref": "#/definitions/viewGridComponent"
+            },
+            "middleRowSizes": {
+              "description": "Size of each middle row and gutter using CSS grid notation",
+              "type": "string"
+            },
+            "middleSplit": {
+              "description": "If true the middle panel is split into two, if false show single middle panel",
+              "type": "boolean"
+            },
+            "rightComponentBottom": {
+              "$ref": "#/definitions/viewGridComponent"
+            },
+            "rightComponentTop": {
+              "$ref": "#/definitions/viewGridComponent"
+            },
+            "rightHidden": {
+              "description": "If true hide the right panel, if false show the right panel",
+              "type": "boolean"
+            },
+            "rightRowSizes": {
+              "description": "Size of each right row and gutter using CSS grid notation",
+              "type": "string"
+            },
+            "rightSplit": {
+              "description": "If true the right panel is split into two, if false show single right panel",
+              "type": "boolean"
+            }
+          },
+          "required": [
+            "columnSizes",
+            "leftComponentBottom",
+            "leftComponentTop",
+            "leftHidden",
+            "leftRowSizes",
+            "leftSplit",
+            "middleComponentBottom",
+            "middleRowSizes",
+            "middleSplit",
+            "rightComponentBottom",
+            "rightComponentTop",
+            "rightHidden",
+            "rightRowSizes",
+            "rightSplit"
+          ],
+          "type": "object"
+        },
+        "iFrames": {
+          "description": "IFrame specifications for embedding other web pages",
+          "items": {
+            "additionalProperties": false,
+            "properties": {
+              "id": {
+                "$ref": "#/definitions/id"
+              },
+              "src": {
+                "description": "The URL of the page to embed",
+                "type": "string"
+              },
+              "title": {
+                "description": "The title attribute of the iframe",
+                "type": "string"
+              }
+            },
+            "required": ["id", "src", "title"],
+            "type": "object"
+          },
+          "type": "array"
+        },
+        "timelines": {
+          "description": "Timeline specifications for visualizing activities or resources in a timeline",
+          "items": {
+            "additionalProperties": false,
+            "description": "Displays a timeline in the section",
+            "properties": {
+              "id": {
+                "$ref": "#/definitions/id"
+              },
+              "marginLeft": {
+                "description": "Left margin of the timeline in pixels",
+                "minimum": 0,
+                "type": "number"
+              },
+              "marginRight": {
+                "description": "Right margin of the timeline in pixels",
+                "minimum": 0,
+                "type": "number"
+              },
+              "rows": {
+                "description": "Timeline row definitions",
+                "items": {
+                  "additionalProperties": false,
+                  "properties": {
+                    "autoAdjustHeight": {
+                      "description": "If true the row height is set automatically to fit the row content",
+                      "type": "boolean"
+                    },
+                    "expanded": {
+                      "description": "Expanded state of the timeline row",
+                      "type": "boolean"
+                    },
+                    "discreteOptions": {
+                      "additionalProperties": false,
+                      "description": "Defines the options used for rendering external events on the timeline",
+                      "properties": {
+                        "activityOptions": {
+                          "description": "Options for activity layers in the row",
+                          "properties": {
+                            "composition": {
+                              "description": "Whether or not to display only directives, only spans, or both in the row",
+                              "enum": ["directives", "spans", "both"]
+                            },
+                            "hierarchyMode": {
+                              "description": "If 'directive' the activities are grouped starting with directive types, if 'flat' activities are grouped by type regardless of hierarchy",
+                              "enum": ["directive", "flat"]
+                            }
+                          },
+                          "type": "object"
+                        },
+                        "displayMode": {
+                          "description": "Describes the display mode to use for rendering external events",
+                          "enum": ["compact", "grouped"]
+                        },
+                        "externalEventOptions": {
+                          "description": "Options for external event layers in the row",
+                          "properties": {
+                            "groupBy": {
+                              "description": "Determines whether to group the external events by their event type, or their external source",
+                              "enum": ["event_type_name", "source_key"]
+                            }
+                          },
+                          "type": "object"
+                        },
+                        "height": {
+                          "description": "Height of timeline rows",
+                          "type": "number",
+                          "minimum": 16
+                        },
+                        "labelVisibility": {
+                          "description": "External event text label behavior",
+                          "enum": ["on", "off", "auto"]
+                        }
+                      },
+                      "type": "object"
+                    },
+                    "height": {
+                      "description": "Height of the row in pixels",
+                      "minimum": 0,
+                      "type": "number"
+                    },
+                    "horizontalGuides": {
+                      "description": "Row horizontal guide definitions",
+                      "items": {
+                        "additionalProperties": false,
+                        "properties": {
+                          "id": {
+                            "$ref": "#/definitions/id"
+                          },
+                          "label": {
+                            "$ref": "#/definitions/label"
+                          },
+                          "y": {
+                            "description": "Y value the horizontal guide anchors to",
+                            "type": "number"
+                          },
+                          "yAxisId": {
+                            "$ref": "#/definitions/id"
+                          }
+                        },
+                        "required": ["id", "label", "y", "yAxisId"],
+                        "type": "object"
+                      },
+                      "type": "array"
+                    },
+                    "id": {
+                      "$ref": "#/definitions/id"
+                    },
+                    "layers": {
+                      "description": "Row layer definitions",
+                      "items": {
+                        "oneOf": [
+                          {
+                            "additionalProperties": false,
+                            "description": "Activity layer",
+                            "properties": {
+                              "activityColor": {
+                                "$ref": "#/definitions/color"
+                              },
+                              "chartType": {
+                                "const": "activity",
+                                "description": "Layer that visualizes activities"
+                              },
+                              "filter": {
+                                "$ref": "#/definitions/filterActivity"
+                              },
+                              "id": {
+                                "$ref": "#/definitions/id"
+                              },
+                              "name": {
+                                "description": "Name of the layer",
+                                "type": "string"
+                              },
+                              "yAxisId": {
+                                "$ref": "#/definitions/yAxisId"
+                              }
+                            },
+                            "required": ["activityColor", "chartType", "filter", "id", "yAxisId"],
+                            "type": "object"
+                          },
+                          {
+                            "additionalProperties": false,
+                            "description": "Line layer",
+                            "properties": {
+                              "chartType": {
+                                "const": "line",
+                                "description": "Layer that visualizes points and a line"
+                              },
+                              "filter": {
+                                "$ref": "#/definitions/filterResource"
+                              },
+                              "id": {
+                                "$ref": "#/definitions/id"
+                              },
+                              "lineColor": {
+                                "$ref": "#/definitions/color"
+                              },
+                              "lineWidth": {
+                                "description": "Width of the line",
+                                "type": "number"
+                              },
+                              "name": {
+                                "description": "Name of the layer",
+                                "type": "string"
+                              },
+                              "pointRadius": {
+                                "description": "Radius of the points",
+                                "type": "number"
+                              },
+                              "yAxisId": {
+                                "$ref": "#/definitions/yAxisId"
+                              }
+                            },
+                            "required": [
+                              "chartType",
+                              "filter",
+                              "id",
+                              "lineColor",
+                              "lineWidth",
+                              "pointRadius",
+                              "yAxisId"
+                            ],
+                            "type": "object"
+                          },
+                          {
+                            "additionalProperties": false,
+                            "description": "X-range layer",
+                            "properties": {
+                              "chartType": {
+                                "const": "x-range",
+                                "description": "Layer that visualizes range data as full-height colored rectangles"
+                              },
+                              "colorScheme": {
+                                "description": "https://github.com/d3/d3-scale-chromatic/blob/main/README.md#api-reference",
+                                "enum": [
+                                  "schemeAccent",
+                                  "schemeCategory10",
+                                  "schemeDark2",
+                                  "schemePaired",
+                                  "schemePastel1",
+                                  "schemePastel2",
+                                  "schemeSet1",
+                                  "schemeSet2",
+                                  "schemeSet3",
+                                  "schemeTableau10"
+                                ],
+                                "type": "string"
+                              },
+                              "filter": {
+                                "$ref": "#/definitions/filterResource"
+                              },
+                              "id": {
+                                "$ref": "#/definitions/id"
+                              },
+                              "name": {
+                                "description": "Name of the layer",
+                                "type": "string"
+                              },
+                              "opacity": {
+                                "type": "number"
+                              },
+                              "showAsLinePlot": {
+                                "type": "boolean"
+                              },
+                              "yAxisId": {
+                                "$ref": "#/definitions/yAxisId"
+                              }
+                            },
+                            "required": ["chartType", "colorScheme", "filter", "id", "opacity", "yAxisId"],
+                            "type": "object"
+                          },
+                          {
+                            "additionalProperties": false,
+                            "description": "External event layer",
+                            "properties": {
+                              "externalEventColor": {
+                                "$ref": "#/definitions/color"
+                              },
+                              "chartType": {
+                                "const": "externalEvent",
+                                "description": "Layer that visualizes external events"
+                              },
+                              "filter": {
+                                "additionalProperties": false,
+                                "properties": {
+                                  "externalEvent": {
+                                    "additionalProperties": false,
+                                    "properties": {
+                                      "event_types": {
+                                        "description": "Array of external event types to display in this layer",
+                                        "items": {
+                                          "type": "string"
+                                        },
+                                        "type": "array"
+                                      }
+                                    },
+                                    "required": ["event_types"],
+                                    "type": "object"
+                                  }
+                                },
+                                "required": ["externalEvent"],
+                                "type": "object"
+                              },
+                              "id": {
+                                "$ref": "#/definitions/id"
+                              },
+                              "name": {
+                                "description": "Name of the layer",
+                                "type": "string"
+                              },
+                              "yAxisId": {
+                                "$ref": "#/definitions/yAxisId"
+                              }
+                            },
+                            "type": "object"
+                          }
+                        ]
+                      },
+                      "type": "array"
+                    },
+                    "name": {
+                      "description": "Name of the row",
+                      "type": "string"
+                    },
+                    "yAxes": {
+                      "description": "Row y-axes definitions",
+                      "items": {
+                        "additionalProperties": false,
+                        "properties": {
+                          "color": {
+                            "$ref": "#/definitions/color"
+                          },
+                          "domainFitMode": {
+                            "description": "Describes the domain fitting behavior for the axis",
+                            "enum": ["fitPlan", "fitTimeWindow", "manual"],
+                            "type": "string"
+                          },
+                          "id": {
+                            "$ref": "#/definitions/id"
+                          },
+                          "label": {
+                            "$ref": "#/definitions/label"
+                          },
+                          "renderTickLines": {
+                            "description": "If true render horizontal lines for each y axis tick, if false do not render them",
+                            "type": "boolean"
+                          },
+                          "scaleDomain": {
+                            "description": "Min and max values of the axis domain: [min, max], only used if domainFitMode is set to manual",
+                            "items": {
+                              "type": "number"
+                            },
+                            "type": "array"
+                          },
+                          "tickCount": {
+                            "description": "Number of ticks on the axis",
+                            "minimum": 0,
+                            "type": "number"
+                          }
+                        },
+                        "required": ["color", "id", "label", "tickCount"],
+                        "type": "object"
+                      },
+                      "type": "array"
+                    }
+                  },
+                  "required": [
+                    "autoAdjustHeight",
+                    "expanded",
+                    "height",
+                    "horizontalGuides",
+                    "id",
+                    "layers",
+                    "name",
+                    "yAxes"
+                  ],
+                  "type": "object"
+                },
+                "type": "array"
+              },
+              "verticalGuides": {
+                "description": "Timeline vertical guide definitions",
+                "items": {
+                  "additionalProperties": false,
+                  "properties": {
+                    "id": {
+                      "$ref": "#/definitions/id"
+                    },
+                    "label": {
+                      "$ref": "#/definitions/label"
+                    },
+                    "timestamp": {
+                      "description": "DOY timestamp (YYYY-DDDThh:mm:ss) of the vertical guide",
+                      "type": "string"
+                    }
+                  },
+                  "required": ["id", "label", "timestamp"],
+                  "type": "object"
+                },
+                "type": "array"
+              }
+            },
+            "required": ["id", "marginLeft", "marginRight", "rows", "verticalGuides"],
+            "type": "object"
+          },
+          "type": "array"
+        }
+      },
+      "required": ["activityDirectivesTable", "activitySpansTable", "grid", "iFrames", "timelines"],
+      "type": "object"
+    }
+  },
+  "required": ["plan", "version"],
+  "title": "View",
+  "type": "object"
+}
diff --git a/src/stores/activities.ts b/src/stores/activities.ts
index 33d7a94a35..b78fab27a4 100644
--- a/src/stores/activities.ts
+++ b/src/stores/activities.ts
@@ -1,4 +1,4 @@
-import { derived, writable, type Writable } from 'svelte/store';
+import { derived, writable, type Readable, type Writable } from 'svelte/store';
 import type {
   ActivityDirectiveDB,
   ActivityDirectiveId,
@@ -6,6 +6,7 @@ import type {
   AnchorValidationStatus,
 } from '../types/activity';
 import type { ActivityMetadataDefinition } from '../types/activity-metadata';
+import type { DefaultEffectiveArguments, DefaultEffectiveArgumentsMap } from '../types/parameter';
 import type { SpanId } from '../types/simulation';
 import { computeActivityDirectivesMap } from '../utilities/activities';
 import gql from '../utilities/gql';
@@ -49,7 +50,20 @@ export const activityDirectiveValidationStatuses = gqlSubscribable<ActivityDirec
 
 export const selectedActivityDirectiveId: Writable<ActivityDirectiveId | null> = writable(null);
 
+// TODO do we even need the list or should we transform it immediately into the map?
+export const activityArgumentDefaults: Writable<DefaultEffectiveArguments[] | null> = writable(null);
+
 /* Derived. */
+export const activityArgumentDefaultsMap: Readable<DefaultEffectiveArgumentsMap> = derived(
+  [activityArgumentDefaults],
+  ([$activityArgumentDefaults]) => {
+    const argsMap: DefaultEffectiveArgumentsMap = {};
+    return ($activityArgumentDefaults || []).reduce((map, { arguments: args, typeName }) => {
+      map[typeName] = args;
+      return map;
+    }, argsMap);
+  },
+);
 
 export const activityDirectivesMap = derived(
   [activityDirectivesDB, planSnapshotId, planSnapshotActivityDirectives, initialPlan, spansMap, spanUtilityMaps],
diff --git a/src/stores/plan.ts b/src/stores/plan.ts
index f4e5e2c38a..e6833a9389 100644
--- a/src/stores/plan.ts
+++ b/src/stores/plan.ts
@@ -58,6 +58,17 @@ export const modelId: Readable<number> = derived(plan, $plan => ($plan ? $plan.m
 
 export const activityTypes = gqlSubscribable<ActivityType[]>(gql.SUB_ACTIVITY_TYPES, { modelId }, [], null);
 
+export const subsystemTags: Readable<Tag[]> = derived(activityTypes, $activityTypes => {
+  const seenSubsystems: Record<number, boolean> = {};
+  return $activityTypes.reduce((subsystems: Tag[], activityType) => {
+    if (activityType.subsystem_tag && !seenSubsystems[activityType.subsystem_tag.id]) {
+      seenSubsystems[activityType.subsystem_tag.id] = true;
+      subsystems.push(activityType.subsystem_tag);
+    }
+    return subsystems;
+  }, []);
+});
+
 export const planTags = gqlSubscribable<Tag[]>(gql.SUB_PLAN_TAGS, { planId }, [], null, ({ tags }) =>
   tags.map((tag: { tag: Tag }) => tag.tag),
 );
diff --git a/src/stores/views.ts b/src/stores/views.ts
index 5012173739..621e3a9965 100644
--- a/src/stores/views.ts
+++ b/src/stores/views.ts
@@ -1,14 +1,15 @@
 import { capitalize, isEqual } from 'lodash-es';
 import { derived, get, writable, type Writable } from 'svelte/store';
+import type { ActivityLayerFilterField } from '../enums/timeline';
 import type { ResourceType } from '../types/simulation';
 import type {
+  ActivityLayerDynamicFilter,
   ActivityLayerFilter,
   Axis,
-  ExternalEventLayerFilter,
   Layer,
-  ResourceLayerFilter,
   Row,
   Timeline,
+  TimelineItemMetadata,
   TimelineItemType,
 } from '../types/timeline';
 import type { View, ViewGrid, ViewSlim, ViewTable, ViewToggleEvent } from '../types/view';
@@ -22,6 +23,7 @@ import {
   createTimelineExternalEventLayer,
   createTimelineLineLayer,
   createTimelineResourceLayer,
+  getNextThingID,
   getUniqueColorForActivityLayer,
   getUniqueColorForLineLayer,
   getUniqueColorSchemeForXRangeLayer,
@@ -562,10 +564,60 @@ export function viewUpdateYAxis(prop: string, value: any) {
   });
 }
 
+export function getUpdatedActivityLayerFilter(
+  items: TimelineItemType[],
+  metadata?: TimelineItemMetadata,
+  filter?: ActivityLayerFilter,
+): ActivityLayerFilter {
+  // Return updated activity layer filter
+  // Prefer metadata like Type and/or Subsystem filter over named types
+  const dynamicTypeFilters: ActivityLayerFilter['dynamic_type_filters'] = filter?.dynamic_type_filters || [];
+  let staticTypes: string[] = filter?.static_types || [];
+  const hasTextFilters = metadata?.textFilters && metadata?.textFilters.length;
+  const hasSelectedFilters = metadata?.selectedFilters && Object.keys(metadata?.selectedFilters).length;
+  if (hasTextFilters) {
+    (metadata.textFilters || []).forEach(textFilter => {
+      const typeFilter: ActivityLayerDynamicFilter<Pick<typeof ActivityLayerFilterField, 'Type' | 'Subsystem'>> = {
+        field: 'Type',
+        id: getNextThingID(dynamicTypeFilters),
+        operator: 'includes',
+        value: textFilter,
+      };
+      dynamicTypeFilters.push(typeFilter);
+    });
+  }
+  if (hasSelectedFilters) {
+    const subsystems = Object.values(metadata.selectedFilters || {}).map(
+      selectedFilter => selectedFilter.value,
+    ) as number[];
+    if (subsystems.length) {
+      const typeFilter: ActivityLayerDynamicFilter<Pick<typeof ActivityLayerFilterField, 'Type' | 'Subsystem'>> = {
+        field: 'Subsystem',
+        id: getNextThingID(dynamicTypeFilters),
+        operator: 'includes',
+        value: subsystems,
+      };
+      dynamicTypeFilters.push(typeFilter);
+    }
+  }
+  if (!hasTextFilters && !hasSelectedFilters && items.length) {
+    const newTypes = items.map(i => i.name);
+    const existingTypes = filter?.static_types || [];
+    staticTypes = Array.from(new Set([...newTypes, ...existingTypes]));
+  }
+
+  return {
+    ...(filter || {}),
+    dynamic_type_filters: dynamicTypeFilters,
+    static_types: staticTypes,
+  };
+}
+
 export function getUpdatedLayerWithFilters(
   timelines: Timeline[],
   type: string /* 'activity' | 'resource' | 'externalEvent' */,
   items: TimelineItemType[],
+  metadata?: TimelineItemMetadata,
   layer?: Layer,
   row?: Row,
 ): { layer: Layer; yAxis?: Axis } {
@@ -573,10 +625,11 @@ export function getUpdatedLayerWithFilters(
   // Create a suitable layer if not provided
   if (!layer) {
     if (type === 'activity') {
+      const updatedActivityFilter = getUpdatedActivityLayerFilter(items, metadata);
       return {
         layer: createTimelineActivityLayer(timelines, {
           activityColor: getUniqueColorForActivityLayer(row),
-          filter: { activity: { types: itemNames } },
+          filter: { activity: updatedActivityFilter },
         }),
       };
     } else if (type === 'externalEvent') {
@@ -589,7 +642,7 @@ export function getUpdatedLayerWithFilters(
       const { layer: newLayer, yAxis } = createTimelineResourceLayer(timelines, items[0] as ResourceType);
       if (newLayer && newLayer.filter.resource) {
         // Add remaining resources if requested (generally avoided since resource layers are usually created on separate layers)
-        newLayer.filter.resource.names = itemNames;
+        newLayer.filter.resource = itemNames.length ? itemNames[0] : '';
         if (isLineLayer(newLayer)) {
           newLayer.lineColor = getUniqueColorForLineLayer(row);
         } else if (isXRangeLayer(newLayer)) {
@@ -607,34 +660,20 @@ export function getUpdatedLayerWithFilters(
     }
   } else {
     // Otherwise augment the filter of the specified layer
-    let prop: string = '';
+    // Note that resources are skipped here since they cannot be added to existing layers
+    const updatedFilter = layer.filter;
     if (type === 'activity') {
-      prop = 'types';
+      updatedFilter.activity = getUpdatedActivityLayerFilter(items, metadata, layer.filter.activity);
     } else if (type === 'externalEvent') {
-      prop = 'event_types';
-    } else {
-      prop = 'names';
-    }
-    const typedType = type as 'activity' | 'resource' | 'externalEvent';
-    const existingFilter = layer.filter[typedType];
-    let existingFilterItems: string[] = [];
-
-    if (existingFilter && (existingFilter as ActivityLayerFilter).types) {
-      existingFilterItems = (existingFilter as ActivityLayerFilter).types;
-    } else if (existingFilter && (existingFilter as ResourceLayerFilter).names) {
-      existingFilterItems = (existingFilter as ResourceLayerFilter).names;
-    } else if (existingFilter && (existingFilter as ExternalEventLayerFilter).event_types) {
-      existingFilterItems = (existingFilter as ExternalEventLayerFilter).event_types;
+      updatedFilter.externalEvent = {
+        event_types: Array.from(new Set([...(updatedFilter.externalEvent?.event_types || []), ...itemNames])),
+      };
     }
 
     return {
       layer: {
         ...layer,
-        filter: {
-          [type]: {
-            [prop]: [...new Set(existingFilterItems.concat(itemNames))],
-          },
-        },
+        filter: updatedFilter,
       },
     };
   }
@@ -660,13 +699,14 @@ export function viewAddTimelineRow(timelineId?: number | null, openEditor: boole
 export function viewAddFilterToRow(
   items: TimelineItemType[],
   typeName: string /* 'activity' | 'resource' | 'externalEvent' */,
+  metadata?: TimelineItemMetadata,
   rowId?: number,
   layer?: Layer,
   index?: number, // row index to insert after
 ) {
   if (typeName === 'resource') {
-    // Add first to a new row
-    const row = viewAddFilterItemsToRow([items[0]], typeName, rowId, layer, index);
+    // Add first resource to the row
+    const row = viewAddFilterItemsToRow([items[0]], typeName, metadata, rowId, layer, index);
     if (row) {
       // TODO enforcing an arbitrary limit here to avoid a poor performance scenario
       // where a user hits "add to / new row" for all resources which would download
@@ -674,17 +714,18 @@ export function viewAddFilterToRow(
       // Furthermore, one cannot realistically or usefully plot all resources on individual layers
       // within the same row.
       items.slice(1, 50).forEach(item => {
-        viewAddFilterItemsToRow([item], typeName, row.id, layer, index);
+        viewAddFilterItemsToRow([item], typeName, metadata, row.id, layer, index);
       });
     }
   } else {
-    viewAddFilterItemsToRow(items, typeName, rowId, layer, index);
+    viewAddFilterItemsToRow(items, typeName, metadata, rowId, layer, index);
   }
 }
 
 export function viewAddFilterItemsToRow(
   items: TimelineItemType[],
   typeName: string /* 'activity' | 'resource' | 'externalEvent' */,
+  metadata?: TimelineItemMetadata,
   rowId?: number,
   layer?: Layer,
   index?: number, // row index to insert after
@@ -702,7 +743,7 @@ export function viewAddFilterItemsToRow(
   const targetRow = row || createRow(timelines, { name: items.length === 1 ? items[0].name : defaultRowName });
   if (!row) {
     // If no row is provided we assume there is no relevant layer
-    const { layer: newLayer, yAxis } = getUpdatedLayerWithFilters(timelines, typeName, items);
+    const { layer: newLayer, yAxis } = getUpdatedLayerWithFilters(timelines, typeName, items, metadata);
     const insertIndex = index ?? newRows.length;
     returnRow = { ...targetRow, layers: [newLayer], yAxes: yAxis ? [yAxis] : [] };
     newRows = [...newRows];
@@ -717,7 +758,14 @@ export function viewAddFilterItemsToRow(
       (layer.chartType !== 'externalEvent' && typeName === 'externalEvent')
     ) {
       // Add to existing row
-      const { layer: newLayer, yAxis } = getUpdatedLayerWithFilters(timelines, typeName, items, undefined, row);
+      const { layer: newLayer, yAxis } = getUpdatedLayerWithFilters(
+        timelines,
+        typeName,
+        items,
+        metadata,
+        undefined,
+        row,
+      );
       newRows = newRows.map(r => {
         if (r.id === row.id) {
           returnRow = { ...row, layers: [...row.layers, newLayer], yAxes: yAxis ? [...row.yAxes, yAxis] : row.yAxes };
@@ -733,7 +781,7 @@ export function viewAddFilterItemsToRow(
           returnRow = r;
           const newLayers = r.layers.map(l => {
             if (l.id === layer.id) {
-              return getUpdatedLayerWithFilters(timelines, typeName, items, layer, row).layer;
+              return getUpdatedLayerWithFilters(timelines, typeName, items, metadata, layer, row).layer;
             }
             return l;
           });
diff --git a/src/tests/mocks/view/v2/view.json b/src/tests/mocks/view/v2/view.json
new file mode 100644
index 0000000000..fc199eb833
--- /dev/null
+++ b/src/tests/mocks/view/v2/view.json
@@ -0,0 +1,926 @@
+{
+  "plan": {
+    "grid": {
+      "leftSplit": false,
+      "leftHidden": false,
+      "rightSplit": false,
+      "columnSizes": "1fr 3px 3fr 3px 1fr",
+      "middleSplit": true,
+      "rightHidden": false,
+      "leftRowSizes": "1fr",
+      "rightRowSizes": "1fr",
+      "middleRowSizes": "2fr 3px 1fr",
+      "leftComponentTop": "TimelineItemsPanel",
+      "rightComponentTop": "ActivityFormPanel",
+      "leftComponentBottom": "ConstraintsPanel",
+      "rightComponentBottom": "TimelineEditorPanel",
+      "middleComponentBottom": "ActivityDirectivesTablePanel"
+    },
+    "iFrames": [
+      {
+        "id": 0,
+        "src": "https://eyes.nasa.gov/apps/mars2020/#/home",
+        "title": "Mars-2020-EDL"
+      }
+    ],
+    "timelines": [
+      {
+        "id": 0,
+        "rows": [
+          {
+            "id": 0,
+            "name": "Activities by Type",
+            "yAxes": [],
+            "height": 119,
+            "layers": [
+              {
+                "id": 0,
+                "name": "",
+                "filter": {
+                  "activity": {
+                    "static_types": [
+                      "BakeBananaBread",
+                      "BananaNap",
+                      "BiteBanana",
+                      "ChangeProducer",
+                      "child",
+                      "ControllableDurationActivity",
+                      "DecomposingSpawnChild",
+                      "DecomposingSpawnParent",
+                      "DownloadBanana",
+                      "DurationParameterActivity",
+                      "ExceptionActivity",
+                      "grandchild",
+                      "GrowBanana",
+                      "LineCount",
+                      "ParameterTest",
+                      "parent",
+                      "PeelBanana",
+                      "PickBanana",
+                      "RipenBanana",
+                      "ThrowBanana"
+                    ]
+                  }
+                },
+                "yAxisId": null,
+                "chartType": "activity",
+                "activityColor": "#fcdd8f"
+              }
+            ],
+            "expanded": true,
+            "discreteOptions": {
+              "height": 16,
+              "displayMode": "grouped",
+              "activityOptions": {
+                "composition": "both",
+                "hierarchyMode": "flat"
+              },
+              "labelVisibility": "auto",
+              "externalEventOptions": {
+                "groupBy": "event_type_name"
+              }
+            },
+            "autoAdjustHeight": true,
+            "horizontalGuides": []
+          },
+          {
+            "id": 1,
+            "name": "/data/line_count",
+            "yAxes": [
+              {
+                "id": 0,
+                "color": "#1b1d1e",
+                "label": {
+                  "text": "/data/line_count"
+                },
+                "tickCount": 5,
+                "domainFitMode": "fitTimeWindow",
+                "renderTickLines": true
+              }
+            ],
+            "height": 100,
+            "layers": [
+              {
+                "id": 1,
+                "name": "",
+                "filter": {
+                  "resource": "/data/line_count"
+                },
+                "yAxisId": 0,
+                "chartType": "line",
+                "lineColor": "#283593",
+                "lineWidth": 1,
+                "pointRadius": 2
+              }
+            ],
+            "expanded": true,
+            "discreteOptions": {
+              "height": 16,
+              "displayMode": "compact",
+              "activityOptions": {
+                "composition": "both",
+                "hierarchyMode": "flat"
+              },
+              "labelVisibility": "auto",
+              "externalEventOptions": {
+                "groupBy": "event_type_name"
+              }
+            },
+            "autoAdjustHeight": false,
+            "horizontalGuides": []
+          },
+          {
+            "id": 2,
+            "name": "/flag",
+            "yAxes": [
+              {
+                "id": 1,
+                "color": "#1b1d1e",
+                "label": {
+                  "text": "/flag"
+                },
+                "tickCount": 0,
+                "domainFitMode": "fitTimeWindow",
+                "renderTickLines": true
+              }
+            ],
+            "height": 100,
+            "layers": [
+              {
+                "id": 2,
+                "name": "",
+                "filter": {
+                  "resource": "/flag"
+                },
+                "opacity": 0.8,
+                "yAxisId": 1,
+                "chartType": "x-range",
+                "colorScheme": "schemeTableau10",
+                "showAsLinePlot": false
+              }
+            ],
+            "expanded": true,
+            "discreteOptions": {
+              "height": 16,
+              "displayMode": "compact",
+              "activityOptions": {
+                "composition": "both",
+                "hierarchyMode": "flat"
+              },
+              "labelVisibility": "auto",
+              "externalEventOptions": {
+                "groupBy": "event_type_name"
+              }
+            },
+            "autoAdjustHeight": false,
+            "horizontalGuides": []
+          },
+          {
+            "id": 3,
+            "name": "/flag/conflicted",
+            "yAxes": [
+              {
+                "id": 2,
+                "color": "#1b1d1e",
+                "label": {
+                  "text": "/flag/conflicted"
+                },
+                "tickCount": 0,
+                "domainFitMode": "fitTimeWindow",
+                "renderTickLines": true
+              }
+            ],
+            "height": 100,
+            "layers": [
+              {
+                "id": 3,
+                "name": "",
+                "filter": {
+                  "resource": "/flag/conflicted"
+                },
+                "opacity": 0.8,
+                "yAxisId": 2,
+                "chartType": "x-range",
+                "colorScheme": "schemeTableau10",
+                "showAsLinePlot": false
+              }
+            ],
+            "expanded": true,
+            "discreteOptions": {
+              "height": 16,
+              "displayMode": "compact",
+              "activityOptions": {
+                "composition": "both",
+                "hierarchyMode": "flat"
+              },
+              "labelVisibility": "auto",
+              "externalEventOptions": {
+                "groupBy": "event_type_name"
+              }
+            },
+            "autoAdjustHeight": false,
+            "horizontalGuides": []
+          },
+          {
+            "id": 4,
+            "name": "/fruit",
+            "yAxes": [
+              {
+                "id": 3,
+                "color": "#1b1d1e",
+                "label": {
+                  "text": "/fruit (bananas)"
+                },
+                "tickCount": 5,
+                "domainFitMode": "fitTimeWindow",
+                "renderTickLines": true
+              }
+            ],
+            "height": 100,
+            "layers": [
+              {
+                "id": 4,
+                "name": "",
+                "filter": {
+                  "resource": "/fruit"
+                },
+                "yAxisId": 3,
+                "chartType": "line",
+                "lineColor": "#283593",
+                "lineWidth": 1,
+                "pointRadius": 2
+              }
+            ],
+            "expanded": true,
+            "discreteOptions": {
+              "height": 16,
+              "displayMode": "compact",
+              "activityOptions": {
+                "composition": "both",
+                "hierarchyMode": "flat"
+              },
+              "labelVisibility": "auto",
+              "externalEventOptions": {
+                "groupBy": "event_type_name"
+              }
+            },
+            "autoAdjustHeight": false,
+            "horizontalGuides": []
+          },
+          {
+            "id": 5,
+            "name": "/peel",
+            "yAxes": [
+              {
+                "id": 4,
+                "color": "#1b1d1e",
+                "label": {
+                  "text": "/peel (kg)"
+                },
+                "tickCount": 5,
+                "domainFitMode": "fitTimeWindow",
+                "renderTickLines": true
+              }
+            ],
+            "height": 100,
+            "layers": [
+              {
+                "id": 5,
+                "name": "",
+                "filter": {
+                  "resource": "/peel"
+                },
+                "yAxisId": 4,
+                "chartType": "line",
+                "lineColor": "#283593",
+                "lineWidth": 1,
+                "pointRadius": 2
+              }
+            ],
+            "expanded": true,
+            "discreteOptions": {
+              "height": 16,
+              "displayMode": "compact",
+              "activityOptions": {
+                "composition": "both",
+                "hierarchyMode": "flat"
+              },
+              "labelVisibility": "auto",
+              "externalEventOptions": {
+                "groupBy": "event_type_name"
+              }
+            },
+            "autoAdjustHeight": false,
+            "horizontalGuides": []
+          },
+          {
+            "id": 6,
+            "name": "/plant",
+            "yAxes": [
+              {
+                "id": 5,
+                "color": "#1b1d1e",
+                "label": {
+                  "text": "/plant (count)"
+                },
+                "tickCount": 5,
+                "domainFitMode": "fitTimeWindow",
+                "renderTickLines": true
+              }
+            ],
+            "height": 100,
+            "layers": [
+              {
+                "id": 6,
+                "name": "",
+                "filter": {
+                  "resource": "/plant"
+                },
+                "yAxisId": 5,
+                "chartType": "line",
+                "lineColor": "#283593",
+                "lineWidth": 1,
+                "pointRadius": 2
+              }
+            ],
+            "expanded": true,
+            "discreteOptions": {
+              "height": 16,
+              "displayMode": "compact",
+              "activityOptions": {
+                "composition": "both",
+                "hierarchyMode": "flat"
+              },
+              "labelVisibility": "auto",
+              "externalEventOptions": {
+                "groupBy": "event_type_name"
+              }
+            },
+            "autoAdjustHeight": false,
+            "horizontalGuides": []
+          },
+          {
+            "id": 7,
+            "name": "/producer",
+            "yAxes": [
+              {
+                "id": 6,
+                "color": "#1b1d1e",
+                "label": {
+                  "text": "/producer"
+                },
+                "tickCount": 0,
+                "domainFitMode": "fitTimeWindow",
+                "renderTickLines": true
+              }
+            ],
+            "height": 100,
+            "layers": [
+              {
+                "id": 7,
+                "name": "",
+                "filter": {
+                  "resource": "/producer"
+                },
+                "opacity": 0.8,
+                "yAxisId": 6,
+                "chartType": "x-range",
+                "colorScheme": "schemeTableau10",
+                "showAsLinePlot": false
+              }
+            ],
+            "expanded": true,
+            "discreteOptions": {
+              "height": 16,
+              "displayMode": "compact",
+              "activityOptions": {
+                "composition": "both",
+                "hierarchyMode": "flat"
+              },
+              "labelVisibility": "auto",
+              "externalEventOptions": {
+                "groupBy": "event_type_name"
+              }
+            },
+            "autoAdjustHeight": false,
+            "horizontalGuides": []
+          }
+        ],
+        "marginLeft": 250,
+        "marginRight": 30,
+        "verticalGuides": []
+      }
+    ],
+    "activitySpansTable": {
+      "columnDefs": [
+        {
+          "field": "id",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "ID"
+        },
+        {
+          "field": "dataset_id",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Dataset ID"
+        },
+        {
+          "field": "parent_id",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Parent ID"
+        },
+        {
+          "field": "type",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Type"
+        },
+        {
+          "field": "start_offset",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Start Offset"
+        },
+        {
+          "field": "duration",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Duration"
+        }
+      ],
+      "columnStates": [],
+      "autoSizeColumns": "fill"
+    },
+    "simulationEventsTable": {
+      "columnDefs": [
+        {
+          "field": "id",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "ID"
+        },
+        {
+          "field": "dataset_id",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Dataset ID"
+        },
+        {
+          "hide": true,
+          "field": "start_offset",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Start Offset"
+        },
+        {
+          "hide": true,
+          "field": "dense_time",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Dense Time"
+        },
+        {
+          "field": "topic",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Topic"
+        },
+        {
+          "field": "value",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Value"
+        }
+      ],
+      "columnStates": [],
+      "autoSizeColumns": "fit"
+    },
+    "activityDirectivesTable": {
+      "columnDefs": [
+        {
+          "sort": null,
+          "colId": "arguments",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "field": "id",
+          "width": 80,
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "ID"
+        },
+        {
+          "sort": null,
+          "colId": "last_modified_at",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "sort": null,
+          "colId": "metadata",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "field": "name",
+          "width": 200,
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Name"
+        },
+        {
+          "field": "type",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Type"
+        },
+        {
+          "sort": null,
+          "colId": "source_scheduling_goal_id",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "field": "start_offset",
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Start Offset"
+        },
+        {
+          "sort": null,
+          "colId": "tags",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "sort": null,
+          "colId": "type",
+          "pivot": false,
+          "width": 280,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "sort": null,
+          "colId": "anchor_id",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "sort": null,
+          "colId": "applied_preset",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "sort": null,
+          "colId": "anchored_to_start",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "field": "derived_start_time",
+          "width": 200,
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Absolute Start Time (UTC)"
+        },
+        {
+          "sort": null,
+          "colId": "start_offset",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "hide": true,
+          "field": "created_at",
+          "width": 200,
+          "filter": "text",
+          "sortable": true,
+          "resizable": true,
+          "headerName": "Created At (UTC)"
+        }
+      ],
+      "columnStates": [
+        {
+          "flex": null,
+          "hide": false,
+          "sort": null,
+          "colId": "errorCounts",
+          "pivot": false,
+          "width": 70,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "anchor_id",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "anchored_to_start",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "applied_preset",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "arguments",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "created_at",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "created_by",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": false,
+          "sort": null,
+          "colId": "id",
+          "pivot": false,
+          "width": 85.20000000000005,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "last_modified_at",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "last_modified_by",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "metadata",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": false,
+          "sort": null,
+          "colId": "name",
+          "pivot": false,
+          "width": 211,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "source_scheduling_goal_id",
+          "pivot": false,
+          "width": 200,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": false,
+          "sort": null,
+          "colId": "start_offset",
+          "pivot": false,
+          "width": 211,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": false,
+          "sort": null,
+          "colId": "start_time_ms",
+          "pivot": false,
+          "width": 211,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": true,
+          "sort": null,
+          "colId": "tags",
+          "pivot": false,
+          "width": 220,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        },
+        {
+          "flex": null,
+          "hide": false,
+          "sort": null,
+          "colId": "type",
+          "pivot": false,
+          "width": 211,
+          "pinned": null,
+          "aggFunc": null,
+          "rowGroup": false,
+          "sortIndex": null,
+          "pivotIndex": null,
+          "rowGroupIndex": null
+        }
+      ],
+      "autoSizeColumns": "fill"
+    }
+  },
+  "version": 2
+}
diff --git a/src/types/activity.ts b/src/types/activity.ts
index c97b63b390..cf23343d44 100644
--- a/src/types/activity.ts
+++ b/src/types/activity.ts
@@ -12,7 +12,7 @@ export type ActivityType = {
   name: string;
   parameters: ParametersMap;
   required_parameters: string[];
-  subsystem_tag?: Tag;
+  subsystem_tag?: Tag | null;
 };
 
 export type ActivityTypeExpansionRules = {
diff --git a/src/types/parameter.ts b/src/types/parameter.ts
index 33f7929755..42c1878b0f 100644
--- a/src/types/parameter.ts
+++ b/src/types/parameter.ts
@@ -1,5 +1,12 @@
 import type { ValueSchema } from './schema';
 
+export type DefaultEffectiveArguments = {
+  arguments: ArgumentsMap;
+  typeName: string;
+};
+
+export type DefaultEffectiveArgumentsMap = Record<string, ArgumentsMap>;
+
 export type EffectiveArguments = {
   arguments: ArgumentsMap;
   errors: ParametersErrorMap;
diff --git a/src/types/timeline.ts b/src/types/timeline.ts
index 4f2ce30b08..2cec4c188d 100644
--- a/src/types/timeline.ts
+++ b/src/types/timeline.ts
@@ -1,7 +1,9 @@
 import type { Selection } from 'd3-selection';
+import type { ActivityLayerFilterField, FilterOperator } from '../enums/timeline';
 import type { ActivityDirective, ActivityDirectiveId, ActivityType } from './activity';
 import type { ConstraintResultWithName } from './constraint';
 import type { ExternalEvent, ExternalEventId, ExternalEventType } from './external-event';
+import type { ValueSchema } from './schema';
 import type { ResourceType, Span, SpanId } from './simulation';
 
 export type DiscreteTree = DiscreteTreeNode[];
@@ -30,13 +32,41 @@ export interface ExternalEventLayer extends Layer {
   externalEventColor: string;
 }
 
+export type DynamicFilterDataType = ValueSchema['type'] | 'tag';
+
 export type ActivityLayerFilter = {
-  types: string[];
+  dynamic_type_filters?: ActivityLayerDynamicFilter<Pick<typeof ActivityLayerFilterField, 'Type' | 'Subsystem'>>[];
+  other_filters?: ActivityLayerDynamicFilter<
+    Pick<typeof ActivityLayerFilterField, 'Tags' | 'Parameter' | 'SchedulingGoalId' | 'Name'>
+  >[];
+  static_types?: string[];
+  type_subfilters?: Record<
+    string,
+    ActivityLayerDynamicFilter<
+      Pick<typeof ActivityLayerFilterField, 'Tags' | 'Parameter' | 'SchedulingGoalId' | 'Name'>
+    >[]
+  >;
 };
 export type ExternalEventLayerFilter = {
   event_types: string[];
 };
 
+export type ActivityLayerDynamicFilter<T> = {
+  field: keyof T;
+  id: number;
+  operator: keyof typeof FilterOperator;
+  subfield?: { name: string; type: DynamicFilterDataType };
+  value: string | string[] | number | number[] | boolean;
+};
+
+export type ActivityLayerFilterSubfield = { name: string; type: DynamicFilterDataType };
+export type ActivityLayerFilterSubfieldSchema = ActivityLayerFilterSubfield & {
+  activityTypes: string[];
+  label: string;
+  unit?: string;
+  values?: string[];
+};
+
 export type AxisDomainFitMode = 'fitPlan' | 'fitTimeWindow' | 'manual';
 
 export type Axis = {
@@ -92,7 +122,6 @@ export type ChartType = 'activity' | 'line' | 'x-range' | 'externalEvent';
 export interface Layer {
   chartType: ChartType;
   filter: {
-    // TODO refactor in next PR to a unified filter
     activity?: ActivityLayerFilter;
     externalEvent?: ExternalEventLayerFilter;
     resource?: ResourceLayerFilter;
@@ -175,9 +204,7 @@ export type QuadtreeRect = {
   y: number;
 };
 
-export type ResourceLayerFilter = {
-  names: string[];
-};
+export type ResourceLayerFilter = string;
 
 export type ActivityOptions = {
   // Whether or not to display only directives, only spans, or both in the row
@@ -281,8 +308,13 @@ export interface XRangePoint extends Point {
 
 export type TimelineItemType = ResourceType | ActivityType | ExternalEventType;
 
+export type TimelineItemMetadata = {
+  selectedFilters?: Record<string, TimelineItemListFilterOption>;
+  textFilters?: string[];
+};
+
 export type TimelineItemListFilterOption = {
   color?: string;
   label: string;
-  value: string;
+  value: string | number;
 };
diff --git a/src/utilities/activities.ts b/src/utilities/activities.ts
index 46d8f4362f..cc6678b00c 100644
--- a/src/utilities/activities.ts
+++ b/src/utilities/activities.ts
@@ -82,7 +82,7 @@ export function getAllSpansForActivityDirective(
 }
 
 /**
- * Returns thd children IDs of a span
+ * Returns the children IDs of a span
  */
 export function getAllSpanChildrenIds(spanId: number, spanUtilityMaps: SpanUtilityMaps): number[] {
   const children = spanUtilityMaps.spanIdToChildIdsMap[spanId];
diff --git a/src/utilities/effects.ts b/src/utilities/effects.ts
index d70dbc2ef2..60d5b83666 100644
--- a/src/utilities/effects.ts
+++ b/src/utilities/effects.ts
@@ -108,6 +108,7 @@ import type { DslTypeScriptResponse, TypeScriptFile } from '../types/monaco';
 import type {
   Argument,
   ArgumentsMap,
+  DefaultEffectiveArguments,
   EffectiveArguments,
   Parameter,
   ParameterValidationError,
@@ -210,7 +211,7 @@ import type {
   TagsInsertInput,
   TagsSetInput,
 } from '../types/tags';
-import type { Row, Timeline } from '../types/timeline';
+import type { Layer, Row, Timeline } from '../types/timeline';
 import type { View, ViewDefinition, ViewInsertInput, ViewSlim, ViewUpdateInput } from '../types/view';
 import { ActivityDeletionAction } from './activities';
 import { parseCdlDictionary, toAmpcsXml } from './codemirror/cdlDictionary';
@@ -3065,15 +3066,30 @@ const effects = {
     }
   },
 
-  async deleteTimelineLayers(timelineId?: number | null, rowId?: number | null) {
+  async deleteTimelineLayers(
+    layers: Layer[],
+    chartType: 'activity' | 'resource' | 'externalEvent',
+    timelineId?: number | null,
+    rowId?: number | null,
+  ) {
     const { confirm } = await showConfirmModal(
       'Delete',
-      `Are you sure you want to delete all layers in this row?`,
+      `Are you sure you want to delete all ${chartType} layers in this row?`,
       'Delete Rows',
       true,
     );
     if (confirm) {
-      viewUpdateRow('layers', [], timelineId, rowId);
+      const filteredLayers = layers.filter(l => {
+        if (chartType === 'activity') {
+          return l.chartType !== 'activity';
+        } else if (chartType === 'externalEvent') {
+          return l.chartType !== 'externalEvent';
+        } else if (chartType === 'resource') {
+          return l.chartType !== 'line' && l.chartType !== 'x-range';
+        }
+        return true;
+      });
+      viewUpdateRow('layers', filteredLayers, timelineId, rowId);
     }
   },
 
@@ -3448,6 +3464,32 @@ const effects = {
     }
   },
 
+  async getDefaultActivityArguments(
+    modelId: number,
+    activityTypes: ActivityType[],
+    user: User | null,
+  ): Promise<DefaultEffectiveArguments[]> {
+    try {
+      const activities = activityTypes.map(type => ({ activityArguments: {}, activityTypeName: type.name }));
+      const data = await reqHasura<DefaultEffectiveArguments[]>(
+        gql.GET_EFFECTIVE_ACTIVITY_ARGUMENTS_BULK,
+        {
+          activities,
+          modelId,
+        },
+        user,
+      );
+      const { effectiveActivityArgumentsBulk } = data;
+      if (effectiveActivityArgumentsBulk !== null) {
+        return effectiveActivityArgumentsBulk;
+      }
+      return [];
+    } catch (e) {
+      catchError(e as Error);
+      return [];
+    }
+  },
+
   async getEffectiveActivityArguments(
     modelId: number,
     activityTypeName: string,
diff --git a/src/utilities/generic.test.ts b/src/utilities/generic.test.ts
index 9df0152335..a64c8bcfbf 100644
--- a/src/utilities/generic.test.ts
+++ b/src/utilities/generic.test.ts
@@ -7,6 +7,7 @@ import {
   filterEmpty,
   getSearchParameterNumber,
   isMacOs,
+  lowercase,
   parseJSONStream,
   unique,
 } from './generic';
@@ -190,4 +191,13 @@ describe('Generic utility function tests', () => {
       expect(await parseJSONStream(readable as unknown as ReadableStream)).toBeTypeOf('object');
     });
   });
+
+  describe('lowercase', () => {
+    test('Should lowercase a string', () => {
+      expect(lowercase('ABC')).to.eq('abc');
+    });
+    test('Should skip lowercasing if a string not provided', () => {
+      expect(lowercase([])).to.deep.eq([]);
+    });
+  });
 });
diff --git a/src/utilities/generic.ts b/src/utilities/generic.ts
index 89f54a2239..0123dd645a 100644
--- a/src/utilities/generic.ts
+++ b/src/utilities/generic.ts
@@ -431,3 +431,10 @@ export async function parseJSONStream<R>(jsonStream: ReadableStream): Promise<R>
     }
   });
 }
+
+/**
+ * Lowercase the unknown value if it is a string
+ */
+export function lowercase(value: any) {
+  return typeof value === 'string' ? value.toLowerCase() : value;
+}
diff --git a/src/utilities/gql.ts b/src/utilities/gql.ts
index fa3efde585..391e3617d3 100644
--- a/src/utilities/gql.ts
+++ b/src/utilities/gql.ts
@@ -95,6 +95,7 @@ export enum Queries {
   DERIVATION_GROUP_COMP = 'derivation_group_comp',
   PLAN_DERIVATION_GROUP = 'plan_derivation_group',
   GET_ACTIVITY_EFFECTIVE_ARGUMENTS = 'getActivityEffectiveArguments',
+  GET_ACTIVITY_EFFECTIVE_ARGUMENTS_BULK = 'getActivityEffectiveArgumentsBulk',
   GET_ACTIVITY_TYPE_SCRIPT = 'getActivityTypeScript',
   GET_COMMAND_TYPE_SCRIPT = 'getCommandTypeScript',
   GET_CONFLICTING_ACTIVITIES = 'get_conflicting_activities',
@@ -1339,6 +1340,18 @@ const gql = {
     }
   `,
 
+  GET_EFFECTIVE_ACTIVITY_ARGUMENTS_BULK: `#graphql
+    query GetEffectiveActivityArgumentsBulk($modelId: Int!, $activities: [EffectiveArgumentsInput!]!) {
+      effectiveActivityArgumentsBulk: ${Queries.GET_ACTIVITY_EFFECTIVE_ARGUMENTS_BULK}(
+        missionModelId: $modelId,
+        activities: $activities,
+      ) {
+        arguments
+        typeName
+      }
+    }
+  `,
+
   GET_EFFECTIVE_MODEL_ARGUMENTS: `#graphql
     query GetEffectiveModelArguments($modelId: Int!, $arguments: ModelArguments!) {
       effectiveModelArguments: ${Queries.GET_MODEL_EFFECTIVE_ARGUMENTS}(
diff --git a/src/utilities/permissions.ts b/src/utilities/permissions.ts
index d96523f96d..1fd1e98c6e 100644
--- a/src/utilities/permissions.ts
+++ b/src/utilities/permissions.ts
@@ -673,6 +673,7 @@ const queryPermissions: Record<GQLKeys, (user: User | null, ...args: any[]) => b
   GET_ACTIVITY_DIRECTIVE_CHANGELOG: () => true,
   GET_ACTIVITY_TYPES_EXPANSION_RULES: () => true,
   GET_EFFECTIVE_ACTIVITY_ARGUMENTS: () => true,
+  GET_EFFECTIVE_ACTIVITY_ARGUMENTS_BULK: () => true,
   GET_EFFECTIVE_MODEL_ARGUMENTS: () => true,
   GET_EVENTS: () => true,
   GET_EXPANSION_RULE: () => true,
diff --git a/src/utilities/timeline.test.ts b/src/utilities/timeline.test.ts
index 61852b39d4..e8b2389e9b 100644
--- a/src/utilities/timeline.test.ts
+++ b/src/utilities/timeline.test.ts
@@ -5,12 +5,16 @@ import {
   ViewLineLayerColorPresets,
   ViewXRangeLayerSchemePresets,
 } from '../constants/view';
-import type { ActivityDirective } from '../types/activity';
+import type { ActivityDirective, ActivityType } from '../types/activity';
 import type { ExternalEvent } from '../types/external-event';
+import type { DefaultEffectiveArgumentsMap } from '../types/parameter';
 import type { Resource, ResourceType, Span, SpanUtilityMaps, SpansMap } from '../types/simulation';
+import type { Tag } from '../types/tags';
 import type { DiscreteTreeNode, TimeRange, Timeline, XRangeLayer } from '../types/timeline';
 import { createSpanUtilityMaps } from './activities';
+import { convertUTCToMs } from './time';
 import {
+  applyActivityLayerFilter,
   createHorizontalGuide,
   createRow,
   createTimeline,
@@ -25,6 +29,7 @@ import {
   externalEventInView,
   filterResourcesByLayer,
   generateDiscreteTreeUtil,
+  getMatchingTypesForActivityLayerFilter,
   getTimeRangeAroundTime,
   getUniqueColorForActivityLayer,
   getUniqueColorForLineLayer,
@@ -34,10 +39,130 @@ import {
   isExternalEventLayer,
   isLineLayer,
   isXRangeLayer,
+  matchesDynamicFilter,
   paginateNodes,
   spanInView,
 } from './timeline';
-import { convertUTCToMs } from './time';
+
+const testActivityTypes: ActivityType[] = [
+  {
+    computed_attributes_value_schema: {
+      items: {},
+      type: 'struct',
+    },
+    name: 'child',
+    parameters: {
+      counter: {
+        order: 0,
+        schema: {
+          type: 'int',
+        },
+      },
+    },
+    required_parameters: [],
+    subsystem_tag: null,
+  },
+  {
+    computed_attributes_value_schema: {
+      items: {},
+      type: 'struct',
+    },
+    name: 'parent',
+    parameters: {
+      label: {
+        order: 0,
+        schema: {
+          type: 'string',
+        },
+      },
+    },
+    required_parameters: [],
+    subsystem_tag: {
+      color: '#FFFFFF',
+      created_at: '2022-08-03T18:21:51',
+      id: 1,
+      name: 'subsystem1',
+      owner: 'user1',
+    },
+  },
+  {
+    computed_attributes_value_schema: {
+      items: {
+        biteSizeWasBig: {
+          type: 'boolean',
+        },
+        newFlag: {
+          type: 'variant',
+          variants: [
+            {
+              key: 'A',
+              label: 'A',
+            },
+            {
+              key: 'B',
+              label: 'B',
+            },
+          ],
+        },
+      },
+      type: 'struct',
+    },
+    name: 'BiteBanana',
+    parameters: {
+      biteSize: {
+        order: 0,
+        schema: {
+          metadata: {
+            banannotation: {
+              value: 'Specifies the size of bite to take',
+            },
+            unit: {
+              value: 'm',
+            },
+          },
+          type: 'real',
+        },
+      },
+    },
+    required_parameters: [],
+    subsystem_tag: null,
+  },
+  {
+    computed_attributes_value_schema: {
+      type: 'int',
+    },
+    name: 'BakeBananaBread',
+    parameters: {
+      glutenFree: {
+        order: 2,
+        schema: {
+          type: 'boolean',
+        },
+      },
+      tbSugar: {
+        order: 1,
+        schema: {
+          type: 'int',
+        },
+      },
+      temperature: {
+        order: 0,
+        schema: {
+          type: 'real',
+        },
+      },
+    },
+    required_parameters: ['tbSugar', 'glutenFree'],
+    subsystem_tag: null,
+  },
+];
+
+const testDefaultArgumentsMap: DefaultEffectiveArgumentsMap = {
+  BakeBananaBread: { temperature: 350 },
+  BiteBanana: { biteSize: 1 },
+  child: { counter: 0 },
+  parent: { label: 'unlabeled' },
+};
 
 const testSpans: Span[] = [
   generateSpan({
@@ -48,7 +173,7 @@ const testSpans: Span[] = [
     span_id: 2,
     startMs: 0,
     start_offset: '00:10:00',
-    type: 'Child',
+    type: 'child',
   }),
   generateSpan({
     duration: '02:00:00',
@@ -58,7 +183,7 @@ const testSpans: Span[] = [
     span_id: 1,
     startMs: 0,
     start_offset: '00:00:00',
-    type: 'Parent',
+    type: 'parent',
   }),
   generateSpan({
     duration: '04:00:00',
@@ -68,7 +193,7 @@ const testSpans: Span[] = [
     span_id: 3,
     startMs: 0,
     start_offset: '00:05:00',
-    type: 'Child',
+    type: 'child',
   }),
   generateSpan({
     attributes: {
@@ -197,6 +322,10 @@ function generateActivityDirective(properties: Partial<ActivityDirective>): Acti
   };
 }
 
+function generateTag(properties: Partial<Tag>): Tag {
+  return { color: '#FFFFFF', created_at: '', id: -1, name: '', owner: '', ...properties };
+}
+
 function generateSpan(properties: Partial<Span>): Span {
   return {
     attributes: { arguments: {}, computedAttributes: {} },
@@ -312,7 +441,9 @@ test('getYAxisBounds', () => {
   populateTimelineLayers(timelines);
 
   const layer1 = timelines[0].rows[0].layers[1];
-  layer1.filter.resource = { names: ['resourceWithValues', 'resourceWithNoValues'] };
+  const layer2 = timelines[0].rows[0].layers[2];
+  layer1.filter.resource = 'resourceWithValues';
+  layer2.filter.resource = 'resourceWithNoValues';
   const yAxis = timelines[0].rows[0].yAxes[0];
   const layers = timelines[0].rows[0].layers;
   const resourceWithValues: Resource = {
@@ -395,11 +526,10 @@ test('filterResourcesByLayer', () => {
   expect(filterResourcesByLayer(layer, [resourceA, resourceB])).to.deep.equal([]);
 
   const layer2 = createTimelineLineLayer([], []);
-  layer2.filter.resource = { names: [] };
   expect(filterResourcesByLayer(layer2, [])).to.deep.equal([]);
 
   const layer3 = createTimelineLineLayer([], []);
-  layer3.filter.resource = { names: ['resourceA'] };
+  layer3.filter.resource = 'resourceA';
   expect(filterResourcesByLayer(layer3, [resourceA, resourceB])).to.deep.equal([resourceA]);
 });
 
@@ -547,7 +677,7 @@ test('generateDiscreteTree', () => {
       testDirectives,
       testSpans,
       testExternalEvents,
-      { BiteBanana: true, BiteBanana_1: true, Parent: true, Parent_1: true, Parent_1_Child: true },
+      { BiteBanana: true, BiteBanana_1: true, parent: true, parent_1: true, parent_1_child: true },
       'flat',
       'event_type_name',
       false,
@@ -748,7 +878,7 @@ test('generateDiscreteTree', () => {
           activity_type: 'aggregation',
           children: [],
           expanded: false,
-          id: 'Child',
+          id: 'child',
           isLeaf: false,
           items: [
             {
@@ -765,7 +895,7 @@ test('generateDiscreteTree', () => {
                 span_id: 2,
                 startMs: 0,
                 start_offset: '00:10:00',
-                type: 'Child',
+                type: 'child',
               },
             },
             {
@@ -782,11 +912,11 @@ test('generateDiscreteTree', () => {
                 span_id: 3,
                 startMs: 0,
                 start_offset: '00:05:00',
-                type: 'Child',
+                type: 'child',
               },
             },
           ],
-          label: 'Child',
+          label: 'child',
           type: 'Activity',
         },
         {
@@ -802,7 +932,7 @@ test('generateDiscreteTree', () => {
                       activity_type: 'span',
                       children: [],
                       expanded: false,
-                      id: 'Parent_1_Child_2',
+                      id: 'parent_1_child_2',
                       isLeaf: true,
                       items: [
                         {
@@ -819,18 +949,18 @@ test('generateDiscreteTree', () => {
                             span_id: 2,
                             startMs: 0,
                             start_offset: '00:10:00',
-                            type: 'Child',
+                            type: 'child',
                           },
                         },
                       ],
-                      label: 'Child',
+                      label: 'child',
                       type: 'Activity',
                     },
                     {
                       activity_type: 'span',
                       children: [],
                       expanded: false,
-                      id: 'Parent_1_Child_3',
+                      id: 'parent_1_child_3',
                       isLeaf: true,
                       items: [
                         {
@@ -847,16 +977,16 @@ test('generateDiscreteTree', () => {
                             span_id: 3,
                             startMs: 0,
                             start_offset: '00:05:00',
-                            type: 'Child',
+                            type: 'child',
                           },
                         },
                       ],
-                      label: 'Child',
+                      label: 'child',
                       type: 'Activity',
                     },
                   ],
                   expanded: true,
-                  id: 'Parent_1_Child',
+                  id: 'parent_1_child',
                   isLeaf: false,
                   items: [
                     {
@@ -873,7 +1003,7 @@ test('generateDiscreteTree', () => {
                         span_id: 2,
                         startMs: 0,
                         start_offset: '00:10:00',
-                        type: 'Child',
+                        type: 'child',
                       },
                     },
                     {
@@ -890,16 +1020,16 @@ test('generateDiscreteTree', () => {
                         span_id: 3,
                         startMs: 0,
                         start_offset: '00:05:00',
-                        type: 'Child',
+                        type: 'child',
                       },
                     },
                   ],
-                  label: 'Child',
+                  label: 'child',
                   type: 'Activity',
                 },
               ],
               expanded: true,
-              id: 'Parent_1',
+              id: 'parent_1',
               isLeaf: false,
               items: [
                 {
@@ -916,16 +1046,16 @@ test('generateDiscreteTree', () => {
                     span_id: 1,
                     startMs: 0,
                     start_offset: '00:00:00',
-                    type: 'Parent',
+                    type: 'parent',
                   },
                 },
               ],
-              label: 'Parent',
+              label: 'parent',
               type: 'Activity',
             },
           ],
           expanded: true,
-          id: 'Parent',
+          id: 'parent',
           isLeaf: false,
           items: [
             {
@@ -942,11 +1072,11 @@ test('generateDiscreteTree', () => {
                 span_id: 1,
                 startMs: 0,
                 start_offset: '00:00:00',
-                type: 'Parent',
+                type: 'parent',
               },
             },
           ],
-          label: 'Parent',
+          label: 'parent',
           type: 'Activity',
         },
       ],
@@ -1040,7 +1170,7 @@ test('generateDiscreteTree', () => {
             span_id: 2,
             startMs: 0,
             start_offset: '00:10:00',
-            type: 'Child',
+            type: 'child',
           },
         },
         {
@@ -1057,7 +1187,7 @@ test('generateDiscreteTree', () => {
             span_id: 3,
             startMs: 0,
             start_offset: '00:05:00',
-            type: 'Child',
+            type: 'child',
           },
         },
         {
@@ -1074,7 +1204,7 @@ test('generateDiscreteTree', () => {
             span_id: 1,
             startMs: 0,
             start_offset: '00:00:00',
-            type: 'Parent',
+            type: 'parent',
           },
         },
       ],
@@ -1235,3 +1365,274 @@ describe('getTimeRangeAroundTime', () => {
     expect(timeRange.end - timeRange.start).toBe(48 * hourInMs);
   });
 });
+
+describe('applyActivityLayerFilter', () => {
+  const tags: Tag[] = [generateTag({ id: 1 }), generateTag({ id: 2 })];
+  const directives: ActivityDirective[] = [
+    generateActivityDirective({ id: 1, name: 'Foo', source_scheduling_goal_id: 1, type: 'parent' }),
+    generateActivityDirective({
+      arguments: { newFlag: 'A' },
+      id: 2,
+      source_scheduling_goal_id: 2,
+      tags: [{ tag: tags[1] }],
+      type: 'BiteBanana',
+    }),
+    generateActivityDirective({ id: 3, tags: tags.map(tag => ({ tag })), type: 'PeelBanana' }),
+    generateActivityDirective({ arguments: { newFlag: 'B' }, id: 4, type: 'BiteBanana' }),
+  ];
+  const spans: Span[] = [
+    generateSpan({ parent_id: 1, span_id: 2, type: 'child' }),
+    generateSpan({ parent_id: null, span_id: 1, type: 'parent' }),
+    generateSpan({ parent_id: 1, span_id: 3, type: 'child' }),
+    generateSpan({
+      attributes: { arguments: { newFlag: 'A' }, computedAttributes: {} },
+      parent_id: null,
+      span_id: 4,
+      type: 'BiteBanana',
+    }),
+    generateSpan({ parent_id: null, span_id: 5, type: 'PeelBanana' }),
+    generateSpan({
+      attributes: { arguments: { newFlag: 'B' }, computedAttributes: {} },
+      parent_id: null,
+      span_id: 6,
+      type: 'BiteBanana',
+    }),
+  ];
+
+  test('Should return all directives and spans if no filters applied', () => {
+    expect(
+      applyActivityLayerFilter(undefined, testDirectives, testSpans, testActivityTypes, testDefaultArgumentsMap),
+    ).to.deep.eq({
+      directives: testDirectives,
+      spans: testSpans,
+    });
+    expect(
+      applyActivityLayerFilter({}, testDirectives, testSpans, testActivityTypes, testDefaultArgumentsMap),
+    ).to.deep.eq({
+      directives: testDirectives,
+      spans: testSpans,
+    });
+  });
+
+  test('Should apply static type filters', () => {
+    expect(
+      applyActivityLayerFilter(
+        { static_types: ['parent', 'BiteBanana'] },
+        directives,
+        spans,
+        testActivityTypes,
+        testDefaultArgumentsMap,
+      ),
+    ).to.deep.eq({
+      directives: [directives[0], directives[1], directives[3]],
+      spans: [spans[1], spans[3], spans[5]],
+    });
+  });
+
+  test('Should apply dynamic type filters', () => {
+    expect(
+      applyActivityLayerFilter(
+        {
+          dynamic_type_filters: [
+            {
+              field: 'Type',
+              id: 1,
+              operator: 'includes',
+              value: 'banana',
+            },
+          ],
+        },
+        directives,
+        spans,
+        testActivityTypes,
+        testDefaultArgumentsMap,
+      ),
+    ).to.deep.eq({
+      directives: [directives[1], directives[2], directives[3]],
+      spans: [spans[3], spans[4], spans[5]],
+    });
+
+    expect(
+      applyActivityLayerFilter(
+        {
+          dynamic_type_filters: [
+            {
+              field: 'Type',
+              id: 1,
+              operator: 'equals',
+              value: 'BiteBanana',
+            },
+          ],
+        },
+        directives,
+        spans,
+        testActivityTypes,
+        testDefaultArgumentsMap,
+      ),
+    ).to.deep.eq({
+      directives: [directives[1], directives[3]],
+      spans: [spans[3], spans[5]],
+    });
+
+    expect(
+      applyActivityLayerFilter(
+        {
+          dynamic_type_filters: [
+            {
+              field: 'Subsystem',
+              id: 1,
+              operator: 'equals',
+              value: 1,
+            },
+          ],
+        },
+        directives,
+        spans,
+        testActivityTypes,
+        testDefaultArgumentsMap,
+      ),
+    ).to.deep.eq({
+      directives: [directives[0]],
+      spans: [spans[1]],
+    });
+  });
+
+  test('Should apply other filters', () => {
+    expect(
+      applyActivityLayerFilter(
+        {
+          other_filters: [
+            {
+              field: 'Name',
+              id: 1,
+              operator: 'includes',
+              value: 'oo',
+            },
+          ],
+        },
+        directives,
+        spans,
+        testActivityTypes,
+        testDefaultArgumentsMap,
+      ),
+    ).to.deep.eq({
+      directives: [directives[0]],
+      spans: [],
+    });
+
+    expect(
+      applyActivityLayerFilter(
+        {
+          other_filters: [
+            {
+              field: 'Parameter',
+              id: 1,
+              operator: 'equals',
+              subfield: { name: 'newFlag', type: 'variant' },
+              value: 'A',
+            },
+          ],
+        },
+        directives,
+        spans,
+        testActivityTypes,
+        testDefaultArgumentsMap,
+      ),
+    ).to.deep.eq({
+      directives: [directives[1]],
+      spans: [spans[3]],
+    });
+
+    expect(
+      applyActivityLayerFilter(
+        {
+          other_filters: [
+            {
+              field: 'SchedulingGoalId',
+              id: 1,
+              operator: 'equals',
+              value: 1,
+            },
+          ],
+        },
+        directives,
+        spans,
+        testActivityTypes,
+        testDefaultArgumentsMap,
+      ),
+    ).to.deep.eq({
+      directives: [directives[0]],
+      spans: [],
+    });
+
+    expect(
+      applyActivityLayerFilter(
+        {
+          other_filters: [
+            {
+              field: 'Tags',
+              id: 1,
+              operator: 'includes',
+              value: [1],
+            },
+          ],
+        },
+        directives,
+        spans,
+        testActivityTypes,
+        testDefaultArgumentsMap,
+      ),
+    ).to.deep.eq({
+      directives: [directives[2]],
+      spans: [],
+    });
+  });
+});
+
+test('getMatchingTypesForActivityLayerFilter', () => {
+  expect(getMatchingTypesForActivityLayerFilter({}, [])).to.deep.eq([]);
+  expect(getMatchingTypesForActivityLayerFilter({}, testActivityTypes)).to.deep.eq(testActivityTypes);
+  expect(
+    getMatchingTypesForActivityLayerFilter({ static_types: ['parent', 'BiteBanana'] }, testActivityTypes),
+  ).to.deep.eq([
+    testActivityTypes.find(t => t.name === 'parent'),
+    testActivityTypes.find(t => t.name === 'BiteBanana'),
+  ]);
+  expect(getMatchingTypesForActivityLayerFilter({ static_types: ['Foo'] }, testActivityTypes)).to.deep.eq([]);
+  expect(
+    getMatchingTypesForActivityLayerFilter(
+      {
+        dynamic_type_filters: [
+          {
+            field: 'Type',
+            id: 1,
+            operator: 'includes',
+            value: 'banana',
+          },
+        ],
+      },
+      testActivityTypes,
+    ),
+  ).to.deep.eq(testActivityTypes.filter(t => t.name.toLowerCase().indexOf('banana') > -1));
+});
+
+test('matchesDynamicFilter', () => {
+  expect(matchesDynamicFilter('Foo', 'equals', 'Foo')).toBeTruthy();
+  expect(matchesDynamicFilter('Foo', 'does_not_equal', 'Bar')).toBeTruthy();
+  expect(matchesDynamicFilter('Foo', 'includes', '')).toBeFalsy();
+  expect(matchesDynamicFilter('Foo', 'includes', 'oo')).toBeTruthy();
+  expect(matchesDynamicFilter([], 'includes', [1])).toBeFalsy();
+  expect(matchesDynamicFilter([1, 2, 3], 'includes', [1])).toBeTruthy();
+  expect(matchesDynamicFilter('Foo', 'does_not_include', '')).toBeTruthy();
+  expect(matchesDynamicFilter('Foo', 'does_not_include', 'oo')).toBeFalsy();
+  expect(matchesDynamicFilter([], 'does_not_include', [1])).toBeTruthy();
+  expect(matchesDynamicFilter([1, 2, 3], 'does_not_include', [1])).toBeFalsy();
+  expect(matchesDynamicFilter(2, 'is_greater_than', 1)).toBeTruthy();
+  expect(matchesDynamicFilter('2', 'is_greater_than', '1')).toBeTruthy();
+  expect(matchesDynamicFilter(2, 'is_less_than', 1)).toBeFalsy();
+  expect(matchesDynamicFilter('2', 'is_less_than', '1')).toBeFalsy();
+  expect(matchesDynamicFilter(2, 'is_within', [1, 3])).toBeTruthy();
+  expect(matchesDynamicFilter(2, 'is_not_within', [1, 3])).toBeFalsy();
+  // @ts-expect-error forcing the case where an invalid operator is specified
+  expect(matchesDynamicFilter(2, 'is_definitely_somewhere_near', [1, 3])).toBeFalsy();
+});
diff --git a/src/utilities/timeline.ts b/src/utilities/timeline.ts
index f1e18201f7..f2be9c43d7 100644
--- a/src/utilities/timeline.ts
+++ b/src/utilities/timeline.ts
@@ -13,18 +13,22 @@ import {
   type CountableTimeInterval,
   type TimeInterval,
 } from 'd3-time';
-import { groupBy } from 'lodash-es';
+import { groupBy, isArray } from 'lodash-es';
 import {
   ViewDefaultDiscreteOptions,
   ViewDiscreteLayerColorPresets,
   ViewLineLayerColorPresets,
   ViewXRangeLayerSchemePresets,
 } from '../constants/view';
-import type { ActivityDirective } from '../types/activity';
+import type { ActivityLayerFilterField } from '../enums/timeline';
+import type { ActivityDirective, ActivityType } from '../types/activity';
 import type { ExternalEvent } from '../types/external-event';
+import type { DefaultEffectiveArgumentsMap } from '../types/parameter';
 import type { Resource, ResourceType, ResourceValue, Span, SpanUtilityMaps, SpansMap } from '../types/simulation';
 import type {
   ActivityLayer,
+  ActivityLayerDynamicFilter,
+  ActivityLayerFilter,
   ActivityOptions,
   Axis,
   DiscreteTree,
@@ -47,7 +51,7 @@ import type {
 } from '../types/timeline';
 import { generateRandomPastelColor } from './color';
 import { getExternalEventRowId } from './externalEvents';
-import { filterEmpty } from './generic';
+import { filterEmpty, lowercase } from './generic';
 import { getDoyTime } from './time';
 
 export enum TimelineLockStatus {
@@ -374,6 +378,19 @@ export function getNextTimelineID(timelines: Timeline[]): number {
   return maxID + 1;
 }
 
+/**
+ * Returns the next thing ID based on all things
+ */
+export function getNextThingID(things: { id: number }[]): number {
+  let maxID = -1;
+  things.forEach(thing => {
+    if (thing.id > maxID) {
+      maxID = thing.id;
+    }
+  });
+  return maxID + 1;
+}
+
 /**
  * Returns the next unused activity color within the given row
  */
@@ -575,13 +592,9 @@ export function createTimelineActivityLayer(timelines: Timeline[], args: Partial
   return {
     activityColor: ViewDiscreteLayerColorPresets[0],
     chartType: 'activity',
-    filter: {
-      activity: {
-        types: [],
-      },
-    },
+    filter: { activity: {} },
     id,
-    name: '',
+    name: 'Activity Layer',
     yAxisId: null,
     ...args,
   };
@@ -628,9 +641,9 @@ export function createTimelineResourceLayer(timelines: Timeline[], resourceType:
   });
 
   const layer = isDiscreteSchema
-    ? createTimelineXRangeLayer(timelines, [yAxis], { filter: { resource: { names: [name] } } })
+    ? createTimelineXRangeLayer(timelines, [yAxis], { filter: { resource: name } })
     : isNumericSchema
-      ? createTimelineLineLayer(timelines, [yAxis], { filter: { resource: { names: [name] } } })
+      ? createTimelineLineLayer(timelines, [yAxis], { filter: { resource: name } })
       : null;
 
   return { layer, yAxis };
@@ -649,11 +662,7 @@ export function createTimelineLineLayer(
 
   return {
     chartType: 'line',
-    filter: {
-      resource: {
-        names: [],
-      },
-    },
+    filter: {},
     id,
     lineColor: ViewLineLayerColorPresets[0],
     lineWidth: 1,
@@ -678,11 +687,7 @@ export function createTimelineXRangeLayer(
   return {
     chartType: 'x-range',
     colorScheme: 'schemeTableau10',
-    filter: {
-      resource: {
-        names: [],
-      },
-    },
+    filter: {},
     id,
     name: '',
     opacity: 0.8,
@@ -945,7 +950,7 @@ export function minMaxDecimation<T>(
  * Filters list of resources by the layer's resource filter
  */
 export function filterResourcesByLayer(layer: Layer, resources: Resource[] | ResourceType[]) {
-  return resources.filter(resource => (layer.filter.resource?.names || []).indexOf(resource.name) > -1);
+  return resources.filter(resource => layer.filter.resource === resource.name);
 }
 
 /**
@@ -1387,3 +1392,265 @@ export function paginateNodes(
   });
   return paginateNodes(newNodes, activityOrEvent, parentId, discreteTreeExpansionMap, depth + 1);
 }
+
+export function applyActivityLayerFilter(
+  filter: ActivityLayerFilter | undefined,
+  directives: ActivityDirective[],
+  spans: Span[],
+  types: ActivityType[],
+  defaultArgumentsMap: DefaultEffectiveArgumentsMap,
+): { directives: ActivityDirective[]; spans: Span[] } {
+  if (
+    !filter ||
+    (!filter.dynamic_type_filters?.length &&
+      !filter.other_filters?.length &&
+      !filter.static_types?.length &&
+      (!filter.type_subfilters || !Object.keys(filter.type_subfilters).length))
+  ) {
+    return { directives, spans };
+  }
+
+  const staticTypeMap: Record<string, boolean> = (filter.static_types || []).reduce(
+    (acc: Record<string, boolean>, cur: string) => {
+      acc[cur] = true;
+      return acc;
+    },
+    {},
+  );
+
+  const typeDefMap: Record<string, ActivityType> = (types || []).reduce(
+    (acc: Record<string, ActivityType>, cur: ActivityType) => {
+      acc[cur.name] = cur;
+      return acc;
+    },
+    {},
+  );
+
+  const filteredDirectives = directives.filter(directive => {
+    return applyFiltersToDirectiveOrSpan(directive, filter, staticTypeMap, typeDefMap, defaultArgumentsMap);
+  });
+
+  const filteredSpans = spans.filter(span => {
+    return applyFiltersToDirectiveOrSpan(span, filter, staticTypeMap, typeDefMap, defaultArgumentsMap);
+  });
+  return { directives: filteredDirectives, spans: filteredSpans };
+}
+
+function applyFiltersToDirectiveOrSpan(
+  directiveOrSpan: ActivityDirective | Span,
+  filter: ActivityLayerFilter,
+  staticTypeMap: Record<string, boolean>,
+  typeDefMap: Record<string, ActivityType>,
+  defaultArgumentsMap: DefaultEffectiveArgumentsMap,
+) {
+  const anyTypeFiltersSpecified = !!(filter.static_types?.length || filter.dynamic_type_filters?.length);
+  const anyMainFiltersSpecified = anyTypeFiltersSpecified || !!filter.other_filters?.length;
+  let included = !anyMainFiltersSpecified;
+
+  // Check to see if directive is included in static list
+  if (filter.static_types?.length) {
+    included = !!staticTypeMap[directiveOrSpan.type];
+  }
+
+  // Check if necessary to see if directive is included in dynamic list
+  if ((!filter.static_types?.length || !included) && filter.dynamic_type_filters?.length) {
+    included = directiveOrSpanMatchesDynamicFilters(
+      directiveOrSpan,
+      filter.dynamic_type_filters,
+      typeDefMap,
+      defaultArgumentsMap,
+    );
+  }
+
+  // Apply other filters on top of the types
+  if (filter.other_filters?.length) {
+    included =
+      directiveOrSpanMatchesDynamicFilters(directiveOrSpan, filter.other_filters, typeDefMap, defaultArgumentsMap) &&
+      (anyTypeFiltersSpecified ? included : true);
+  }
+
+  // Apply type specific filters if found and if the type is already included or
+  // if no other filters were specified (case where all types are included by default)
+  if (
+    filter.type_subfilters &&
+    filter.type_subfilters[directiveOrSpan.type] &&
+    filter.type_subfilters[directiveOrSpan.type].length
+  ) {
+    included =
+      directiveOrSpanMatchesDynamicFilters(
+        directiveOrSpan,
+        filter.type_subfilters[directiveOrSpan.type],
+        typeDefMap,
+        defaultArgumentsMap,
+      ) && (anyMainFiltersSpecified ? included : true);
+  }
+  return included;
+}
+
+export function getMatchingTypesForActivityLayerFilter(filter: ActivityLayerFilter | undefined, types: ActivityType[]) {
+  if (
+    !filter ||
+    (!filter.dynamic_type_filters?.length &&
+      !filter.other_filters?.length &&
+      !filter.static_types?.length &&
+      (!filter.type_subfilters || !Object.keys(filter.type_subfilters).length))
+  ) {
+    return types;
+  }
+
+  const staticTypeMap: Record<string, boolean> = (filter.static_types || []).reduce(
+    (acc: Record<string, boolean>, cur: string) => {
+      acc[cur] = true;
+      return acc;
+    },
+    {},
+  );
+
+  const anyTypeFiltersSpecified = !!(filter.static_types?.length || filter.dynamic_type_filters?.length);
+
+  return types.filter(type => {
+    let included = !anyTypeFiltersSpecified;
+
+    // Check to see if type is included in static list
+    if (filter.static_types?.length) {
+      included = !!staticTypeMap[type.name];
+    }
+
+    // Check if necessary to see if type is included in dynamic list
+    if ((!filter.static_types?.length || !included) && filter.dynamic_type_filters?.length) {
+      included = typeMatchesDynamicFilters(type, filter.dynamic_type_filters);
+    }
+    return included;
+  });
+}
+
+function directiveOrSpanMatchesDynamicFilters(
+  directiveOrSpan: ActivityDirective | Span,
+  dynamicFilters: ActivityLayerDynamicFilter<typeof ActivityLayerFilterField>[],
+  activityTypeDefMap: Record<string, ActivityType>,
+  defaultArgumentsMap: DefaultEffectiveArgumentsMap,
+): boolean {
+  return dynamicFilters.reduce((acc, curr) => {
+    let matches = false;
+    if (curr.field === 'Type') {
+      matches = matchesDynamicFilter(directiveOrSpan.type, curr.operator, curr.value);
+    } else if (curr.field === 'Name') {
+      matches = matchesDynamicFilter((directiveOrSpan as ActivityDirective).name, curr.operator, curr.value);
+    } else if (curr.field === 'Subsystem') {
+      // Get subsystem tag for this directive
+      let subsystemTagId = -1;
+      const typeDef = activityTypeDefMap[directiveOrSpan.type];
+      if (typeDef?.subsystem_tag?.id) {
+        subsystemTagId = typeDef.subsystem_tag.id;
+      }
+      matches = matchesDynamicFilter(subsystemTagId, curr.operator, curr.value);
+    } else if (curr.field === 'Tags' && isArray((directiveOrSpan as ActivityDirective).tags)) {
+      const ids = (directiveOrSpan as ActivityDirective).tags.map(tag => tag.tag.id);
+      matches = matchesDynamicFilter(ids, curr.operator, curr.value);
+    } else if (curr.field === 'Parameter' && curr.subfield) {
+      const subfield = curr.subfield;
+      const args = (directiveOrSpan as ActivityDirective).arguments || (directiveOrSpan as Span).attributes.arguments;
+      let argument = args[subfield.name];
+      if (argument === undefined) {
+        const isSpan = (directiveOrSpan as Span).span_id !== undefined;
+        if (!isSpan) {
+          // Get default
+          const defaultArgsForType = defaultArgumentsMap[directiveOrSpan.type];
+          if (defaultArgsForType) {
+            argument = defaultArgsForType[subfield.name];
+          }
+        }
+      }
+      matches = matchesDynamicFilter(argument, curr.operator, curr.value);
+    } else if (curr.field === 'SchedulingGoalId') {
+      const goalId = (directiveOrSpan as ActivityDirective).source_scheduling_goal_id;
+      if (typeof goalId === 'number') {
+        matches = matchesDynamicFilter(goalId, curr.operator, curr.value);
+      }
+    }
+    return acc && matches;
+  }, true);
+}
+
+// TODO try consolidating with the function above
+function typeMatchesDynamicFilters(
+  type: ActivityType,
+  dynamicFilters: ActivityLayerDynamicFilter<typeof ActivityLayerFilterField>[],
+): boolean {
+  return dynamicFilters.reduce((acc, curr) => {
+    let matches = false;
+    if (curr.field === 'Type') {
+      matches = matchesDynamicFilter(type.name, curr.operator, curr.value);
+    } else if (curr.field === 'Subsystem') {
+      matches = matchesDynamicFilter(type.subsystem_tag?.id ?? -1, curr.operator, curr.value);
+    }
+    return acc && matches;
+  }, true);
+}
+
+export function matchesDynamicFilter(
+  rawItemValue: ActivityLayerDynamicFilter<ActivityLayerFilterField>['value'], // the actual value
+  operator: ActivityLayerDynamicFilter<ActivityLayerFilterField>['operator'],
+  rawFilterValue: ActivityLayerDynamicFilter<ActivityLayerFilterField>['value'], // the value(s) we're comparing against
+) {
+  const itemValue = lowercase(rawItemValue);
+  const filterValue = lowercase(rawFilterValue);
+  switch (operator) {
+    case 'equals':
+      return itemValue === filterValue;
+    case 'does_not_equal':
+      return itemValue !== filterValue;
+    case 'includes':
+      if (typeof filterValue === 'string' && typeof itemValue === 'string') {
+        if (filterValue === '') {
+          return false;
+        }
+        return itemValue.indexOf(filterValue) > -1;
+      } else if (isArray(filterValue)) {
+        return !!(isArray(itemValue) ? itemValue : [itemValue]).find(
+          item => (filterValue as (typeof itemValue)[]).indexOf(item) > -1,
+        );
+      }
+      return false;
+    case 'does_not_include':
+      if (typeof filterValue === 'string' && typeof itemValue === 'string') {
+        if (filterValue === '') {
+          return true;
+        }
+        return itemValue.indexOf(filterValue) < 0;
+      } else if (isArray(filterValue)) {
+        return !(isArray(itemValue) ? itemValue : [itemValue]).find(
+          item => (filterValue as (typeof itemValue)[]).indexOf(item) > -1,
+        );
+      }
+      return false;
+    case 'is_greater_than':
+      return itemValue > filterValue;
+    case 'is_less_than':
+      return itemValue < filterValue;
+    case 'is_within':
+      if (
+        isArray(filterValue) &&
+        filterValue.length === 2 &&
+        typeof filterValue[0] === 'number' &&
+        typeof filterValue[1] === 'number'
+      ) {
+        // TODO should upper bound be inclusive or exclusive?
+        return itemValue >= filterValue[0] && itemValue <= filterValue[1];
+      }
+      return false;
+    case 'is_not_within':
+      if (
+        isArray(filterValue) &&
+        filterValue.length === 2 &&
+        typeof filterValue[0] === 'number' &&
+        typeof filterValue[1] === 'number'
+      ) {
+        // TODO should upper bound be inclusive or exclusive?
+        return itemValue < filterValue[0] || itemValue > filterValue[1];
+      }
+      return false;
+    default:
+      return false;
+  }
+}
diff --git a/src/utilities/view.test.ts b/src/utilities/view.test.ts
index 657d94592a..7a6b4fa3f5 100644
--- a/src/utilities/view.test.ts
+++ b/src/utilities/view.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'vitest';
 import viewV0Migrated from '../tests/mocks/view/v0/view-migrated.json';
 import viewV0 from '../tests/mocks/view/v0/view.json';
-import viewV1 from '../tests/mocks/view/v1/view.json';
+import viewV2 from '../tests/mocks/view/v2/view.json';
 import {
   applyViewDefinitionMigrations,
   generateDefaultView,
@@ -59,13 +59,13 @@ describe('migrateViewDefinition', () => {
     const { anyMigrationsApplied, error, migratedViewDefinition } = applyViewDefinitionMigrations(viewV0 as any);
     expect(anyMigrationsApplied).toBeTruthy();
     expect(error).toBeNull();
-    expect(migratedViewDefinition).to.deep.eq(viewV1);
+    expect(migratedViewDefinition).to.deep.eq(viewV2);
   });
   test('Should apply no view migrations to a migration matching current version', async () => {
-    const { anyMigrationsApplied, error, migratedViewDefinition } = applyViewDefinitionMigrations(viewV1 as any);
+    const { anyMigrationsApplied, error, migratedViewDefinition } = applyViewDefinitionMigrations(viewV2 as any);
     expect(anyMigrationsApplied).toBeFalsy();
     expect(error).toBeNull();
-    expect(migratedViewDefinition).to.deep.eq(viewV1);
+    expect(migratedViewDefinition).to.deep.eq(viewV2);
   });
   test('Should return errors if migration fails', async () => {
     const invalidView = structuredClone(viewV0);
diff --git a/src/utilities/view.ts b/src/utilities/view.ts
index d30e7da4d7..9c5f52b841 100644
--- a/src/utilities/view.ts
+++ b/src/utilities/view.ts
@@ -11,6 +11,9 @@ import {
   createTimelineActivityLayer,
   createTimelineExternalEventLayer,
   createTimelineResourceLayer,
+  isActivityLayer,
+  isLineLayer,
+  isXRangeLayer,
 } from './timeline';
 
 /**
@@ -29,7 +32,7 @@ export function generateDefaultView(
 
   // Start with the activity row
   const activityLayer = createTimelineActivityLayer(timelines, {
-    filter: { activity: { types } },
+    filter: { activity: { static_types: types } },
   });
   const activityRow = createRow(timelines, {
     autoAdjustHeight: true,
@@ -517,6 +520,7 @@ export function applyViewDefinitionMigrations(viewDefinition: ViewDefinition): {
     const version = viewDefinition.version ?? 0;
     const upMigrations: Record<number, (view: ViewDefinition) => ViewDefinition> = {
       0: migrateViewDefinitionV0toV1,
+      1: migrateViewDefinitionV1toV2,
     };
 
     // Iterate through versions between view version and latest view version
@@ -525,7 +529,7 @@ export function applyViewDefinitionMigrations(viewDefinition: ViewDefinition): {
     let anyMigrationsApplied = false;
     for (let i = version; i < viewSchemaVersion; i++) {
       if (upMigrations[i]) {
-        migratedViewDefinition = upMigrations[i](viewDefinition);
+        migratedViewDefinition = upMigrations[i](migratedViewDefinition);
         anyMigrationsApplied = true;
       }
     }
@@ -544,7 +548,6 @@ export function migrateViewDefinitionV0toV1(viewDefinition: ViewDefinition) {
     - ConstraintViolationsPanel rename to ConstraintsPanel
     - Remove deprecated ActivityLayer.activityHeight
   */
-
   const updatedGrid = structuredClone(viewDefinition.plan.grid);
   const gridKeysToUpdate = [
     'leftComponentTop',
@@ -614,3 +617,48 @@ export function migrateViewDefinitionV0toV1(viewDefinition: ViewDefinition) {
     version: 1,
   };
 }
+
+export function migrateViewDefinitionV1toV2(viewDefinition: ViewDefinition) {
+  /*
+    Summary of migrations:
+    - Activity layer filter types list changes to new complex set of filters
+    - Resource layer filter names list changes to a single type string
+  */
+  return {
+    ...viewDefinition,
+    plan: {
+      ...viewDefinition.plan,
+      timelines: viewDefinition.plan.timelines.map(timeline => {
+        return {
+          ...timeline,
+          rows: timeline.rows.map(row => {
+            const newRow = structuredClone(row);
+            newRow.layers = newRow.layers.map(layer => {
+              if (isActivityLayer(layer)) {
+                // @ts-expect-error deprecated type def
+                if (layer.filter.activity?.types && Array.isArray(layer.filter.activity.types)) {
+                  // @ts-expect-error deprecated type def
+                  layer.filter.activity.static_types = [...layer.filter.activity.types];
+
+                  // @ts-expect-error deprecated type def
+                  delete layer.filter.activity.types;
+                }
+              } else if (isLineLayer(layer) || isXRangeLayer(layer)) {
+                // @ts-expect-error deprecated type def
+                const resourceNames = layer.filter.resource?.names;
+                if (resourceNames && Array.isArray(resourceNames) && typeof resourceNames[0] === 'string') {
+                  layer.filter.resource = resourceNames[0];
+                } else {
+                  delete layer.filter.resource;
+                }
+              }
+              return layer;
+            });
+            return newRow;
+          }),
+        };
+      }),
+    },
+    version: 2,
+  };
+}