Skip to content

Sequence metadata UI#1905

Merged
dandelany merged 50 commits intodevelopfrom
feat/bryan/sequence-metadata-ui
Apr 21, 2026
Merged

Sequence metadata UI#1905
dandelany merged 50 commits intodevelopfrom
feat/bryan/sequence-metadata-ui

Conversation

@duranb
Copy link
Copy Markdown
Collaborator

@duranb duranb commented Apr 14, 2026

Taken from #1901

___REQUIRES_AERIE_PR___="1807"

Corresponding backend branch NASA-AMMOS/plandev#1807. Closes #1767

Summary

  • Workspace file metadata UI: Added metadata columns (Last Editor, Last Edited, Created By, Created, Version, Read-Only, User Metadata) to the file browser with a column picker, metadata banner in the editor header with a read-only toggle, and a dedicated right-side metadata panel with a user metadata JSON editor (edit/save/cancel flow)
  • Workspace layout refactor: Broke workspace page into separate components - WorkspaceLeftIconRail, WorkspaceRightIconRail, WorkspaceRightPanel, WorkspaceMetadataPanel, FileMetadataBanner, and PanelHeader - with resizable left/right sidebar panels and independent icon rails
  • Tooltip wrapper improvements: Switched SidebarMenuButton and sidebar icon rails to use the shared Tooltip.svelte wrapper for consistent behavior, instant tooltips on sidebar buttons and a fix for tooltips reappearing after click
  • File browser enhancements: Added "Open Folder" context menu action, column visibility toggle via ActivityTableMenu, compact action cell (menu-only, removed inline delete/open buttons), and metadata-aware sorting
  • Editor updates: Added FileMetadataBanner for read-only control and unified the "(Read-only)" label which previously said "Preview Mode" in certain cases.

TODO:

  • UI needs to set user metadata with a "overwrite" flag instead of deep merge option or else user metadata keys will not be deleted when desired. This backend endpoint may not exist yet.

Test plan

  •  Verify metadata columns appear in file browser and can be toggled via column picker
  •  Verify metadata banner shows in editor with correct last-edited info and read-only checkbox
  •  Verify right panel metadata tab shows file metadata fields and user metadata JSON editor (edit/save/cancel)
  •  Verify user metadata editor discards changes on file switch or tab change
  •  Verify sidebar tooltips appear instantly and switch smoothly between buttons
  •  Verify left/right sidebar panels collapse/expand via icon rail buttons and resizable handles
  •  Verify "Open Folder" context menu navigates into the folder in the file browser
  •  Verify read-only toggle updates file metadata and prevents editing when appropriate

AaronPlave and others added 27 commits April 14, 2026 11:45
…arch improvements

- Add CodeMirror-based JSON editor for user metadata in the metadata panel
  with syntax highlighting, validation, and auto-save on blur/file switch
- Add "Open Folder" button in content area and context menu to navigate
  the file browser to a selected folder
- Extend file browser search to match against metadata fields (createdBy,
  lastEditedBy, version, user metadata)
- Move read-only permission handling from editor components to FileMetadataBanner
- Add success toast for read-only status changes
… Auto discard changes when changing tabs or files.
Add EditorView.editable configuration alongside EditorState.readOnly
in SequenceEditor and WorkspaceMetadataPanel components. Both facets
need to be properly configured for CodeMirror to correctly handle
editor editability state changes.

Changes:
- Add EditorView.editable.of() to compartment reconfiguration in both components
- Refactor SequenceEditor readonly logic to use isEditable variable for clarity
- Reorder onReadOnlyChange prop declaration in SequenceEditor

This ensures the editor properly responds to readonly state changes by
configuring both the readOnly state facet and the editable view facet.
Extract duplicate click handler logic into a `togglePanel` function to reduce code duplication in WorkspaceRightIconRail component. The function handles toggling between metadata, command, and dictionary panels, closing the active panel if clicked again or switching to a new panel otherwise.

This improves maintainability by following the DRY principle and makes the component easier to modify in the future.
…anel

- Add explicit type imports (ArgTextDef, TimeTagInfo) from sequence languages
- Declare component variables at top for better organization and clarity
- Simplify timeTagNode reactive statement formatting
- Improve code readability by making variable declarations explicit

This refactoring improves code maintainability by organizing variable
declarations in a clear, conventional pattern at the component's top level.
This fixes a potential race condition where the workspace UI might not reflect the saved state and ensures proper async/await flow in the save operation.
- Add columnShiftResize prop to BulkActionDataGrid and SingleActionDataGrid components
- Create centralized cookie utilities (setCookie, getCookie) with consistent expiration handling
- Implement column state persistence in WorkspaceFileBrowser using cookies
- Move cookie constants to centralized location (constants/cookies.ts)
- Refactor SidebarProvider to use new cookie utilities instead of manual document.cookie
- Add comprehensive test coverage for cookie utility functions

This change improves code maintainability by consolidating cookie management logic and enables users to persist their column resize preferences across sessions.
- Add `hasReadOnlyNodes` prop to track selection of read-only files
- Disable rename and delete operations when read-only files are selected
- Display appropriate error messages for read-only restrictions
- Visually indicate "Move" is disabled (with reduced opacity) while keeping "Copy" available for read-only files
- Update permission checks to consider read-only status alongside existing permissions

