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

ui(component): Tooltip component ui-next (#4635)

Browse Source 
Co-authored-by: sedghi <ar.sedghi@gmail.com>
This commit is contained in:
Dan Rukasandsedghi authored and GitHub committed 2025-01-08 13:10:57 -05:00
1 parent 03ad79eaed
commit b54f2075ec
18 files changed
+342 -100
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx
+12 -10
View File
@@ -1,7 +1,7 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Icon, Tooltip, ViewportActionButton } from '@ohif/ui';
import { Icons } from '@ohif/ui-next';
import { ViewportActionButton } from '@ohif/ui';
import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
export default function _getStatusComponent({ isHydrated, onStatusClick }) {
let ToolTipMessage = null;
@@ -10,7 +10,6 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
switch (isHydrated) {
case true:
StatusIcon = () => <Icons.ByName name="status-alert" />;
ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
break;
case false:
@@ -20,7 +19,6 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
name="status-untracked"
/>
);
ToolTipMessage = () => <div>Click LOAD to load RTSTRUCT.</div>;
}
@@ -44,14 +42,18 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
return (
<>
{ToolTipMessage && (
<Tooltip
content={<ToolTipMessage />}
position="bottom-left"
>
<StatusArea />
<Tooltip>
<TooltipTrigger asChild>
<span>
<StatusArea />
</span>
</TooltipTrigger>
<TooltipContent side="bottom">
<ToolTipMessage />
</TooltipContent>
</Tooltip>
)}
{!ToolTipMessage && <StatusArea />}
</>
);
}
}
extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx
+12 -10
View File
@@ -1,7 +1,7 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Tooltip, ViewportActionButton } from '@ohif/ui';
import { Icons } from '@ohif/ui-next';
import { ViewportActionButton } from '@ohif/ui';
import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
export default function _getStatusComponent({ isHydrated, onStatusClick }) {
let ToolTipMessage = null;
@@ -10,7 +10,6 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
switch (isHydrated) {
case true:
StatusIcon = () => <Icons.ByName name="status-alert" />;
ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
break;
case false:
@@ -20,7 +19,6 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
name="status-untracked"
/>
);
ToolTipMessage = () => <div>Click LOAD to load segmentation.</div>;
}
@@ -44,14 +42,18 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
return (
<>
{ToolTipMessage && (
<Tooltip
content={<ToolTipMessage />}
position="bottom-left"
>
<StatusArea />
<Tooltip>
<TooltipTrigger asChild>
<span>
<StatusArea />
</span>
</TooltipTrigger>
<TooltipContent side="bottom">
<ToolTipMessage />
</TooltipContent>
</Tooltip>
)}
{!ToolTipMessage && <StatusArea />}
</>
);
}
}
extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx
+15 -7
View File
@@ -5,10 +5,11 @@ import { ExtensionManager, useToolbar } from '@ohif/core';
import { setTrackingUniqueIdentifiersForElement } from '../tools/modules/dicomSRModule';
import { Icon, Tooltip, useViewportGrid, ViewportActionArrows } from '@ohif/ui';
import createReferencedImageDisplaySet from '../utils/createReferencedImageDisplaySet';
import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
import { Icons } from '@ohif/ui-next';
import { useViewportGrid, ViewportActionArrows } from '@ohif/ui';
import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
const MEASUREMENT_TRACKING_EXTENSION_ID = '@ohif/extension-measurement-tracking';
const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';
@@ -467,11 +468,18 @@ function _getStatusComponent({
return (
<>
{ToolTipMessage && (
<Tooltip
content={<ToolTipMessage />}
position="bottom-left"
>
<StatusArea />
<Tooltip>
<TooltipTrigger asChild>
<span>
<StatusArea />
</span>
</TooltipTrigger>
<TooltipContent
side="bottom"
align="start"
>
<ToolTipMessage />
</TooltipContent>
</Tooltip>
)}
{!ToolTipMessage && <StatusArea />}
extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
+20 -23
View File
@@ -1,8 +1,6 @@
import React, { useState } from 'react';
import { Button, PanelSection, ButtonGroup, IconButton, InputNumber, Tooltip } from '@ohif/ui';
import { DoubleSlider, Icons } from '@ohif/ui-next';
import { Button, PanelSection, ButtonGroup, IconButton, InputNumber } from '@ohif/ui';
import { DoubleSlider, Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
import { Enums } from '@cornerstonejs/core';
const controlClassNames = {
@@ -13,16 +11,18 @@ const controlClassNames = {
const Header = ({ title, tooltip }) => (
<div className="flex items-center space-x-1">
<Tooltip
content={<div className="text-white">{tooltip}</div>}
position="bottom-left"
tight={true}
tooltipBoxClassName="max-w-xs p-2"
>
<Icons.ByName
name="info-link"
className="text-primary-active h-[14px] w-[14px]"
/>
<Tooltip>
<TooltipTrigger asChild>
<span>
<Icons.ByName
name="info-link"
className="text-primary-active h-[14px] w-[14px]"
/>
</span>
</TooltipTrigger>
<TooltipContent sideOffset={4} className="max-w-xs p-2 bg-primary-dark text-white">
<div>{tooltip}</div>
</TooltipContent>
</Tooltip>
<span className="text-aqua-pale text-[11px] uppercase">{title}</span>
</div>
@@ -45,9 +45,7 @@ const DynamicVolumeControls = ({
onDynamicClick,
}) => {
const [computedView, setComputedView] = useState(false);
const [computeViewMode, setComputeViewMode] = useState(Enums.DynamicOperatorType.SUM);
const [sliderRangeValues, setSliderRangeValues] = useState([0, framesLength - 1]);
const handleSliderChange = newValues => {
@@ -113,15 +111,14 @@ const DynamicVolumeControls = ({
<div>
Operation Buttons (SUM, AVERAGE, SUBTRACT): Select the mathematical operation to be
applied to the data set.
<br></br> Range Slider: Choose the numeric range within which the operation will be
<br /> Range Slider: Choose the numeric range within which the operation will be
performed.
<br></br>Generate Button: Execute the chosen operation on the specified range of
data.{' '}
<br />Generate Button: Execute the chosen operation on the specified range of data.
</div>
}
/>
<ButtonGroup
className={`mt-2 w-full`}
className="mt-2 w-full"
separated={true}
>
<button
@@ -190,8 +187,8 @@ function FrameControls({
title="4D Controls"
tooltip={
<div>
Play/Pause Button: Begin or pause the animation of the 4D visualization. <br></br> Frame
Selector: Navigate through individual frames of the 4D data. <br></br> FPS (Frames Per
Play/Pause Button: Begin or pause the animation of the 4D visualization. <br /> Frame
Selector: Navigate through individual frames of the 4D data. <br /> FPS (Frames Per
Second) Selector: Adjust the playback speed of the animation.
</div>
}
@@ -225,4 +222,4 @@ function FrameControls({
</div>
</div>
);
}
}
extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx
+22 -34
View File
@@ -1,8 +1,8 @@
import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import { Tooltip, ViewportActionArrows, useViewportGrid } from '@ohif/ui';
import { Icons } from '@ohif/ui-next';
import { ViewportActionArrows, useViewportGrid } from '@ohif/ui';
import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
import { annotation } from '@cornerstonejs/tools';
import { useTrackedMeasurements } from './../getContextModule';
@@ -235,11 +235,9 @@ function TrackedCornerstoneViewport(
};
return (
<>
<div className="relative flex h-full w-full flex-row overflow-hidden">
{getCornerstoneViewport()}
</div>
</>
<div className="relative flex h-full w-full flex-row overflow-hidden">
{getCornerstoneViewport()}
</div>
);
}
@@ -312,7 +310,7 @@ const _getArrowsComponent = (isTracked, switchMeasurement, isActiveViewport) =>
<ViewportActionArrows
onArrowsClick={direction => switchMeasurement(direction)}
className={isActiveViewport ? 'visible' : 'invisible group-hover/pane:visible'}
></ViewportActionArrows>
/>
);
};
@@ -322,33 +320,23 @@ function _getStatusComponent(isTracked, t) {
}
return (
<div className="relative">
<Tooltip
position="bottom-left"
content={
<div className="flex py-2">
<div className="flex pt-1">
<Icons.InfoLink className="text-primary-main w-4" />
</div>
<div className="ml-4 flex">
<span className="text-common-light text-base">
{isTracked ? (
<>{t('Series is tracked and can be viewed in the measurement panel')}</>
) : (
<>
{t(
'Measurements for untracked series will not be shown in the measurements panel'
)}
</>
)}
</span>
</div>
</div>
}
<Tooltip>
<TooltipTrigger asChild>
<span>
<Icons.StatusTracking className="text-aqua-pale" />
</span>
</TooltipTrigger>
<TooltipContent
align="start"
side="bottom"
>
<Icons.StatusTracking className="text-aqua-pale" />
</Tooltip>
</div>
{isTracked ? (
<>{t('Series is tracked and can be viewed in the measurement panel')}</>
) : (
<>{t('Measurements for untracked series will not be shown in the measurements panel')}</>
)}
</TooltipContent>
</Tooltip>
);
}