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

fix docs (#4988)

Browse Source
This commit is contained in:
Alireza 2025-04-22 10:45:14 -04:00 committed by GitHub
parent 0052bf1ae3
commit bdb847a6eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 212 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
platform/docs/src/pages/components-list.tsx
View File

@ -1,17 +1,17 @@
import React from 'react'; import React from 'react';
import '../css/custom.css'; import '../css/custom.css';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import { TooltipProvider } from '../../../ui-next/src/components/Tooltip'; import { TooltipProvider } from '../../../../platform/ui-next/src/components/Tooltip';
// Navigation card components // Navigation card components
import { Card, CardHeader, CardTitle, CardDescription } from '../../../ui-next/src/components/Card'; import { Card, CardHeader, CardTitle, CardDescription } from '../../../../platform/ui-next/src/components/Card';
import { Icons } from '../../../ui-next/src/components/Icons'; import { Icons } from '../../../../platform/ui-next/src/components/Icons';
/* Showcase components (alphabetical) */ /* Showcase components (alphabetical) */
import AllinOneMenuShowcase from './components/AllinOneMenuShowcase'; // import AllinOneMenuShowcase from './components/AllinOneMenuShowcase';
import ButtonShowcase from './components/ButtonShowcase'; import ButtonShowcase from './components/ButtonShowcase';
import CheckboxShowcase from './components/CheckboxShowcase'; import CheckboxShowcase from './components/CheckboxShowcase';
import CinePlayerShowcase from './components/CinePlayerShowcase'; // import CinePlayerShowcase from './components/CinePlayerShowcase';
import ComboboxShowcase from './components/ComboboxShowcase'; import ComboboxShowcase from './components/ComboboxShowcase';
import DataRowShowcase from './components/DataRowShowcase'; import DataRowShowcase from './components/DataRowShowcase';
import DialogShowcase from './components/DialogShowcase'; import DialogShowcase from './components/DialogShowcase';
@ -98,10 +98,10 @@ export default function ComponentsList() {
<h1 className="text-foreground ml-6 mb-6 text-5xl">Components</h1> <h1 className="text-foreground ml-6 mb-6 text-5xl">Components</h1>
<AllinOneMenuShowcase /> {/* <AllinOneMenuShowcase /> */}
<ButtonShowcase /> <ButtonShowcase />
<CheckboxShowcase /> <CheckboxShowcase />
<CinePlayerShowcase /> {/* <CinePlayerShowcase /> */}
<ComboboxShowcase /> <ComboboxShowcase />
<DataRowShowcase /> <DataRowShowcase />
<DialogShowcase /> <DialogShowcase />

278
platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
View File

@ -1,142 +1,150 @@
import React from 'react'; // import React from 'react';
import AllInOneMenu, { // import * as AllInOneMenu from '../../../../../platform/ui-next/src/components/AllInOneMenu';
IconMenu, // import { Switch } from '../../../../../platform/ui-next/src/components/Switch';
SubMenu, // import ShowcaseRow from './ShowcaseRow';
ItemPanel,
Item,
DividerItem,
HorizontalDirection,
VerticalDirection,
} from '../../../../ui-next/src/components/AllInOneMenu';
import { Switch } from '../../../../ui-next/src/components/Switch';
import ShowcaseRow from './ShowcaseRow';
/** /**
* Pure‑UI mock of the in‑app Window/Level menu. * Pure‑UI mock of the in‑app Window/Level menu.
* Clickable, but all actions are inert. * Clickable, but all actions are inert.
*/ */
export default function AllinOneMenuShowcase() { export default function AllinOneMenuShowcase() {
/* Helpers to build common static items so the JSX stays concise */ return null;
const renderColorLUTItems = () =>
[
'Grayscale',
'X Ray',
'HSV',
'Hot Iron',
'Red Hot',
'S PET',
'Perfusion',
'Rainbow',
'SUV',
'GE 256',
'GE',
'Siemens',
].map(name => <Item key={name} label={name} />);
const renderWindowPresetItems = () =>
[
{ desc: 'Soft tissue', wl: '400 / 40' },
{ desc: 'Lung', wl: '1500 / -600' },
{ desc: 'Liver', wl: '150 / 90' },
{ desc: 'Bone', wl: '2500 / 480' },
{ desc: 'Brain', wl: '80 / 40' },
].map(p => (
<Item
key={p.desc}
label={p.desc}
secondaryLabel={p.wl}
/>
));
return (
<ShowcaseRow
title="All In One Menu"
description="A structured, consolidated menu designed to reduce visual clutter, helping users keep their focus on the image. It supports various UI components—including Switches, Numeric Inputs, Tabs, and Sliders—for detailed settings, as well as text-based lists for actionable items."
code={`<IconMenu icon="viewport-window-level" menuStyle={{ width: 212, maxHeight: 500 }}>
<ItemPanel label="Display">
<Item label="Display Color bar" rightIcon={<Switch disabled />} />
<DividerItem />
<SubMenu itemLabel="Color LUT" itemIcon="icon-color-lut">
<ItemPanel label="Color LUTs">
<Item label="Preview in viewport" rightIcon={<Switch disabled />} />
<DividerItem />
<Item label="Grayscale" />
<Item label="X Ray" />
<Item label="HSV" />
<Item label="Hot Iron" />
<Item label="Red Hot" />
<Item label="S PET" />
<Item label="Perfusion" />
<Item label="Rainbow" />
<Item label="SUV" />
<Item label="GE 256" />
<Item label="GE" />
<Item label="Siemens" />
</ItemPanel>
</SubMenu>
<SubMenu itemLabel="Window Presets" itemIcon="viewport-window-level">
<ItemPanel label="CT Presets">
<Item label="Soft tissue" secondaryLabel="400 / 40" />
<Item label="Lung" secondaryLabel="1500 / ‑600" />
<Item label="Liver" secondaryLabel="150 / 90" />
<Item label="Bone" secondaryLabel="2500 / 480" />
<Item label="Brain" secondaryLabel="80 / 40" />
</ItemPanel>
</SubMenu>
</ItemPanel>
</IconMenu>`}
>
<div className="border-input/70 relative flex h-12 items-center rounded border bg-black px-4">
<IconMenu
icon="viewport-window-level"
iconClassName="text-xl text-highlight hover:bg-primary/30 cursor-pointer rounded"
horizontalDirection={HorizontalDirection.LeftToRight}
verticalDirection={VerticalDirection.TopToBottom}
menuStyle={{ width: 212, maxHeight: 500 }}
>
<ItemPanel label="Display">
<Item
label="Display Color bar"
rightIcon={
<Switch
checked={false}
disabled
className="pointer-events-none"
/>
}
useIconSpace={false}
/>
<DividerItem />
<SubMenu itemLabel="Color LUT" itemIcon="icon-color-lut">
<ItemPanel
label="Color LUTs"
maxHeight="calc(100vh - 250px)"
className="flex flex-col"
>
<Item
label="Preview in viewport"
rightIcon={
<Switch
checked={false}
disabled
className="pointer-events-none"
/>
}
/>
<DividerItem />
{renderColorLUTItems()}
</ItemPanel>
</SubMenu>
<SubMenu itemLabel="Window Presets" itemIcon="viewport-window-level">
<ItemPanel label="CT Presets">{renderWindowPresetItems()}</ItemPanel>
</SubMenu>
</ItemPanel>
</IconMenu>
<span className="text-muted-foreground ml-3 text-sm">
Click the icon to explore an example
</span>
</div>
</ShowcaseRow>
);
} }
// /* Helpers to build common static items so the JSX stays concise */
// const renderColorLUTItems = () =>
// [
// 'Grayscale',
// 'X Ray',
// 'HSV',
// 'Hot Iron',
// 'Red Hot',
// 'S PET',
// 'Perfusion',
// 'Rainbow',
// 'SUV',
// 'GE 256',
// 'GE',
// 'Siemens',
// ].map(name => (
// <AllInOneMenu.Item
// key={name}
// label={name}
// />
// ));
// const renderWindowPresetItems = () =>
// [
// { desc: 'Soft tissue', wl: '400 / 40' },
// { desc: 'Lung', wl: '1500 / -600' },
// { desc: 'Liver', wl: '150 / 90' },
// { desc: 'Bone', wl: '2500 / 480' },
// { desc: 'Brain', wl: '80 / 40' },
// ].map(p => (
// <AllInOneMenu.Item
// key={p.desc}
// label={p.desc}
// secondaryLabel={p.wl}
// />
// ));
// return (
// <ShowcaseRow
// title="All In One Menu"
// description="A structured, consolidated menu designed to reduce visual clutter, helping users keep their focus on the image. It supports various UI components—including Switches, Numeric Inputs, Tabs, and Sliders—for detailed settings, as well as text-based lists for actionable items."
// code={`<AllInOneMenu.IconMenu icon="viewport-window-level" menuStyle={{ width: 212, maxHeight: 500 }}>
// <AllInOneMenu.ItemPanel label="Display">
// <AllInOneMenu.Item label="Display Color bar" rightIcon={<Switch disabled />} />
// <AllInOneMenu.DividerItem />
// <AllInOneMenu.SubMenu itemLabel="Color LUT" itemIcon="icon-color-lut">
// <AllInOneMenu.ItemPanel label="Color LUTs">
// <AllInOneMenu.Item label="Preview in viewport" rightIcon={<Switch disabled />} />
// <AllInOneMenu.DividerItem />
// <AllInOneMenu.Item label="Grayscale" />
// <AllInOneMenu.Item label="X Ray" />
// <AllInOneMenu.Item label="HSV" />
// <AllInOneMenu.Item label="Hot Iron" />
// <AllInOneMenu.Item label="Red Hot" />
// <AllInOneMenu.Item label="S PET" />
// <AllInOneMenu.Item label="Perfusion" />
// <AllInOneMenu.Item label="Rainbow" />
// <AllInOneMenu.Item label="SUV" />
// <AllInOneMenu.Item label="GE 256" />
// <AllInOneMenu.Item label="GE" />
// <AllInOneMenu.Item label="Siemens" />
// </AllInOneMenu.ItemPanel>
// </AllInOneMenu.SubMenu>
// <AllInOneMenu.SubMenu itemLabel="Window Presets" itemIcon="viewport-window-level">
// <AllInOneMenu.ItemPanel label="CT Presets">
// <AllInOneMenu.Item label="Soft tissue" secondaryLabel="400 / 40" />
// <AllInOneMenu.Item label="Lung" secondaryLabel="1500 / ‑600" />
// <AllInOneMenu.Item label="Liver" secondaryLabel="150 / 90" />
// <AllInOneMenu.Item label="Bone" secondaryLabel="2500 / 480" />
// <AllInOneMenu.Item label="Brain" secondaryLabel="80 / 40" />
// </AllInOneMenu.ItemPanel>
// </AllInOneMenu.SubMenu>
// </AllInOneMenu.ItemPanel>
// </AllInOneMenu.IconMenu>`}
// >
// <div className="border-input/70 relative flex h-12 items-center rounded border bg-black px-4">
// <AllInOneMenu.IconMenu
// icon="viewport-window-level"
// iconClassName="text-xl text-highlight hover:bg-primary/30 cursor-pointer rounded"
// horizontalDirection={AllInOneMenu.HorizontalDirection.LeftToRight}
// verticalDirection={AllInOneMenu.VerticalDirection.TopToBottom}
// menuStyle={{ width: 212, maxHeight: 500 }}
// >
// <AllInOneMenu.ItemPanel label="Display">
// <AllInOneMenu.Item
// label="Display Color bar"
// rightIcon={
// <Switch
// checked={false}
// disabled
// className="pointer-events-none"
// />
// }
// useIconSpace={false}
// />
// <AllInOneMenu.DividerItem />
// <AllInOneMenu.SubMenu
// itemLabel="Color LUT"
// itemIcon="icon-color-lut"
// >
// <AllInOneMenu.ItemPanel
// label="Color LUTs"
// maxHeight="calc(100vh - 250px)"
// className="flex flex-col"
// >
// <AllInOneMenu.Item
// label="Preview in viewport"
// rightIcon={
// <Switch
// checked={false}
// disabled
// className="pointer-events-none"
// />
// }
// />
// <AllInOneMenu.DividerItem />
// {renderColorLUTItems()}
// </AllInOneMenu.ItemPanel>
// </AllInOneMenu.SubMenu>
// <AllInOneMenu.SubMenu
// itemLabel="Window Presets"
// itemIcon="viewport-window-level"
// >
// <AllInOneMenu.ItemPanel label="CT Presets">
// {renderWindowPresetItems()}
// </AllInOneMenu.ItemPanel>
// </AllInOneMenu.SubMenu>
// </AllInOneMenu.ItemPanel>
// </AllInOneMenu.IconMenu>
// <span className="text-muted-foreground ml-3 text-sm">
// Click the icon to explore an example
// </span>
// </div>
// </ShowcaseRow>
// );
// }

64
platform/docs/src/pages/components/CinePlayerShowcase.tsx
View File

@ -1,37 +1,39 @@
import React, { useState } from 'react'; // import React, { useState } from 'react';
import CinePlayer from '../../../../ui-next/src/components/CinePlayer/CinePlayer'; // import CinePlayer from '../../../../ui-next/src/components/CinePlayer/CinePlayer';
import ShowcaseRow from './ShowcaseRow'; // import ShowcaseRow from './ShowcaseRow';
/** /**
* CinePlayerShowcase displays a playable/pausable cine player with FPS control. * CinePlayerShowcase displays a playable/pausable cine player with FPS control.
*/ */
export default function CinePlayerShowcase() { export default function CinePlayerShowcase() {
const [isPlaying, setIsPlaying] = useState(false); return null;
const [fps, setFps] = useState(24);
return (
<ShowcaseRow
title="Cine Player"
description="Play, pause, scrub through dynamic image series and adjust FPS."
code={`
<CinePlayer
className="w-[300px]"
isPlaying={isPlaying}
frameRate={fps}
onPlayPauseChange={setIsPlaying}
onFrameRateChange={setFps}
onClose={() => console.log('close clicked')}
/>
`}
>
<CinePlayer
className="w-[300px]"
isPlaying={isPlaying}
frameRate={fps}
onPlayPauseChange={setIsPlaying}
onFrameRateChange={setFps}
onClose={() => console.log('close clicked')}
/>
</ShowcaseRow>
);
} }
// const [isPlaying, setIsPlaying] = useState(false);
// const [fps, setFps] = useState(24);
// return (
// <ShowcaseRow
// title="Cine Player"
// description="Play, pause, scrub through dynamic image series and adjust FPS."
// code={`
// <CinePlayer
// className="w-[300px]"
// isPlaying={isPlaying}
// frameRate={fps}
// onPlayPauseChange={setIsPlaying}
// onFrameRateChange={setFps}
// onClose={() => console.log('close clicked')}
// />
// `}
// >
// <CinePlayer
// className="w-[300px]"
// isPlaying={isPlaying}
// frameRate={fps}
// onPlayPauseChange={setIsPlaying}
// onFrameRateChange={setFps}
// onClose={() => console.log('close clicked')}
// />
// </ShowcaseRow>
// );
// }

36
platform/docs/src/pages/components/TooltipShowcase.tsx
View File

@ -1,6 +1,11 @@
import React from 'react'; import React from 'react';
import { Tooltip, TooltipTrigger, TooltipContent } from '../../../../ui-next/src/components/Tooltip'; import {
import { Button } from '../../../../ui-next/src/components/Button'; Tooltip,
TooltipTrigger,
TooltipContent,
TooltipProvider,
} from '../../../../../platform/ui-next/src/components/Tooltip';
import { Button } from '../../../../../platform/ui-next/src/components/Button';
import ShowcaseRow from './ShowcaseRow'; import ShowcaseRow from './ShowcaseRow';
/** /**
@ -12,16 +17,7 @@ export default function TooltipShowcase() {
title="Tooltip" title="Tooltip"
description="Tooltips reveal helper text when users hover, focus, or tap an element." description="Tooltips reveal helper text when users hover, focus, or tap an element."
code={` code={`
<Tooltip> <TooltipProvider>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon">?</Button>
</TooltipTrigger>
<TooltipContent>
Tooltip content
</TooltipContent>
</Tooltip>
`}
>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="ghost" size="icon">?</Button> <Button variant="ghost" size="icon">?</Button>
@ -30,6 +26,22 @@ export default function TooltipShowcase() {
Tooltip content Tooltip content
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider>
`}
>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
>
?
</Button>
</TooltipTrigger>
<TooltipContent>Tooltip content</TooltipContent>
</Tooltip>
</TooltipProvider>
</ShowcaseRow> </ShowcaseRow>
); );
} }