Skip to content
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

Set up framework for UI filters, add Performer filter #122

Merged
merged 12 commits into from
Dec 7, 2022
Merged

Set up framework for UI filters, add Performer filter #122

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a37ba56
Accept query params in site evaluations REST function
mvandenburgh Nov 29, 2022
a1f9e7d
Return performer as a vector tile attribute
mvandenburgh Nov 29, 2022
f65fec3
Return list of performers in vector tile endpoint
mvandenburgh Nov 30, 2022
8642f6c
Regenerate openapi types
mvandenburgh Nov 30, 2022
2e9b197
Add `filters` object to store
mvandenburgh Nov 29, 2022
2e1a293
Add type annotation for the store
mvandenburgh Nov 29, 2022
d4144f9
Accept arbitrary filters for MapLibre polygons
mvandenburgh Nov 29, 2022
3ef9515
Install DaisyUI
mvandenburgh Nov 30, 2022
3cd4311
Add UI for filtering by performer
mvandenburgh Nov 30, 2022
4c93455
Merge branch 'phase-ii' into filter-ui
mvandenburgh Nov 30, 2022
c16b9d0
fix linting
mvandenburgh Dec 6, 2022
a754a07
Merge branch 'phase-ii' into filter-ui
mvandenburgh Dec 6, 2022
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
24 changes: 12 additions & 12 deletions vue/src/components/MapLibre.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ onMounted(() => {
map.value = markRaw(
new Map({
container: mapContainer.value,
style: style(state.timestamp),
style: style(state.timestamp, state.filters),
bounds: [
[state.bbox.xmin, state.bbox.ymin],
[state.bbox.xmax, state.bbox.ymax],
Expand All @@ -51,17 +51,17 @@ onUnmounted(() => {
map.value?.remove();
});

watch(
() => state.timestamp,
(val) => {
const siteFilter = buildSiteFilter(val);
const observationFilter = buildObservationFilter(val);
setFilter("sites-outline", siteFilter);
setFilter("observations-fill", observationFilter);
setFilter("observations-outline", observationFilter);
setFilter("observations-text", observationFilter);
}
);
watch([() => state.timestamp, () => state.filters], () => {
const siteFilter = buildSiteFilter(state.timestamp);
const observationFilter = buildObservationFilter(
state.timestamp,
state.filters
);
setFilter("sites-outline", siteFilter);
setFilter("observations-fill", observationFilter);
setFilter("observations-outline", observationFilter);
setFilter("observations-text", observationFilter);
});

watch(
() => state.bbox,
Expand Down
7 changes: 5 additions & 2 deletions vue/src/mapstyle/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ import {
} from "./rdwatchtiles";
import type { StyleSpecification } from "maplibre-gl";

export const style = (timestamp: number): StyleSpecification => ({
export const style = (
timestamp: number,
filters: Record<string, string>
): StyleSpecification => ({
version: 8,
sources: {
...naturalearthSources,
Expand All @@ -29,6 +32,6 @@ export const style = (timestamp: number): StyleSpecification => ({
},
...naturalearthLayers,
...openmaptilesLayers,
...rdwatchtilesLayers(timestamp),
...rdwatchtilesLayers(timestamp, filters),
],
});
41 changes: 27 additions & 14 deletions vue/src/mapstyle/rdwatchtiles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,26 @@ import type {
} from "maplibre-gl";

export const buildObservationFilter = (
timestamp: number
): FilterSpecification => [
"all",
["<=", ["get", "timemin"], timestamp],
[
"any",
[">", ["get", "timemax"], timestamp],
["==", ["get", "timemin"], ["get", "timemax"]],
],
];
timestamp: number,
filters: Record<string, string>
): FilterSpecification => {
const filter: FilterSpecification = [
"all",
["<=", ["get", "timemin"], timestamp],
[
"any",
[">", ["get", "timemax"], timestamp],
["==", ["get", "timemin"], ["get", "timemax"]],
],
];

// Add any filters set in the UI
Object.entries(filters).forEach(([key, value]) => {
filter.push(["==", ["get", key], value]);
});
Comment on lines +26 to +29
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the core of the filtering framework i attempted to set up. it dynamically generates maplibre filters based on the filters object in the store. Currently, this only allows filtering by equality, which will need to be refactored when we get to filtering by ranges, etc.


return filter;
};

export const buildSiteFilter = (timestamp: number): FilterSpecification => [
"<=",
Expand Down Expand Up @@ -48,7 +58,10 @@ const source: SourceSpecification = {
};
export const sources = { rdwatchtiles: source };

export const layers = (timestamp: number): LayerSpecification[] => [
export const layers = (
timestamp: number,
filters: Record<string, string>
): LayerSpecification[] => [
{
id: "sites-outline",
type: "line",
Expand All @@ -69,7 +82,7 @@ export const layers = (timestamp: number): LayerSpecification[] => [
"fill-color": observationColor,
"fill-opacity": 0.05,
},
filter: buildObservationFilter(timestamp),
filter: buildObservationFilter(timestamp, filters),
},
{
id: "observations-outline",
Expand All @@ -80,7 +93,7 @@ export const layers = (timestamp: number): LayerSpecification[] => [
"line-color": observationColor,
"line-width": 2,
},
filter: buildObservationFilter(timestamp),
filter: buildObservationFilter(timestamp, filters),
},
{
id: "observations-text",
Expand All @@ -106,6 +119,6 @@ export const layers = (timestamp: number): LayerSpecification[] => [
paint: {
"text-color": observationColor,
},
filter: buildObservationFilter(timestamp),
filter: buildObservationFilter(timestamp, filters),
},
];