Skip to content

Default & Single-color Raster Styles #312

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

Open
annehaley wants to merge 1 commit into
base: views
Choose a base branch
from
Open

Default & Single-color Raster Styles #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions uvdat/core/models/styles.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,13 @@ def save_style_configs(self, style_spec):
color_config.visible = color_spec.get("visible", True)
color_config.use_feature_props = color_spec.get("use_feature_props", True)
single_color = color_spec.get("single_color")
colormap_spec = color_spec.get("colormap")
if single_color is not None:
color_config.single_color = single_color
with contextlib.suppress(ColorConfig.colormap.RelatedObjectDoesNotExist):
color_config.colormap.delete()
else:
elif colormap_spec is not None:
color_config.single_color = ""
colormap_spec = color_spec.get("colormap")
colormap = Colormap.objects.get(id=colormap_spec.get("id"))
map_range = colormap_spec.get("range") or [None, None]
colormap_config_args = {
Expand Down
61 changes: 52 additions & 9 deletions web/src/components/sidebars/LayerStyle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ function selectStyle(style: LayerStyle) {
function fetchRasterBands() {
if (!currentStyleSpec.value) return
if (showRasterOptions.value) {
setGroupColorMode('all', 'colormap')
setGroupColorMode('all', 'none')
if (frames.value.length) {
if (currentFrame.value?.raster) {
rasterBands.value = currentFrame.value.raster.metadata.bands;
Expand Down Expand Up @@ -209,7 +209,7 @@ function setCurrentColorGroups(different: boolean | null) {
currentStyleSpec.value.colors = availableGroups.value.map((name) => {
return { ...all, visible: true, use_feature_props: true, name }
})
availableGroups.value.forEach((name) => setGroupColorMode(name, 'colormap'))
availableGroups.value.forEach((name) => setGroupColorMode(name, 'none'))
} else if (showVectorOptions.value) {
currentStyleSpec.value.colors = availableGroups.value.map((name) => {
return { ...JSON.parse(JSON.stringify(all)), visible: true, name }
Expand All @@ -228,7 +228,7 @@ function setCurrentColorGroups(different: boolean | null) {
} else {
currentStyleSpec.value.colors = [...defaultStyle.colors]
}
if (showRasterOptions.value) setGroupColorMode('all', 'colormap')
if (showRasterOptions.value) setGroupColorMode('all', 'none')
currentGroups.value['color'] = 'all'
}
}
Expand All @@ -250,8 +250,10 @@ function setGroupColorMode(groupName: string, colorMode: string) {
},
single_color: undefined,
}
} else if (!c.single_color) {
} else if (colorMode === 'single_color' && !c.single_color) {
return {...c, colormap: undefined, single_color: styleStore.getDefaultColor(props.layer.id)}
} else if (colorMode === 'none') {
return {...c, colormap: undefined, single_color: undefined}
}
}
return c
Expand Down Expand Up @@ -523,7 +525,7 @@ onMounted(resetCurrentStyle)
/>
</template>
<v-card v-if="currentStyleSpec" class="layer-style-card mt-5" color="background" width="510">
<div class="px-4 py-2" style="background-color: rgb(var(--v-theme-surface)); height: 40px">
<div class="px-4 py-2" style="background-color: rgb(var(--v-theme-surface)); min-height: 40px">
Edit Style
<span class="secondary-text">(Layer: {{ layer.name }})</span>

Expand Down Expand Up @@ -659,6 +661,47 @@ onMounted(resetCurrentStyle)
</td>
</tr>
<tr>
<td><v-label :class="group.visible ? '' : 'helper-text'">Color scheme</v-label></td>
<td>
<div class="d-flex" style="align-items: center;">
<v-btn-toggle
:model-value="group.single_color ? 'single_color' : group.colormap ? 'colormap' : 'none'"
density="compact"
variant="outlined"
divided
mandatory
:disabled="!group.visible"
@update:model-value="(value: string) => setGroupColorMode(group.name, value)"
>
<v-btn :value="'none'">None</v-btn>
<v-btn :value="'single_color'">1 Color</v-btn>
<v-btn :value="'colormap'">Colormap</v-btn>
</v-btn-toggle>
<v-menu
v-if="group.single_color"
:disabled="!group.visible"
:close-on-content-click="false"
open-on-hover
location="end"
>
<template v-slot:activator="{ props }">
<div
v-bind="props"
class="color-square"
:style="{backgroundColor: group.single_color, opacity: group.visible ? 1 : 0.5}"
></div>
</template>
<v-card>
<v-color-picker
v-model:model-value="group.single_color"
mode="rgb"
/>
</v-card>
</v-menu>
</div>
</td>
</tr>
<tr v-if="group.colormap">
<td><v-label :class="group.visible ? '' : 'helper-text'">Colormap</v-label></td>
<td>
<v-select
Expand Down Expand Up @@ -722,7 +765,7 @@ onMounted(resetCurrentStyle)
</v-select>
</td>
</tr>
<tr>
<tr v-if="group.colormap">
<td><v-label :class="group.visible && getColormap(group.colormap)?.markers ? '' : 'helper-text'">Colormap class</v-label></td>
<td>
<v-btn-toggle
Expand All @@ -739,7 +782,7 @@ onMounted(resetCurrentStyle)
</v-btn-toggle>
</td>
</tr>
<tr>
<tr v-if="group.colormap">
<td><v-label :class="group.visible && getColormap(group.colormap)?.markers && group.colormap?.discrete ? '' : 'helper-text'">No. of colors</v-label></td>
<td>
<SliderNumericInput
Expand All @@ -751,7 +794,7 @@ onMounted(resetCurrentStyle)
/>
</td>
</tr>
<tr>
<tr v-if="group.colormap">
<td><v-label :class="group.visible && getColormap(group.colormap)?.markers ? '' : 'helper-text'">Range</v-label></td>
<td>
<SliderNumericInput
Expand All @@ -764,7 +807,7 @@ onMounted(resetCurrentStyle)
/>
</td>
</tr>
<tr>
<tr v-if="group.colormap">
<td>
<v-label :class="group.visible && getColormap(group.colormap)?.markers ? '' : 'helper-text'">Clamping</v-label>
<v-icon
Expand Down
35 changes: 8 additions & 27 deletions web/src/store/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,21 +115,22 @@ function getRasterTilesQuery(styleSpec: StyleSpec, colormaps: Colormap[]) {
(marker) => marker.color
)
}
} else if (colorSpec.single_color) {
colorQuery.palette = colorSpec.single_color
}
if (colorSpec.name === 'all') {
if (colorSpec.colormap && colorSpec.visible) query = colorQuery
if (colorSpec.visible) query = colorQuery
} else {
if (!query.bands) query.bands = []
colorQuery.band = colorSpec.name.replace('Band ', '')
if (colorSpec.colormap && colorSpec.visible) query.bands.push(colorQuery)
if (colorSpec.visible) query.bands.push(colorQuery)
}
})
styleSpec.filters.forEach((f) => {
if (f.apply && f.filter_by && f.include && f.list?.length === 1) {
query[f.filter_by] = f.list[0]
}
})
if (!Object.keys(query).length) return undefined
return query;
}

