yuris/titik-gambut-next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat(map): burn severity split-pane comparison slider #138

Merged
yuris-bot merged 1 commit from feat/split-compare-slider into main 2026-10-16 05:12:19 +00:00
Conversation 0 Commits 1 Files changed 3 +351
yuris commented 2026-10-16 05:09:06 +00:00
Owner
Copy link

Summary

Implements Issue 75: interactive draggable split-pane comparison slider (split-compare-slider.tsx) to contrast pre-fire basemap imagery against post-fire NBR burn scar overlays in MapLibre WebGL view.

Principles applied

  • principle-model-the-domain: Modeled horizontal split percentage clamped within 0 to 100 with CSS inset clip-path generators for pre-fire and post-fire panes.
  • principle-boundary-discipline: Validated pointer capture and throttled drag updates using requestAnimationFrame for smooth 60fps interaction across touch and mouse events.
  • principle-subtract-before-you-add: Reused GPU-accelerated CSS clipPath and native HTML pointer events without external split-pane libraries.
  • principle-test-behavior-not-implementation: Tested observable DOM structure, accessibility slider attributes, pane badges, and clip-path generators with literal assertions.
  • principle-prove-it-works: Verified clean vp check, 59 passed test files (388 passed tests), and production Next.js build.

Playbook

  • skill://poteto-mode/playbooks/feature.md

Impact

  • For the consumer: Forest and peatland fire analysts can interactively drag a vertical divider across the map to directly compare pristine pre-fire terrain with post-fire NBR burn scar severity.
  • For the maintainer: Zero-dependency slider control running on GPU-backed standard clipPath and native PointerEvents with keyboard accessibility.

Closes #75

### Summary Implements Issue 75: interactive draggable split-pane comparison slider (`split-compare-slider.tsx`) to contrast pre-fire basemap imagery against post-fire NBR burn scar overlays in MapLibre WebGL view. ### Principles applied - `principle-model-the-domain`: Modeled horizontal split percentage clamped within 0 to 100 with CSS inset clip-path generators for pre-fire and post-fire panes. - `principle-boundary-discipline`: Validated pointer capture and throttled drag updates using `requestAnimationFrame` for smooth 60fps interaction across touch and mouse events. - `principle-subtract-before-you-add`: Reused GPU-accelerated CSS `clipPath` and native HTML pointer events without external split-pane libraries. - `principle-test-behavior-not-implementation`: Tested observable DOM structure, accessibility slider attributes, pane badges, and clip-path generators with literal assertions. - `principle-prove-it-works`: Verified clean vp check, 59 passed test files (388 passed tests), and production Next.js build. ### Playbook - `skill://poteto-mode/playbooks/feature.md` ### Impact - **For the consumer**: Forest and peatland fire analysts can interactively drag a vertical divider across the map to directly compare pristine pre-fire terrain with post-fire NBR burn scar severity. - **For the maintainer**: Zero-dependency slider control running on GPU-backed standard clipPath and native PointerEvents with keyboard accessibility. Closes #75
feat(map): burn severity split-pane comparison slider
All checks were successful
CI / Verify Quality & Build (pull_request) Successful in 2m18s
Details
1e545b9c5e
yuris-bot approved these changes 2026-10-16 05:12:08 +00:00
yuris-bot left a comment
Copy link

6-Axis Review: PR #138 (feat/split-compare-slider)

Executed Playbook: skill://poteto-mode/playbooks/shipping.md

Principles Applied:

  • principle-model-the-domain: Modeled horizontal comparison split geometry using clampPosition bounds checking (0% to 100%) and CSS inset clip-path generators (getRightPaneClipPath, getLeftPaneClipPath) for pre-fire basemap and post-fire NBR burn scar overlays.
  • principle-boundary-discipline: Throttled pointer and mouse drag updates via requestAnimationFrame with pointer capture boundaries (setPointerCapture / releasePointerCapture) to prevent event dropping outside container bounds.
  • principle-subtract-before-you-add: Leveraged native browser Pointer Events, CSS clip paths, and keyboard accessible slider roles without introducing third-party slider or split-pane libraries.
  • principle-test-behavior-not-implementation: Tested mathematical boundary edge cases (clamping negative numbers, >100 values, and NaN handling), clip-path string formatting, DOM accessibility attributes (role="slider", aria-valuenow, aria-valuemin, aria-valuemax), custom labels, and toggle visibility.
  • principle-prove-it-works: Verified execution against Forgejo Actions CI run 225 (successful in 2m18s), vp check clean across 339 files, tsc --noEmit clean, and all 59 test files passing (388 tests).

Gate 1: Mechanical Verification Gate (node scripts/verify-pr.mjs 138)

  • Title: feat(map): burn severity split-pane comparison slider (passes Conventional Commits and branch rules).
  • CI: Forgejo Actions Run 225 succeeded on commit 1e545b9c5effd5a45b8516b57eb15d7ebc1cad44.
  • Linter & Formatter: vp check reports 0 warnings/errors across 170 files, 339 files formatted cleanly.
  • Typecheck: tsc --noEmit exited 0 with 0 errors.
  • Unit Tests: 59 test suites passed (388 total tests).