This prevents users from accidentally modifying or deleting files that should remain read-only, improving data integrity in the workspace.
@duranb duranb requested a review from a team as a code owner April 14, 2026 19:37
@duranb duranb requested review from AaronPlave and mattdailis April 14, 2026 19:37
@AaronPlave
Copy link
Copy Markdown
Contributor

I'm making a few table and sidebar related tweaks that I'll try to push by monday

The Name column now uses flex:1 exclusively (never converted to fixed width),
so it fills remaining space instantly on panel open/close with no flash.
Metadata columns preserve user-set widths via cookies with suppressSizeToFit.

- Fix "Fit Columns to Available Space" context menu by temporarily overriding
  suppressSizeToFit on resizable columns for explicit user actions
- Add "Reset Column Layout" context menu option to all DataGrid instances,
  with cookie cleanup in the workspace file browser
- Guard ResizeObserver against collapsed containers (width < 50px)
- Preserve Name column flex:1 by stripping width/flex from saved column state
@dandelany dandelany changed the title Sequence metadata UI (use this one) Sequence metadata UI Apr 20, 2026
@dandelany
Copy link
Copy Markdown
Collaborator

Looked at @AaronPlave 's latest change and only one blocker remaining: we want to have both of these be true for the "name" column in the file browser:

  • autofills the space given if not manually-resized
  • saves its size if manually resized by user

Comment thread src/components/ui/DataGrid/DataGrid.svelte Outdated
@dandelany dandelany merged commit a282146 into develop Apr 21, 2026
5 checks passed
@dandelany dandelany deleted the feat/bryan/sequence-metadata-ui branch April 21, 2026 23:03
@dandelany dandelany added the feature New feature or request label Apr 23, 2026
JosephVolosin pushed a commit that referenced this pull request Apr 23, 2026
* add workspace file metadata types, API methods, and fetching

* add workspace file metadata UI — table columns, metadata banner, and read-only support

* workspace panel refactor, metadata API fixes, and sidebar button fix

* extract PanelHeader component from repeated section title styling

* add user metadata editor, open folder navigation, and file browser search improvements

- Add CodeMirror-based JSON editor for user metadata in the metadata panel
  with syntax highlighting, validation, and auto-save on blur/file switch
- Add "Open Folder" button in content area and context menu to navigate
  the file browser to a selected folder
- Extend file browser search to match against metadata fields (createdBy,
  lastEditedBy, version, user metadata)
- Move read-only permission handling from editor components to FileMetadataBanner
- Add success toast for read-only status changes

* Column sizing fixes

* Panel sizing

* Tweak workspace file browse column sizes for compactness

* fix workspace metadata reactivity and type safety improvements

* Right sidebar icon swap for dictionary

* Tweak user metadata input to use explicit edit, save, cancel buttons. Auto discard changes when changing tabs or files.

* Tooltip improvements for workspace sidebar and icon tray

* Refactor

* Prettier

* Test fixes

* fix(sequencing): configure both readOnly and editable facets in editor

Add EditorView.editable configuration alongside EditorState.readOnly
in SequenceEditor and WorkspaceMetadataPanel components. Both facets
need to be properly configured for CodeMirror to correctly handle
editor editability state changes.

Changes:
- Add EditorView.editable.of() to compartment reconfiguration in both components
- Refactor SequenceEditor readonly logic to use isEditable variable for clarity
- Reorder onReadOnlyChange prop declaration in SequenceEditor

This ensures the editor properly responds to readonly state changes by
configuring both the readOnly state facet and the editable view facet.

* refactor(workspace): extract panel toggle logic into reusable function

Extract duplicate click handler logic into a `togglePanel` function to reduce code duplication in WorkspaceRightIconRail component. The function handles toggling between metadata, command, and dictionary panels, closing the active panel if clicked again or switching to a new panel otherwise.

This improves maintainability by following the DRY principle and makes the component easier to modify in the future.

* refactor(workspace): improve variable declarations in WorkspaceRightPanel

- Add explicit type imports (ArgTextDef, TimeTagInfo) from sequence languages
- Declare component variables at top for better organization and clarity
- Simplify timeTagNode reactive statement formatting
- Improve code readability by making variable declarations explicit

This refactoring improves code maintainability by organizing variable
declarations in a clear, conventional pattern at the component's top level.

* fix(workspace): clarify metadata message is for folders, not files

* fix(workspace): await file save and refresh contents after save

This fixes a potential race condition where the workspace UI might not reflect the saved state and ensures proper async/await flow in the save operation.

* refactor: remove version column and metadata from workspace UI

* Optimistically update the metadata user object so it doesn't flash on save.

* fix linting errors

* fix: add overwrite merge behavior to workspace metadata POST requests

* feat(ui): add column resize support and centralize cookie management

