feat(studylist): Study list design system components and interactive prototype #5570
Conversation
Between 3 and 9
✅ Deploy Preview for ohif-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Includes InputMultiSelect, Badge, filters.ts for modality tokenization, and changes to defaultColumns and StudyListTable
There was a problem hiding this comment.
I find this DataTable a little bit confusing. It is not really a component, but really a provider.
There was a problem hiding this comment.
Updated (see next comment)
There was a problem hiding this comment.
I am not sure how useful this file is.
There was a problem hiding this comment.
As we discussed internally, I think I ideally DataTable should follow what shadcn recommends whereby DataTable provides not just a provider/context but also basic pieces of rendering and styling for a table with many of the features of what StudyListTable is providing. So a refactor of StudyListTable moving some of its pieces "up" into DataTable is in order here.
There was a problem hiding this comment.
Latest commit adds an updated DataTable and changes to StudyListTable. The root of DataTable is still the provider and sub-components fit better into the structure.
The new DataTable.Table now includes the layout markup.
New DataTable
<DataTable data={data} columns={columns}>
<DataTable.Toolbar>
<DataTable.Title>Studies</DataTable.Title>
<DataTable.Pagination />
<DataTable.ViewOptions />
</DataTable.Toolbar>
<DataTable.Table>
<DataTable.Header />
<DataTable.FilterRow />
<DataTable.Body />
</DataTable.Table>
</DataTable>
…exible and easier to reuse. Removed both unused and duplicate code. Removed some unnecessary complexity.
… playground have been removed.
Removed duplication of settings and open/close panel buttons.
Removed unnecessary headless design pattern. Moved the view and formatting logic for columns to defaultColumns.tsx. Created a better directory structure for the study list.
… feature. This is still a work in progress.
Added toolbarRightActionsComponent for the study list.
Ensured old WorkList is still available and working.
2 participants
Context
Introduces a complete Study List system built with a headless-first architecture, along with design system components and an interactive prototype for user testing and iteration.
Key Highlights:
Prototype Preview Links
Changes & Results
1. DataTable (
platform/ui-next/src/components/DataTable/)A composable, feature-rich data table component built on
@tanstack/react-tablewith compound component patterns.Files Added (11):
DataTable.tsx- Core table component with state managementcontext.tsx- Shared table contextColumnHeader.tsx- Sortable column headersFilterRow.tsx- Inline filtering UIPagination.tsx- Pagination controlsViewOptions.tsx- Column visibility menuToolbar.tsx- Table toolbar containerTitle.tsx- Table title componentActionCell.tsx- Action cell wrapperActionOverlayCell.tsx- Hover/selection action cellindex.ts- Public exportsFeatures:
2. Table (
platform/ui-next/src/components/Table/)Primitive table components providing the foundational HTML table elements with consistent styling.
Files Added (2):
Table.tsx- Base table primitives (Table, TableHeader, TableBody, TableHead, TableRow, TableCell)index.ts- Public exportsFeatures:
3. PatientSummary (
platform/ui-next/src/components/PatientSummary/)A flexible patient information display component with workflow launcher integration.
Files Added (2):
PatientSummary.tsx- Main component with compound slots (Patient, Icon, Title, Subtitle, Workflows, Section)index.ts- Public exportsFeatures:
getprop4. StudyList (
platform/ui-next/src/components/StudyList/)A complete, production-ready study list built from composable building blocks with headless state management.
Architecture:
headless/) - UI-agnostic state managementcomponents/) - Small, focused UI componentslayouts/) - Pre-composed responsive layoutscolumns/) - Default column definitionsFiles Added (20):
Headless State (3):
headless/StudyListProvider.tsx- Context providerheadless/useStudyList.ts- Core state hookheadless/workflows-registry.ts- Workflow inference logicBuilding Blocks (8):
components/StudyListLayout.tsx- Resizable split layout with compound slotscomponents/StudyListTable.tsx- Table built on DataTablecomponents/PreviewPanelShell.tsx- Preview containercomponents/PreviewPanelContent.tsx- Preview with PatientSummarycomponents/PreviewPanelEmpty.tsx- Empty statecomponents/SettingsPopover.tsx- Settings popover with workflow selectorcomponents/StudyListActionsCell.tsx- Actions column cellcomponents/StudyListInstancesCell.tsx- Instances column cellcomponents/WorkflowsMenu.tsx- Workflow dropdown menucomponents/SeriesListView.tsx- Series list displayLayouts (1):
layouts/StudyListLargeLayout.tsx- Default desktop layoutCore (5):
StudyList.tsx- Main facade componentStudyListTypes.ts- TypeScript type definitionsWorkflowsInfer.ts- Workflow utilities exportuseDefaultWorkflow.ts- localStorage-backed default workflowcolumns/defaultColumns.tsx- Default column factoryDocumentation (2):
README.md- Component documentationindex.ts- Public exportsFeatures:
5. Icons (
platform/ui-next/src/components/Icons/Sources/)New icon components for study list UI.
Files Added (7):
PatientStudyList.tsx- Patient/study iconSettingsStudyList.tsx- Settings iconSortingNew.tsx- Base sorting iconSortingNewAscending.tsx- Ascending sort indicatorSortingNewDescending.tsx- Descending sort indicatorPanelRight.tsx- Panel toggle iconInteractive Prototype
Playground Environment (
platform/ui-next/playground/)A lightweight, standalone environment for rapid prototyping and user testing that renders UI-Next components with production-identical styling.
Files Added (11):
.webpack/webpack.playground.js- Webpack config for playgroundplayground/index.tsx- Dynamic route loaderplayground/README.md- Playground documentationplayground/studylist.tsx- StudyList prototype entryplayground/studylist/app.tsx- Main prototype appplayground/studylist/entry.tsx- React 18 mount pointplayground/studylist/launch.tsx- Launch placeholder pageplayground/studylist/patient-studies.json- Sample dataset (2,920 lines)playground/public/_redirects- Netlify redirectsFeatures:
http://localhost:3100/<prototype-name>)Testing
Checklist
PR
semantic-release format and guidelines.
Code
etc.)
Public Documentation Updates
additions or removals.
Tested Environment