feat: implement three-view synchronization with unified filter state (#132)#334
Open
feat: implement three-view synchronization with unified filter state (#132)#334
Conversation
…to epoch numbers Phase 1: Create StacBrowser directory structure, types, CSS layout, and barrel export. Phase 2a: Refactor TimeFilter/TimeRange/TemporalSlice from TimeInstant objects to plain epoch numbers (Review Decision 5C). Updates all consumers across session-state, VS Code extension, web-shell, and tests. Backward-compatible persistence loading. https://claude.ai/code/session_013SiU1dTVW7vtfwgMEcANNV
Add viewportToBounds utility to convert 4-corner viewport polygons to axis-aligned bounds with degenerate viewport guard (Review Decision 7D). Create BrowserFilterSlice Zustand slice managing metadata filter axis, spatial/temporal filter activation flags. Register in session store. https://claude.ai/code/session_013SiU1dTVW7vtfwgMEcANNV
Remove CatalogOverview component directory entirely (Review Decision 6A). Move CatalogOverviewItem type to filter-engine/types.ts as canonical location. Update all consumer imports: ExerciseListView, timeline-helpers, filter-engine. Replace CatalogOverview with StacBrowser in barrel exports, VS Code webview, and web-shell App. Update mock service to produce StacBrowserItem. https://claude.ai/code/session_013SiU1dTVW7vtfwgMEcANNV
Implement useBrowserFilter composition hook computing intersection of metadata, spatial, and temporal filter axes with reference-equality memoization (Review Decision 9A). Implement StacBrowser component composing FilterBar + ExerciseListView with placeholder map/timeline. Wire FilterBar onFilteredItems to metadata filter state. https://claude.ai/code/session_013SiU1dTVW7vtfwgMEcANNV
…o-results filtering - Add 28 tests covering spatial filtering (T059-T061), temporal filtering (T067-T069), combined 3-axis AND composition (T074-T076), and zero-results handling (T080-T082) - Create StacBrowser Storybook story with mock data (T057) - Fix unused colorMap lint error in StacBrowser - Fix vscode sessionManager tests for epoch-based TimeFilter All 910 component tests and 335 vscode tests pass. https://claude.ai/code/session_013SiU1dTVW7vtfwgMEcANNV
…nify on StacBrowserItem - Fold CatalogOverviewItem fields into StacBrowserItem (standalone interface) - ExerciseListItem now extends StacBrowserItem (adds only trackDataHref) - Remove CatalogOverviewItem re-export from index.ts - Remove `as unknown as` cast in StacBrowser.tsx (proper type flow) - Fix catalogOverview.tsx to use StacBrowserItem directly - Update timeline-helpers to use StacBrowserItem - Add missing fields (featureTags, collection, modified) to mock fixtures No backward compatibility shims — we're not in production. https://claude.ai/code/session_013SiU1dTVW7vtfwgMEcANNV
- Create test-summary.md with YAML front matter (1248 tests, 0 failed) - Create usage-example.md demonstrating filter-narrow-discover workflow - Create StacBrowser Playwright E2E test (theme variants + interaction) - Mark Phase 4-7 tasks complete in tasks.md (all verified passing) https://claude.ai/code/session_013SiU1dTVW7vtfwgMEcANNV
🚀 Preview DeploymentsCode Server (Full VS Code Extension)Browser-based VS Code with the Debrief extension and sample data pre-installed. Web Shell (Standalone App)Use this for Playwright testing and demos - runs outside Storybook. Storybook (Component Library)Browse all components, stories, and documentation. All Links
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the StacBrowser component with synchronized filter state across four views (filter bar, exercise list, map, and timeline). Replaces the legacy CatalogOverview component with a new architecture that unifies metadata, spatial, and temporal filtering through a composition hook.
Key Changes
New Components & Hooks
shared/components/src/StacBrowser/StacBrowser.tsx): Top-level orchestrator composing FilterBar, ExerciseListView, MapView, and TimelineView with synchronized filter stateshared/components/src/StacBrowser/useBrowserFilter.ts): Composition hook implementing three-axis filtering (metadata, spatial, temporal) with reference-equality memoization to prevent unnecessary re-rendersservices/session-state/src/store/slices/browser-filter.ts): Zustand slice managing metadata filter state in session storeType System Updates
BrowserFilterSlicetypes (services/session-state/src/types/browser-filter.ts) for metadata filter state managementStacBrowserItemtype in filter-engine to replace dependency on removedCatalogOverviewItemStacBrowserPropsandUseBrowserFilterOptionstypes for new componentsTemporal Refactoring
TimeFilterto use plain epoch numbers ({ start: number; end: number }) instead ofTimeInstantobjects (review decision 5C)TemporalSliceand related functions to work with epoch-based time representationTimeInstantas utility type for backward compatibility inFeatureSelection.timestampRemoved Components
CatalogOverview.tsx,CatalogOverview.stories.tsx,CatalogOverview.test.tsx,CatalogOverview.cssCatalogOverview/types.ts(replaced byStacBrowserItem)CatalogOverview/__tests__/timeline.test.ts(logic moved to shared utils)Testing & Documentation
useBrowserFilter(27 tests covering metadata, spatial, temporal filtering)BrowserFilterSlicestate managementIntegration Updates
StacBrowserinstead ofCatalogOverviewapps/vscode/src/webview/web/catalogOverview.tsxto use new StacBrowserapps/web-shell/src/App.tsxto use new StacBrowserStacBrowserItemtypeUtility Enhancements
viewportToBoundshelper function toshared/components/src/utils/bounds.tsfor viewport polygon conversionImplementation Details
Filter Composition: The
useBrowserFilterhook implements a three-axis filter intersection:metadataFilteredIdssetItems without bbox or temporal data pass their respective filters (permissive behavior for incomplete data).
Memoization Strategy: Uses reference-equality memoization (Review Decision 9A) to return the same array reference when filter results are unchanged, preventing unnecessary child re-renders.
State Architecture: Metadata filtering is managed by
BrowserFilterSlicein session-state; spatial and temporal filters are read from existingSpatialSliceandTemporalSlicerespectively, enabling unified state management across the application.https://claude.ai/code/session_013SiU1dTVW7vtfwgMEcANNV