Gate 2: Ponytail Audit (skill://ponytail-review, skill://ponytail-audit)

  • Focused diff adding 267 lines of production code and 84 lines of unit tests across split-compare-slider.tsx, split-compare-slider.test.tsx, and map-view.tsx.
  • Uses native React hooks, Pointer Events API, standard SVG icons, and Tailwind CSS.
  • Zero dead code or unused dependencies.
  • Verdict: Lean already. Ship. Net: 0 lines to cut.

Gate 3: Doubt-Driven Analysis (skill://doubt-driven-development)

  • Cross-model verification: Skipped (non-interactive automated review mode).
  • Examined 60fps drag performance: RAF loop cancels pending animation frames before scheduling new ones.
  • Keyboard accessibility: Implemented ArrowLeft / ArrowRight (2% step or 10% with Shift), Home (0%), and End (100%) keys.
  • SSR safety: Pure math helpers (clampPosition, getRightPaneClipPath) work synchronously and server-render cleanly.

Gate 4: Security & Hardening (skill://security-and-hardening)

  • No secrets or credentials committed.
  • No dynamic execution (eval) or raw HTML rendering (dangerouslySetInnerHTML).

Gate 5: Code Quality & Simplification (skill://code-review-and-quality, skill://code-simplification)

  • Satisfies all acceptance criteria for Forgejo Issue #75:
    • Draggable divider splits map canvas smoothly.
    • Left pane displays pre-fire state; right pane displays NBR burn severity.
    • Supports touch gestures and mouse dragging.
    • Mounts in MapView with toggle button Split NBR.

Gate 6: Poteto Shipping Protocol (skill://poteto-mode/playbooks/shipping.md)

  • Clean commit based on main at 160a7a7.
  • CI green, tests green, formatting clean.
  • Ready for squash-merge into main.

Verdict: APPROVE

## 6-Axis Review: PR #138 (`feat/split-compare-slider`) ### Executed Playbook: `skill://poteto-mode/playbooks/shipping.md` ### Principles Applied: - `principle-model-the-domain`: Modeled horizontal comparison split geometry using `clampPosition` bounds checking (0% to 100%) and CSS `inset` clip-path generators (`getRightPaneClipPath`, `getLeftPaneClipPath`) for pre-fire basemap and post-fire NBR burn scar overlays. - `principle-boundary-discipline`: Throttled pointer and mouse drag updates via `requestAnimationFrame` with pointer capture boundaries (`setPointerCapture` / `releasePointerCapture`) to prevent event dropping outside container bounds. - `principle-subtract-before-you-add`: Leveraged native browser Pointer Events, CSS clip paths, and keyboard accessible slider roles without introducing third-party slider or split-pane libraries. - `principle-test-behavior-not-implementation`: Tested mathematical boundary edge cases (clamping negative numbers, >100 values, and NaN handling), clip-path string formatting, DOM accessibility attributes (`role="slider"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`), custom labels, and toggle visibility. - `principle-prove-it-works`: Verified execution against Forgejo Actions CI run 225 (successful in 2m18s), `vp check` clean across 339 files, `tsc --noEmit` clean, and all 59 test files passing (388 tests). --- ### Gate 1: Mechanical Verification Gate (`node scripts/verify-pr.mjs 138`) - Title: `feat(map): burn severity split-pane comparison slider` (passes Conventional Commits and branch rules). - CI: Forgejo Actions Run 225 succeeded on commit `1e545b9c5effd5a45b8516b57eb15d7ebc1cad44`. - Linter & Formatter: `vp check` reports 0 warnings/errors across 170 files, 339 files formatted cleanly. - Typecheck: `tsc --noEmit` exited 0 with 0 errors. - Unit Tests: 59 test suites passed (388 total tests). ### Gate 2: Ponytail Audit (`skill://ponytail-review`, `skill://ponytail-audit`) - Focused diff adding 267 lines of production code and 84 lines of unit tests across `split-compare-slider.tsx`, `split-compare-slider.test.tsx`, and `map-view.tsx`. - Uses native React hooks, Pointer Events API, standard SVG icons, and Tailwind CSS. - Zero dead code or unused dependencies. - **Verdict: Lean already. Ship. Net: 0 lines to cut.** ### Gate 3: Doubt-Driven Analysis (`skill://doubt-driven-development`) - Cross-model verification: Skipped (non-interactive automated review mode). - Examined 60fps drag performance: RAF loop cancels pending animation frames before scheduling new ones. - Keyboard accessibility: Implemented `ArrowLeft` / `ArrowRight` (2% step or 10% with Shift), `Home` (0%), and `End` (100%) keys. - SSR safety: Pure math helpers (`clampPosition`, `getRightPaneClipPath`) work synchronously and server-render cleanly. ### Gate 4: Security & Hardening (`skill://security-and-hardening`) - No secrets or credentials committed. - No dynamic execution (`eval`) or raw HTML rendering (`dangerouslySetInnerHTML`). ### Gate 5: Code Quality & Simplification (`skill://code-review-and-quality`, `skill://code-simplification`) - Satisfies all acceptance criteria for Forgejo Issue #75: - Draggable divider splits map canvas smoothly. - Left pane displays pre-fire state; right pane displays NBR burn severity. - Supports touch gestures and mouse dragging. - Mounts in `MapView` with toggle button `Split NBR`. ### Gate 6: Poteto Shipping Protocol (`skill://poteto-mode/playbooks/shipping.md`) - Clean commit based on `main` at `160a7a7`. - CI green, tests green, formatting clean. - Ready for squash-merge into `main`. --- **Verdict: APPROVE**
yuris-bot deleted branch feat/split-compare-slider 2026-10-16 05:12:19 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
yuris-bot
Labels
Clear labels   
backend
Backend task

  
frontend
Frontend task

No labels
backend
frontend
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
yuris/titik-gambut-next!138
No description provided.