- Add columnShiftResize prop to BulkActionDataGrid and SingleActionDataGrid components
- Create centralized cookie utilities (setCookie, getCookie) with consistent expiration handling
- Implement column state persistence in WorkspaceFileBrowser using cookies
- Move cookie constants to centralized location (constants/cookies.ts)
- Refactor SidebarProvider to use new cookie utilities instead of manual document.cookie
- Add comprehensive test coverage for cookie utility functions

This change improves code maintainability by consolidating cookie management logic and enables users to persist their column resize preferences across sessions.

* feat(workspace): add read-only file protection to context menu

- Add `hasReadOnlyNodes` prop to track selection of read-only files
- Disable rename and delete operations when read-only files are selected
- Display appropriate error messages for read-only restrictions
- Visually indicate "Move" is disabled (with reduced opacity) while keeping "Copy" available for read-only files
- Update permission checks to consider read-only status alongside existing permissions

This prevents users from accidentally modifying or deleting files that should remain read-only, improving data integrity in the workspace.

* fix test

* refactor: simplify actions click handling and add open folder button

- Remove custom event dispatcher from WorkspaceLeftIconRail component
- Use existing handleTabClick function for actions button instead of custom event
- Simplify component interface by removing actionsClick event handler prop
- Add "Open Folder" button to workspace document view for easier folder access

This refactoring reduces code complexity by consolidating tab click handling into a single method while improving UX with the new folder access feature.

* refactor(workspace): reorganize component props and restructure layout

- Move currentBreadcrumbPath export to group with other props in WorkspaceSidebar
- Restructure workspace content area component hierarchy
- Improve code organization without changing functionality

This refactoring improves code readability by grouping related exports together and simplifying the component structure in the workspace page.

* refactor(e2e): improve TypeScript imports and fix action selector

- Use type-only imports for Locator and Page to optimize bundle size
- Add definite assignment assertions (!:) to Locator properties initialized in constructor
- Update action sidebar selector from 'complementary' to 'tablist' role for more accurate element targeting

These changes improve TypeScript type safety and ensure more reliable E2E test selectors in the Action fixture.

* refactor(workspace): simplify modals and add read-only file protection

- Remove unused workspace and user props from ImportWorkspaceFileModal
- Remove enableContextMenu prop from WorkspaceTreeView component calls
- Add selectionHasReadOnlyNodes prop to MoveItemToWorkspaceModal
- Prevent moving read-only files with appropriate error messaging
- Update permission checks to account for read-only file selections
- Clean up unused type imports and component props

This simplifies the component interface by removing unnecessary props that were being passed through multiple layers, and adds protection against moving read-only files to prevent data integrity issues.

* fix(text-editor): configure editable state alongside readonly

**Changes:**
- Configure both `EditorState.readOnly` and `EditorView.editable` facets to properly control editor interactivity
- Update E2E test selectors to use more specific button roles in tabpanel instead of generic labels
- Reorder component props for consistency (move callback to end)

**Why:**
The text editor was not properly respecting readonly/preview/loading states because only the `readOnly` facet was configured. CodeMirror requires both `readOnly` and `editable` facets to be set for proper behavior. The E2E test updates improve selector reliability by targeting more specific button elements.

* remove log

* fix: improve error handling in error display and bulk file operations

This commit addresses two error handling issues:

1. Error store: Stringify object-type error causes to prevent displaying
   "[object Object]" in error messages. Previously, object causes were
   coerced to string directly, losing valuable debugging information.

2. Bulk file operations: Track failed file operations that are not
   conflicts in the bulkMoveWorkspaceItems function. Non-success
   responses during overwrite operations are now properly added to
   failedFileOperations array for better error reporting.

These changes improve error visibility and ensure failed operations
are properly tracked and reported to users.

* fix(effects): improve error messaging for failed workspace item moves

* fix(ui): add z-index to workspace content pane so tooltips don't go under right panel

* set minSize of left/right workspace panels to 20 to workaround issue with being always set to minSize on first open

* suppressSizeToFit on workspace file browser to preserve users' saved column width

* update ConsoleLog to not wrap everything in pre tags, update action runs to render better previews for JSON objects

* linting

* fix action tab styling

* Action tab content switching fixes

* Style fix

* fix: improve workspace file browser column sizing and add reset option

The Name column now uses flex:1 exclusively (never converted to fixed width),
so it fills remaining space instantly on panel open/close with no flash.
Metadata columns preserve user-set widths via cookies with suppressSizeToFit.

- Fix "Fit Columns to Available Space" context menu by temporarily overriding
  suppressSizeToFit on resizable columns for explicit user actions
- Add "Reset Column Layout" context menu option to all DataGrid instances,
  with cookie cleanup in the workspace file browser
- Guard ResizeObserver against collapsed containers (width < 50px)
- Preserve Name column flex:1 by stripping width/flex from saved column state

* Fix panel sizing after closing and re-opening

* Fixes and cleanup

* Preserve user-driven name column width changes. Add reset layout button to column picker.

* Bug fix

* Refactor

* Revert change

---------

Co-authored-by: AaronPlave <aaronplave@gmail.com>
Co-authored-by: Dan Delany <daniel.t.delany@jpl.nasa.gov>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Phoenix: show metadata files in workspace

3 participants