TrizTech/ohif-viewer
18
0 Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(ui): Enhance UI Components and Update CornerstoneJS Dependencies and resizable panels (#4938)

Browse Source 
Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>
This commit is contained in:
AlirezaandJoe Boccanfuso authored and GitHub committed 2025-04-09 16:49:55 -04:00
1 parent c05ec1909f
commit 43bc142439
46 files changed
+504 -467
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

extensions/default/src/customizations/reportDialogCustomization.tsx
+73 -49
View File
@@ -1,5 +1,5 @@
import React, { useEffect, useMemo, useState } from 'react';
import { InputDialog } from '@ohif/ui-next';
import { InputDialog, cn } from '@ohif/ui-next';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@ohif/ui-next';
import { useSystem } from '@ohif/core';
@@ -71,69 +71,93 @@ function ReportDialog({ dataSources, hide, onSave, onCancel }: ReportDialogProps
const showDataSourceSelect = dataSources?.length > 1;
return (
<div className="text-foreground mt-2 flex min-w-[400px] max-w-md flex-col gap-4">
<div className="flex flex-col gap-3">
<div className="text-foreground flex min-w-[400px] max-w-md flex-col">
<div className="flex flex-col gap-4">
<div className="flex gap-4">
{showDataSourceSelect && (
<div className="mt-1 w-1/2">
<div className="mb-1 pl-1 text-base">Data source</div>
<>
<div className="mt-1 w-1/2">
<div className="mb-1 pl-1 text-base">Data source</div>
<Select
value={selectedDataSource}
onValueChange={setSelectedDataSource}
>
<SelectTrigger>
<SelectValue placeholder="Select a data source" />
</SelectTrigger>
<SelectContent>
{dataSources.map(source => (
<SelectItem
key={source.value}
value={source.value}
>
{source.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className={showDataSourceSelect ? 'mt-1 w-1/2' : 'mt-1 w-full'}>
<div className="mb-1 pl-1 text-base">Series</div>
<Select
value={selectedSeries}
onValueChange={setSelectedSeries}
>
<SelectTrigger>
<SelectValue placeholder="Select a series" />
</SelectTrigger>
<SelectContent>
{seriesOptions.map(series => (
<SelectItem
key={series.value}
value={series.value}
>
{series.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</>
)}
</div>
<div className="flex items-end gap-4">
{!showDataSourceSelect && (
<div className="w-1/3">
<div className="mb-1 pl-1 text-base">Series</div>
<Select
value={selectedDataSource}
onValueChange={setSelectedDataSource}
value={selectedSeries}
onValueChange={setSelectedSeries}
>
<SelectTrigger>
<SelectValue placeholder="Select a data source" />
<SelectValue placeholder="Select a series" />
</SelectTrigger>
<SelectContent>
{dataSources.map(source => (
{seriesOptions.map(series => (
<SelectItem
key={source.value}
value={source.value}
key={series.value}
value={series.value}
>
{source.label}
{series.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
<div className={showDataSourceSelect ? 'mt-1 w-1/2' : 'mt-1 w-full'}>
<div className="mb-1 pl-1 text-base">Series</div>
<Select
value={selectedSeries}
onValueChange={setSelectedSeries}
>
<SelectTrigger>
<SelectValue placeholder="Select a series" />
</SelectTrigger>
<SelectContent>
{seriesOptions.map(series => (
<SelectItem
key={series.value}
value={series.value}
>
{series.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className={showDataSourceSelect ? 'flex gap-4' : ''}>
<div className="mt-4 w-full">
<InputDialog
value={reportName}
onChange={setReportName}
submitOnEnter
>
<InputDialog.Field>
<InputDialog.Input
placeholder="Report name"
disabled={!!selectedSeries}
/>
</InputDialog.Field>
</InputDialog>
</div>
<InputDialog
value={reportName}
onChange={setReportName}
submitOnEnter
className="flex-1"
>
<InputDialog.Field className="mb-0">
<InputDialog.Input
placeholder="Report name"
disabled={!!selectedSeries}
/>
</InputDialog.Field>
</InputDialog>
</div>
<div className="flex justify-end gap-2">