brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

Explore: opacity slider heatmap-only; lines mode width-only at 100% opacity

Browse Source
This commit is contained in:
Davide Scaini
2026-05-14 16:07:57 +02:00
parent 20bb5bfb60
commit 2b9e080b4c
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/Explore.svelte
+12 -6
View File
@@ -153,7 +153,13 @@
function _updateHeatPaint(width: number, opacityPct: number) {
if (!map) return;
const p = _heatPaint(width, opacityPct);
for (const id of ['explore-lines', 'explore-heat-global', ...HEAT_TYPES.map(t => `explore-heat-${t}`)]) {
// Lines layer: width from slider, opacity always full
if (map.getLayer('explore-lines')) {
map.setPaintProperty('explore-lines', 'line-width', p['line-width']);
map.setPaintProperty('explore-lines', 'line-opacity', 1);
}
// Heat layers: both width and opacity from sliders
for (const id of ['explore-heat-global', ...HEAT_TYPES.map(t => `explore-heat-${t}`)]) {
if (!map.getLayer(id)) continue;
map.setPaintProperty(id, 'line-width', p['line-width']);
map.setPaintProperty(id, 'line-opacity', p['line-opacity']);
@@ -324,17 +330,17 @@
<button class="pill small" class:active={heatmapMode === 'global'} onclick={() => heatmapMode = 'global'}>Global</button>
<button class="pill small" class:active={heatmapMode === 'bytype'} onclick={() => heatmapMode = 'bytype'}>By type</button>
</div>
<div class="slider-row">
<span class="slider-label">Opacity</span>
<input type="range" min="3" max="30" step="1" class="slider" bind:value={heatOpacityPct} />
<span class="slider-val">{heatOpacityPct}%</span>
</div>
{/if}
<div class="slider-row">
<span class="slider-label">Width</span>
<input type="range" min="2" max="12" step="1" class="slider" bind:value={heatWidth} />
<span class="slider-val">{heatWidth}</span>
</div>
<div class="slider-row">
<span class="slider-label">Opacity</span>
<input type="range" min="3" max="30" step="1" class="slider" bind:value={heatOpacityPct} />
<span class="slider-val">{heatOpacityPct}%</span>
</div>
</section>
<!-- Stats -->