Expand Down Expand Up @@ -336,17 +337,6 @@ export const useStyleStore = defineStore('style', () => {
}

function getDefaultStyleSpec(raster: RasterData | null | undefined, layerId: number): StyleSpec {
let range: [number, number] | undefined;
let absMin: number | undefined, absMax: number | undefined;
if (raster) {
Object.values(raster.metadata.bands).forEach(({ min, max }) => {
if (!absMin || min < absMin) absMin = min;
if (!absMax || max < absMax) absMax = max;
})
}
if (absMin !== undefined && absMax !== undefined) {
range = [Math.floor(absMin), Math.ceil(absMax)] as [number, number];
}
return {
opacity: 1,
default_frame: 0,
Expand All @@ -356,13 +346,7 @@ export const useStyleStore = defineStore('style', () => {
visible: true,
use_feature_props: true,
single_color: raster ? undefined : getDefaultColor(layerId),
colormap: raster ? {
range,
color_by: 'value',
discrete: false,
n_colors: 5,
null_color: 'transparent'
} : undefined,
colormap: undefined,
}
],
sizes: [
Expand Down Expand Up @@ -476,14 +460,11 @@ export const useStyleStore = defineStore('style', () => {
const source = map.getSource(mapLayer.source) as RasterTileSource;
const sourceURL = mapStore.rasterSourceTileURLs[mapLayer.source];
if (source && sourceURL) {
const oldQuery = new URLSearchParams(sourceURL.split('?')[1]);
const newQueryParams: { projection: string, style?: string } = { projection: 'epsg:3857' };
if (rasterTilesQuery) newQueryParams.style = JSON.stringify(rasterTilesQuery);
newQueryParams.style = JSON.stringify(rasterTilesQuery);
const newQuery = new URLSearchParams(newQueryParams);
if (newQuery.toString() !== oldQuery.toString()) {
tileURL = sourceURL.split('?')[0] + '?' + newQuery.toString();
return { paint, tileURL }
}
tileURL = sourceURL.split('?')[0] + '?' + newQuery.toString();
return { paint, tileURL }
}
}
return { paint };
Expand Down