Skip to content

Apply changes from filter chip dropdowns immediately #2877

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Oct 7, 2025
Merged

Apply changes from filter chip dropdowns immediately #2877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4e8d2af
rework filter chips so that all of them apply their changes immediately
emma-sg Oct 2, 2025
a0626f2
ensure timeout is cancelled when fetching archived items
emma-sg Oct 2, 2025
e54dd56
fix broken clear button on archived item tag filter dropdown
emma-sg Oct 2, 2025
132d140
fix type switcher not dispatching update events in workflow tag filter
emma-sg Oct 2, 2025
226cd02
pass workflow tag filter type into tag filter
emma-sg Oct 2, 2025
5965a21
simplify & fix clear button issues on workflow tag & profile filters
emma-sg Oct 2, 2025
ffb6490
remove redundant `selectedProfiles` state and use `selected` directly in
emma-sg Oct 6, 2025
61f2e40
fix check for wrong changed property
emma-sg Oct 6, 2025
1b3fc97
apply suggestions from code review
emma-sg Oct 6, 2025
b678b11
remove missed `requestUpdate`
emma-sg Oct 6, 2025
6a15d78
remove unused requestUpdate
emma-sg Oct 7, 2025
2d3781a
fix hangs and clean up unused property on archived item tag filter
emma-sg Oct 7, 2025
38430a2
fix archived item tag filter type change not dispatching event
emma-sg Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 22 additions & 18 deletions frontend/src/features/archived-items/archived-item-state-filter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
state,
} from "lit/decorators.js";
import { repeat } from "lit/directives/repeat.js";
import { isEqual } from "lodash";
import { isFocusable } from "tabbable";

import { CrawlStatus } from "./crawl-status";
Expand Down Expand Up @@ -52,14 +53,8 @@ export class ArchivedItemStateFilter extends BtrixElement {

private readonly fuse = new Fuse<CrawlState>(finishedCrawlStates);

@state()
private get selectedStates() {
return Array.from(this.selected.entries())
.filter(([_tag, selected]) => selected)
.map(([tag]) => tag);
}

private selected = new Map<CrawlState, boolean>();
@state({ hasChanged: isEqual })
selected = new Map<CrawlState, boolean>();

protected willUpdate(changedProperties: PropertyValues<this>): void {
if (changedProperties.has("states")) {
Expand All @@ -71,6 +66,22 @@ export class ArchivedItemStateFilter extends BtrixElement {
}
}

protected updated(changedProperties: PropertyValues<this>): void {
if (changedProperties.has("selected")) {
this.dispatchEvent(
new CustomEvent<
BtrixChangeEvent<ChangeArchivedItemStateEventDetails>["detail"]
>("btrix-change", {
detail: {
value: Array.from(this.selected.entries())
.filter(([_tag, selected]) => selected)
.map(([tag]) => tag),
},
}),
);
}
}

render() {
const options = this.searchString
? this.fuse.search(this.searchString)
Expand All @@ -87,14 +98,6 @@ export class ArchivedItemStateFilter extends BtrixElement {
}}
@sl-after-hide=${() => {
this.searchString = "";

this.dispatchEvent(
new CustomEvent<
BtrixChangeEvent<ChangeArchivedItemStateEventDetails>["detail"]
>("btrix-change", {
detail: { value: this.selectedStates },
}),
);
}}
>
${this.states?.length
Expand Down Expand Up @@ -250,8 +253,9 @@ export class ArchivedItemStateFilter extends BtrixElement {
@sl-change=${async (e: SlChangeEvent) => {
const { checked, value } = e.target as SlCheckbox;

this.selected.set(value as CrawlState, checked);
this.requestUpdate("selectedStates");
this.selected = new Map(
this.selected.set(value as CrawlState, checked),
);
}}
>
${repeat(
Expand Down
47 changes: 24 additions & 23 deletions frontend/src/features/archived-items/archived-item-tag-filter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
state,
} from "lit/decorators.js";
import { repeat } from "lit/directives/repeat.js";
import { isEqual } from "lodash";
import { isFocusable } from "tabbable";

import { BtrixElement } from "@/classes/BtrixElement";
Expand Down Expand Up @@ -56,17 +57,11 @@ export class ArchivedItemTagFilter extends BtrixElement {
keys: ["tag"],
});

@state()
private get selectedTags() {
return Array.from(this.selected.entries())
.filter(([_tag, selected]) => selected)
.map(([tag]) => tag);
}

private selected = new Map<string, boolean>();
@state({ hasChanged: isEqual })
selected = new Map<string, boolean>();

@state()
private type: "and" | "or" = "or";
type: "and" | "or" = "or";

protected willUpdate(changedProperties: PropertyValues<this>): void {
if (changedProperties.has("tags")) {
Expand All @@ -78,6 +73,25 @@ export class ArchivedItemTagFilter extends BtrixElement {
}
}

protected updated(changedProperties: PropertyValues<this>): void {
if (changedProperties.has("selected") || changedProperties.has("type")) {
const selectedTags = Array.from(this.selected.entries())
.filter(([_tag, selected]) => selected)
.map(([tag]) => tag);
this.dispatchEvent(
new CustomEvent<
BtrixChangeEvent<ChangeArchivedItemTagEventDetails>["detail"]
>("btrix-change", {
detail: {
value: selectedTags.length
? { tags: selectedTags, type: this.type }
: undefined,
},
}),
);
}
}

private readonly orgTagsTask = new Task(this, {
task: async () => {
const { tags } = await this.api.fetch<WorkflowTags>(
Expand Down Expand Up @@ -105,18 +119,6 @@ export class ArchivedItemTagFilter extends BtrixElement {
}}
@sl-after-hide=${() => {
this.searchString = "";

this.dispatchEvent(
new CustomEvent<
BtrixChangeEvent<ChangeArchivedItemTagEventDetails>["detail"]
>("btrix-change", {
detail: {
value: this.selectedTags.length
? { tags: this.selectedTags, type: this.type }
: undefined,
},
}),
);
}}
>
${this.tags?.length
Expand Down Expand Up @@ -304,8 +306,7 @@ export class ArchivedItemTagFilter extends BtrixElement {
@sl-change=${async (e: SlChangeEvent) => {
const { checked, value } = e.target as SlCheckbox;

this.selected.set(value, checked);
this.requestUpdate("selectedTags");
this.selected = new Map(this.selected.set(value, checked));
}}
>
${repeat(
Expand Down
54 changes: 25 additions & 29 deletions frontend/src/features/crawl-workflows/workflow-profile-filter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
state,
} from "lit/decorators.js";
import { repeat } from "lit/directives/repeat.js";
import { isEqual } from "lodash";
import queryString from "query-string";
import { isFocusable } from "tabbable";

Expand Down Expand Up @@ -57,7 +58,8 @@ export class WorkflowProfileFilter extends BtrixElement {
keys: ["id", "name", "description", "origins"],
});

private selected = new Map<string, boolean>();
@state({ hasChanged: isEqual })
selected = new Map<string, boolean>();

protected willUpdate(changedProperties: PropertyValues<this>): void {
if (changedProperties.has("profiles")) {
Expand All @@ -69,6 +71,26 @@ export class WorkflowProfileFilter extends BtrixElement {
}
}

protected updated(changedProperties: PropertyValues<this>): void {
if (changedProperties.has("selected")) {
const selectedProfiles = [];

for (const [profile, value] of this.selected) {
if (value) {
selectedProfiles.push(profile);
}
}

this.dispatchEvent(
new CustomEvent<BtrixChangeEvent["detail"]>("btrix-change", {
detail: {
value: selectedProfiles.length ? selectedProfiles : undefined,
},
}),
);
}
}

private readonly profilesTask = new Task(this, {
task: async () => {
const query = queryString.stringify(
Expand Down Expand Up @@ -105,22 +127,6 @@ export class WorkflowProfileFilter extends BtrixElement {
}}
@sl-after-hide=${() => {
this.searchString = "";

const selectedProfiles = [];

for (const [profile, value] of this.selected) {
if (value) {
selectedProfiles.push(profile);
}
}

this.dispatchEvent(
new CustomEvent<BtrixChangeEvent["detail"]>("btrix-change", {
detail: {
value: selectedProfiles.length ? selectedProfiles : undefined,
},
}),
);
}}
>
${this.profiles?.length
Expand Down Expand Up @@ -160,17 +166,7 @@ export class WorkflowProfileFilter extends BtrixElement {
this.checkboxes.forEach((checkbox) => {
checkbox.checked = false;
});

this.dispatchEvent(
new CustomEvent<BtrixChangeEvent["detail"]>(
"btrix-change",
{
detail: {
value: undefined,
},
},
),
);
this.selected = new Map();
}}
>${msg("Clear")}</sl-button
>`
Expand Down Expand Up @@ -343,7 +339,7 @@ export class WorkflowProfileFilter extends BtrixElement {
@sl-change=${async (e: SlChangeEvent) => {
const { checked, value } = e.target as SlCheckbox;

this.selected.set(value, checked);
this.selected = new Map(this.selected.set(value, checked));
}}
>
${repeat(
Expand Down
Loading
Loading