diff --git a/platform/ui/src/components/AboutModal/AboutModal.tsx b/platform/ui/src/components/AboutModal/AboutModal.tsx index a973c29e3..ddc2ab20b 100644 --- a/platform/ui/src/components/AboutModal/AboutModal.tsx +++ b/platform/ui/src/components/AboutModal/AboutModal.tsx @@ -1,8 +1,10 @@ import React from 'react'; -import { Typography, Icon } from '../'; import PropTypes from 'prop-types'; import detect from 'browser-detect'; +import Typography from '../Typography'; +import Icon from '../Icon'; + const Link = ({ href, children, showIcon = false }) => { return ( diff --git a/platform/ui/src/components/CinePlayer/CinePlayer.tsx b/platform/ui/src/components/CinePlayer/CinePlayer.tsx index 7c52b47fd..2e293f525 100644 --- a/platform/ui/src/components/CinePlayer/CinePlayer.tsx +++ b/platform/ui/src/components/CinePlayer/CinePlayer.tsx @@ -1,7 +1,10 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import debounce from 'lodash.debounce'; -import { Icon, Tooltip, InputRange } from '../'; + +import Icon from '../Icon'; +import Tooltip from '../Tooltip'; +import InputRange from '../InputRange'; import './CinePlayer.css'; import classNames from 'classnames'; diff --git a/platform/ui/src/components/Dialog/Body.tsx b/platform/ui/src/components/Dialog/Body.tsx index a534791f2..ae2865eef 100644 --- a/platform/ui/src/components/Dialog/Body.tsx +++ b/platform/ui/src/components/Dialog/Body.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; -import { Typography } from '..'; +import Typography from '../Typography'; const Body = ({ text, className }) => { const theme = 'bg-primary-dark'; diff --git a/platform/ui/src/components/Dialog/Footer.tsx b/platform/ui/src/components/Dialog/Footer.tsx index 73c343ea3..7db70720d 100644 --- a/platform/ui/src/components/Dialog/Footer.tsx +++ b/platform/ui/src/components/Dialog/Footer.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; -import { Button } from '..'; +import Button from '../Button'; const Footer = ({ actions, className, onSubmit, value }) => { const flex = 'flex items-center justify-end'; diff --git a/platform/ui/src/components/Dialog/Header.tsx b/platform/ui/src/components/Dialog/Header.tsx index bba74bef3..0432a831f 100644 --- a/platform/ui/src/components/Dialog/Header.tsx +++ b/platform/ui/src/components/Dialog/Header.tsx @@ -2,7 +2,8 @@ import React from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; -import { Typography, Icon } from '..'; +import Typography from '../Typography'; +import Icon from '../Icon'; const CloseButton = ({ onClick }) => { return ( diff --git a/platform/ui/src/components/Dropdown/Dropdown.tsx b/platform/ui/src/components/Dropdown/Dropdown.tsx index dc9c459a4..f9a8b6c44 100644 --- a/platform/ui/src/components/Dropdown/Dropdown.tsx +++ b/platform/ui/src/components/Dropdown/Dropdown.tsx @@ -2,7 +2,8 @@ import React, { useEffect, useCallback, useState, useRef } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon, Typography } from '../'; +import Icon from '../Icon'; +import Typography from '../Typography'; const Dropdown = ({ id, children, showDropdownIcon, list, titleClassName }) => { const [open, setOpen] = useState(false); diff --git a/platform/ui/src/components/EmptyStudies/EmptyStudies.tsx b/platform/ui/src/components/EmptyStudies/EmptyStudies.tsx index ec34658bb..62a268052 100644 --- a/platform/ui/src/components/EmptyStudies/EmptyStudies.tsx +++ b/platform/ui/src/components/EmptyStudies/EmptyStudies.tsx @@ -1,7 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon, Typography } from '../'; + +import Icon from '../Icon'; +import Typography from '../Typography'; // TODO: Add loading spinner to OHIF + use it here. const EmptyStudies = ({ className }) => { diff --git a/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx b/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx index 3f89f7991..3246f85b8 100644 --- a/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx +++ b/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx @@ -1,8 +1,10 @@ import React, { useState } from 'react'; import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'; -import { Icon, IconButton } from '@ohif/ui'; import PropTypes from 'prop-types'; + import Modal from '../Modal'; +import Icon from '../Icon'; +import IconButton from '../IconButton'; const isProduction = process.env.NODE_ENV === 'production'; diff --git a/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx b/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx index ed522cb28..a422c70fa 100644 --- a/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx +++ b/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx @@ -2,7 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { IconButton, Icon } from '../'; +import IconButton from '../IconButton'; +import Icon from '../Icon'; import './ExpandableToolbarButton.css'; diff --git a/platform/ui/src/components/Header/Header.tsx b/platform/ui/src/components/Header/Header.tsx index 799db6ad0..c9fcfa964 100644 --- a/platform/ui/src/components/Header/Header.tsx +++ b/platform/ui/src/components/Header/Header.tsx @@ -2,7 +2,12 @@ import React, { ReactNode } from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import classNames from 'classnames'; -import { NavBar, Svg, Icon, IconButton, Dropdown } from '../'; + +import NavBar from '../NavBar'; +import Svg from '../Svg'; +import Icon from '../Icon'; +import IconButton from '../IconButton'; +import Dropdown from '../Dropdown'; function Header({ children, diff --git a/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx b/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx index e65ec14ef..fd3983a98 100644 --- a/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx +++ b/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx @@ -1,9 +1,11 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { HotkeyField, Typography } from '../'; import { useTranslation } from 'react-i18next'; +import HotkeyField from '../HotkeyField'; +import Typography from '../Typography'; + /* TODO: Move these configs and utils to core? */ import { MODIFIER_KEYS } from './hotkeysConfig'; import { validate, splitHotkeyDefinitionsAndCreateTuples } from './utils'; diff --git a/platform/ui/src/components/InputDateRange/InputDateRange.tsx b/platform/ui/src/components/InputDateRange/InputDateRange.tsx index 573ea3dd1..88b11bd7e 100644 --- a/platform/ui/src/components/InputDateRange/InputDateRange.tsx +++ b/platform/ui/src/components/InputDateRange/InputDateRange.tsx @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { DateRange, InputLabelWrapper } from '../'; +import DateRange from '../DateRange'; +import InputLabelWrapper from '../InputLabelWrapper'; const InputDateRange = ({ id, @@ -14,7 +15,7 @@ const InputDateRange = ({ }) => { const { startDate, endDate } = value; - const onClickHandler = (event) => { + const onClickHandler = event => { event.preventDefault(); onLabelClick(event); }; @@ -38,11 +39,11 @@ const InputDateRange = ({ ); }; -const noop = () => { }; +const noop = () => {}; InputDateRange.defaultProps = { value: {}, - onLabelClick: noop + onLabelClick: noop, }; InputDateRange.propTypes = { diff --git a/platform/ui/src/components/InputGroup/InputGroup.tsx b/platform/ui/src/components/InputGroup/InputGroup.tsx index 5a14eb78f..6d4cd7602 100644 --- a/platform/ui/src/components/InputGroup/InputGroup.tsx +++ b/platform/ui/src/components/InputGroup/InputGroup.tsx @@ -1,14 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import getGridWidthClass from '../../utils/getGridWidthClass' +import getGridWidthClass from '../../utils/getGridWidthClass'; -import { - InputText, - InputDateRange, - InputMultiSelect, - InputLabelWrapper, -} from '../'; +import InputText from '../InputText'; +import InputDateRange from '../InputDateRange'; +import InputMultiSelect from '../InputMultiSelect'; +import InputLabelWrapper from '../InputLabelWrapper'; const InputGroup = ({ inputMeta, diff --git a/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx b/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx index e7658bfdb..c11a09f42 100644 --- a/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx +++ b/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx @@ -3,11 +3,12 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useTranslation } from 'react-i18next'; -import { Icon } from '../'; +import Icon from '../Icon'; const baseLabelClassName = 'flex flex-col flex-1 text-white text-lg pl-1 select-none'; -const spanClassName = 'flex flex-row items-center cursor-pointer focus:outline-none'; +const spanClassName = + 'flex flex-row items-center cursor-pointer focus:outline-none'; const sortIconMap = { descending: 'sorting-active-up', ascending: 'sorting-active-down', @@ -22,7 +23,7 @@ const InputLabelWrapper = ({ className, children, }) => { - const { t } = useTranslation("StudyList") + const { t } = useTranslation('StudyList'); const onClickHandler = e => { if (!isSortable) { diff --git a/platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx b/platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx index 3d184be25..5fee81da2 100644 --- a/platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx +++ b/platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Select, InputLabelWrapper } from '../'; +import Select from '../Select'; +import InputLabelWrapper from '../InputLabelWrapper'; const InputMultiSelect = ({ id, diff --git a/platform/ui/src/components/InputText/InputText.tsx b/platform/ui/src/components/InputText/InputText.tsx index e5d95d81f..7c67234ab 100644 --- a/platform/ui/src/components/InputText/InputText.tsx +++ b/platform/ui/src/components/InputText/InputText.tsx @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Input, InputLabelWrapper } from '../'; +import Input from '../Input'; +import InputLabelWrapper from '../InputLabelWrapper'; const InputText = ({ id, @@ -36,7 +37,7 @@ const InputText = ({ InputText.defaultProps = { value: '', isSortable: false, - onLabelClick: () => { }, + onLabelClick: () => {}, sortDirection: 'none', }; diff --git a/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx b/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx index 6170b9bd1..126b780cd 100644 --- a/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx +++ b/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx @@ -1,7 +1,9 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import debounce from 'lodash.debounce'; -import { IconButton, Icon } from '../'; + +import IconButton from '../IconButton'; +import Icon from '../Icon'; import './LegacyCinePlayerCustomInputRange.css'; diff --git a/platform/ui/src/components/LegacyPatientInfo/LegacyPatientInfo.tsx b/platform/ui/src/components/LegacyPatientInfo/LegacyPatientInfo.tsx index 9c0957630..420af67ad 100644 --- a/platform/ui/src/components/LegacyPatientInfo/LegacyPatientInfo.tsx +++ b/platform/ui/src/components/LegacyPatientInfo/LegacyPatientInfo.tsx @@ -1,9 +1,11 @@ import React from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; -import { Icon, Tooltip } from '../'; import { useTranslation } from 'react-i18next'; +import Icon from '../Icon'; +import Tooltip from '../Tooltip'; + const classes = { infoHeader: 'text-base text-primary-light', infoText: 'text-base text-white max-w-24 truncate', diff --git a/platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx b/platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx index 5207d179c..71ec24f37 100644 --- a/platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx +++ b/platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx @@ -1,10 +1,14 @@ import React, { useState, useRef, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { Icon, ButtonGroup, Button, LegacyCinePlayer } from '../'; import useOnClickOutside from '../../utils/useOnClickOutside'; -import LegacyPatientInfo from '../LegacyPatientInfo'; import { StringNumber } from '../../types'; +import LegacyPatientInfo from '../LegacyPatientInfo'; +import Icon from '../Icon'; +import ButtonGroup from '../ButtonGroup'; +import Button from '../Button'; +import LegacyCinePlayer from '../LegacyCinePlayer'; + const LegacyViewportActionBar = ({ studyData, showNavArrows, @@ -75,7 +79,7 @@ const LegacyViewportActionBar = ({
{label} - {showStatus && getStatusComponent()} + {showStatus && getStatusComponent && getStatusComponent()}
diff --git a/platform/ui/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx b/platform/ui/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx index e66d1de7f..254dd78e7 100644 --- a/platform/ui/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx +++ b/platform/ui/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx @@ -1,6 +1,7 @@ import React from 'react'; import classNames from 'classnames'; -import { Icon } from '@ohif/ui'; + +import Icon from '../Icon'; import ProgressLoadingBar from '../ProgressLoadingBar'; /** diff --git a/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx b/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx index f66b9d85e..8895f2b6d 100644 --- a/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx +++ b/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon } from '../'; + +import Icon from '../Icon'; const MeasurementItem = ({ uid, diff --git a/platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx b/platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx index 5b2955ef3..893bcd020 100644 --- a/platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx +++ b/platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx @@ -34,6 +34,13 @@ MeasurementTable is a component that renders the MeasurementTables. name="Overview" args={{ title: 'Measurements', + servicesManager: { + services: { + customizationService: { + getCustomization: (title, data) => data.content, + } + }, + }, }} > {MeasurementTableTemplate.bind({})} @@ -62,6 +69,13 @@ With data isActive: false, }, ], + servicesManager: { + services: { + customizationService: { + getCustomization: (title, data) => data, + } + }, + }, }} > {MeasurementTableTemplate.bind({})} diff --git a/platform/ui/src/components/Modal/Modal.tsx b/platform/ui/src/components/Modal/Modal.tsx index c330d6b31..ba8995fd8 100644 --- a/platform/ui/src/components/Modal/Modal.tsx +++ b/platform/ui/src/components/Modal/Modal.tsx @@ -1,12 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactModal from 'react-modal'; +import { useModal } from '../../contextProviders'; + +import Icon from '../Icon'; +import Typography from '../Typography'; import './Modal.css'; -import { Typography, Icon } from '../'; -import { useModal } from '../../contextProviders'; - if (typeof document !== 'undefined') { ReactModal.setAppElement(document.getElementById('root')); } diff --git a/platform/ui/src/components/Notification/Notification.tsx b/platform/ui/src/components/Notification/Notification.tsx index f4d2bd957..d354bbbf4 100644 --- a/platform/ui/src/components/Notification/Notification.tsx +++ b/platform/ui/src/components/Notification/Notification.tsx @@ -1,7 +1,9 @@ import React, { useEffect, useRef } from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; -import { Button, Icon } from '../'; + +import Button from '../Button'; +import Icon from '../Icon'; const Notification = ({ id, diff --git a/platform/ui/src/components/PatientInfo/PatientInfo.tsx b/platform/ui/src/components/PatientInfo/PatientInfo.tsx index 615950c06..f78973a95 100644 --- a/platform/ui/src/components/PatientInfo/PatientInfo.tsx +++ b/platform/ui/src/components/PatientInfo/PatientInfo.tsx @@ -1,9 +1,11 @@ import React from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; -import { Icon, Tooltip } from '../'; import { useTranslation } from 'react-i18next'; +import Icon from '../Icon'; +import Tooltip from '../Tooltip'; + const classes = { infoHeader: 'text-base text-primary-light', infoText: 'text-base text-white max-w-24 truncate', diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx index 8a83e567e..dbd9b06cb 100644 --- a/platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx +++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx @@ -1,7 +1,11 @@ import React, { useState } from 'react'; -import { Icon, InputRange, CheckBox, InputNumber } from '../'; import classNames from 'classnames'; +import Icon from '../Icon'; +import InputRange from '../InputRange'; +import CheckBox from '../CheckBox'; +import InputNumber from '../InputNumber'; + const ActiveSegmentationConfig = ({ config, setRenderOutline, diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx index dfad3d10f..6a33b42fe 100644 --- a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx +++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon } from '@ohif/ui'; + +import Icon from '../Icon'; const SegmentItem = ({ segmentIndex, diff --git a/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx b/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx index 9ed370975..b2e5c29bb 100644 --- a/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx +++ b/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon } from '../'; + +import Icon from '../Icon'; const SegmentationItem = ({ id, diff --git a/platform/ui/src/components/SegmentationTable/SegmentationTable.tsx b/platform/ui/src/components/SegmentationTable/SegmentationTable.tsx index 25b503452..b31e7864c 100644 --- a/platform/ui/src/components/SegmentationTable/SegmentationTable.tsx +++ b/platform/ui/src/components/SegmentationTable/SegmentationTable.tsx @@ -1,8 +1,9 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { Icon } from '../'; import SegmentationItem from './SegmentationItem'; +import Icon from '../Icon'; + const SegmentationTable = ({ title, segmentations, diff --git a/platform/ui/src/components/Select/Select.tsx b/platform/ui/src/components/Select/Select.tsx index 2835cb23a..2883e106f 100644 --- a/platform/ui/src/components/Select/Select.tsx +++ b/platform/ui/src/components/Select/Select.tsx @@ -2,7 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import ReactSelect, { components } from 'react-select'; -import { Icon } from '@ohif/ui'; + +import Icon from '../Icon'; import './Select.css'; diff --git a/platform/ui/src/components/SidePanel/SidePanel.tsx b/platform/ui/src/components/SidePanel/SidePanel.tsx index 61128c90c..4be0db235 100644 --- a/platform/ui/src/components/SidePanel/SidePanel.tsx +++ b/platform/ui/src/components/SidePanel/SidePanel.tsx @@ -13,7 +13,10 @@ import { Swiper, SwiperSlide } from 'swiper/react'; import { PanelService, ServicesManager, Types } from '@ohif/core'; -import { Button, Icon, IconButton, Tooltip } from '../'; +import Button from '../Button'; +import Icon from '../Icon'; +import IconButton from '../IconButton'; +import Tooltip from '../Tooltip'; import 'swiper/css'; import 'swiper/css/navigation'; @@ -75,7 +78,7 @@ const SidePanel = ({ activeTabIndex: activeTabIndexProp, tabs, }) => { - const panelService: PanelService = servicesManager.services.panelService; + const panelService: PanelService = servicesManager?.services?.panelService; const { t } = useTranslation('SidePanel'); @@ -128,23 +131,25 @@ const SidePanel = ({ ); useEffect(() => { - const activatePanelSubscription = panelService.subscribe( - panelService.EVENTS.ACTIVATE_PANEL, - (activatePanelEvent: Types.ActivatePanelEvent) => { - if (!hasBeenOpened || activatePanelEvent.forceActive) { - const tabIndex = tabs.findIndex( - tab => tab.id === activatePanelEvent.panelId - ); - if (tabIndex !== -1) { - updateActiveTabIndex(tabIndex); + if (panelService) { + const activatePanelSubscription = panelService.subscribe( + panelService.EVENTS.ACTIVATE_PANEL, + (activatePanelEvent: Types.ActivatePanelEvent) => { + if (!hasBeenOpened || activatePanelEvent.forceActive) { + const tabIndex = tabs.findIndex( + tab => tab.id === activatePanelEvent.panelId + ); + if (tabIndex !== -1) { + updateActiveTabIndex(tabIndex); + } } } - } - ); + ); - return () => { - activatePanelSubscription.unsubscribe(); - }; + return () => { + activatePanelSubscription.unsubscribe(); + }; + } }, [tabs, hasBeenOpened, panelService, updateActiveTabIndex]); const getCloseStateComponent = () => { diff --git a/platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx b/platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx index 93b381240..94f58119f 100644 --- a/platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx +++ b/platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx @@ -32,6 +32,16 @@ SidePanel is a component that renders the SidePanels. args={{ side: 'left', defaultComponentOpen: 'Example', + tabs: [ + { + id: 'tab1', + name: 'tab1', + label: 'Tab 1', + iconName: 'group-layers', + iconLabel: 'group-layers', + content: () =>
Hello
, + } + ], childComponents: [ { iconName: 'home', diff --git a/platform/ui/src/components/SplitButton/SplitButton.tsx b/platform/ui/src/components/SplitButton/SplitButton.tsx index e991b12cc..2180cfa9c 100644 --- a/platform/ui/src/components/SplitButton/SplitButton.tsx +++ b/platform/ui/src/components/SplitButton/SplitButton.tsx @@ -4,7 +4,10 @@ import classNames from 'classnames'; import OutsideClickHandler from 'react-outside-click-handler'; import { useTranslation } from 'react-i18next'; -import { Icon, Tooltip, ListMenu, ToolbarButton } from '../'; +import Icon from '../Icon'; +import Tooltip from '../Tooltip'; +import ListMenu from '../ListMenu'; +import ToolbarButton from '../ToolbarButton'; const baseClasses = { Button: @@ -92,7 +95,7 @@ const SplitButton = ({ }) => { const { t } = useTranslation('Buttons'); - const { toolbarService } = servicesManager.services; + const { toolbarService } = servicesManager?.services || {}; const { primaryToolId, toggles } = bState; /* Bubbles up individual item clicks */ @@ -146,7 +149,7 @@ const SplitButton = ({ (isPrimaryToggle && toggles[state.primary.id] === true); const PrimaryButtonComponent = - toolbarService.getButtonComponentForUIType(state.primary.uiType) ?? + toolbarService?.getButtonComponentForUIType(state.primary.uiType) ?? ToolbarButton; const primaryButtonClassName = classes.Primary({ diff --git a/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx b/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx index 9d7e6a2ec..bb294b578 100644 --- a/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx +++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx @@ -2,7 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; -import { ButtonGroup, Button, StudyItem, ThumbnailList } from '../'; +import StudyItem from '../StudyItem'; +import ButtonGroup from '../ButtonGroup'; +import Button from '../Button'; +import ThumbnailList from '../ThumbnailList'; import { StringNumber } from '../../types'; const getTrackedSeries = displaySets => { @@ -171,7 +174,7 @@ StudyBrowser.propTypes = { ), }; -const noop = () => { }; +const noop = () => {}; StudyBrowser.defaultProps = { onClickTab: noop, diff --git a/platform/ui/src/components/StudyItem/StudyItem.tsx b/platform/ui/src/components/StudyItem/StudyItem.tsx index d4776f4d4..7a9572b06 100644 --- a/platform/ui/src/components/StudyItem/StudyItem.tsx +++ b/platform/ui/src/components/StudyItem/StudyItem.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon } from '../'; +import Icon from '../Icon'; const baseClasses = 'first:border-0 border-t border-secondary-light cursor-pointer select-none outline-none'; diff --git a/platform/ui/src/components/StudyListExpandedRow/StudyListExpandedRow.tsx b/platform/ui/src/components/StudyListExpandedRow/StudyListExpandedRow.tsx index 6f2f88bce..48603d14a 100644 --- a/platform/ui/src/components/StudyListExpandedRow/StudyListExpandedRow.tsx +++ b/platform/ui/src/components/StudyListExpandedRow/StudyListExpandedRow.tsx @@ -2,7 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; -import { Table, TableHead, TableBody, TableRow, TableCell } from '../'; +import Table from '../Table'; +import TableHead from '../TableHead'; +import TableBody from '../TableBody'; +import TableRow from '../TableRow'; +import TableCell from '../TableCell'; const StudyListExpandedRow = ({ seriesTableColumns, @@ -11,7 +15,6 @@ const StudyListExpandedRow = ({ }) => { const { t } = useTranslation('StudyList'); - return (
{children}
diff --git a/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx b/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx index a266c00dc..6c8f0470c 100644 --- a/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx +++ b/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx @@ -2,7 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; -import { Button, Icon, Typography, InputGroup } from '../'; +import Button from '../Button'; +import Icon from '../Icon'; +import Typography from '../Typography'; +import InputGroup from '../InputGroup'; const StudyListFilter = ({ filtersMeta, diff --git a/platform/ui/src/components/StudyListPagination/StudyListPagination.tsx b/platform/ui/src/components/StudyListPagination/StudyListPagination.tsx index 87e21cf3b..811a8cde4 100644 --- a/platform/ui/src/components/StudyListPagination/StudyListPagination.tsx +++ b/platform/ui/src/components/StudyListPagination/StudyListPagination.tsx @@ -1,8 +1,12 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { Button, ButtonGroup, Typography, Select } from '../'; import { useTranslation } from 'react-i18next'; +import Button from '../Button'; +import ButtonGroup from '../ButtonGroup'; +import Typography from '../Typography'; +import Select from '../Select'; + const StudyListPagination = ({ onChangePage, currentPage, diff --git a/platform/ui/src/components/StudyListTable/StudyListTableRow.tsx b/platform/ui/src/components/StudyListTable/StudyListTableRow.tsx index 3cc6c038f..af53ef1c7 100644 --- a/platform/ui/src/components/StudyListTable/StudyListTableRow.tsx +++ b/platform/ui/src/components/StudyListTable/StudyListTableRow.tsx @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon } from '../'; import getGridWidthClass from '../../utils/getGridWidthClass'; +import Icon from '../Icon'; + const StudyListTableRow = props => { const { tableData } = props; const { row, expandedContent, onClickRow, isExpanded } = tableData; diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.tsx b/platform/ui/src/components/Thumbnail/Thumbnail.tsx index d7487d5ba..7f82e4a27 100644 --- a/platform/ui/src/components/Thumbnail/Thumbnail.tsx +++ b/platform/ui/src/components/Thumbnail/Thumbnail.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useDrag } from 'react-dnd'; -import { Icon } from '../'; +import Icon from '../Icon'; import { StringNumber } from '../../types'; /** diff --git a/platform/ui/src/components/ThumbnailList/ThumbnailList.tsx b/platform/ui/src/components/ThumbnailList/ThumbnailList.tsx index b1cb06416..94dc4cb6b 100644 --- a/platform/ui/src/components/ThumbnailList/ThumbnailList.tsx +++ b/platform/ui/src/components/ThumbnailList/ThumbnailList.tsx @@ -1,7 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '../'; +import Thumbnail from '../Thumbnail'; +import ThumbnailNoImage from '../ThumbnailNoImage'; +import ThumbnailTracked from '../ThumbnailTracked'; import * as Types from '../../types'; const ThumbnailList = ({ diff --git a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.tsx b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.tsx index 83eb44536..c26ae6714 100644 --- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.tsx +++ b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.tsx @@ -2,7 +2,9 @@ import React from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import { useDrag } from 'react-dnd'; -import { Icon, Tooltip, Typography } from '../'; +import Icon from '../Icon'; +import Tooltip from '../Tooltip'; +import Typography from '../Typography'; const ThumbnailNoImage = ({ displaySetInstanceUID, diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx index 060b6c664..f921ee6cc 100644 --- a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx +++ b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx @@ -2,7 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon, Thumbnail, Tooltip } from '../'; +import Icon from '../Icon'; +import Thumbnail from '../Thumbnail'; +import Tooltip from '../Tooltip'; import { StringNumber } from '../../types'; const ThumbnailTracked = ({ diff --git a/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx b/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx index b8dcee0e4..519e5cbf6 100644 --- a/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx +++ b/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx @@ -2,7 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { IconButton, Icon, Tooltip } from '../'; +import IconButton from '../IconButton'; +import Icon from '../Icon'; +import Tooltip from '../Tooltip'; const ToolbarButton = ({ type = 'tool', diff --git a/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx b/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx index 14789da5b..46c3cd13e 100644 --- a/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx +++ b/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx @@ -1,7 +1,8 @@ import React, { useState, useRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon } from '../'; + +import Icon from '../Icon'; const DELAY_TO_SHOW = 1000; const DELAY_TO_HIDE = 10; // it needs at least a little delay to prevent tooltip to suddenly hide diff --git a/platform/ui/src/components/UserPreferences/UserPreferences.tsx b/platform/ui/src/components/UserPreferences/UserPreferences.tsx index f99902085..85be530c6 100644 --- a/platform/ui/src/components/UserPreferences/UserPreferences.tsx +++ b/platform/ui/src/components/UserPreferences/UserPreferences.tsx @@ -1,8 +1,12 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { Select, Typography, Button, HotkeysPreferences } from '../'; import { useTranslation } from 'react-i18next'; +import Select from '../Select'; +import Typography from '../Typography'; +import Button from '../Button'; +import HotkeysPreferences from '../HotkeysPreferences'; + const UserPreferences = ({ availableLanguages, defaultLanguage, diff --git a/platform/ui/src/components/Viewport/Viewport.tsx b/platform/ui/src/components/Viewport/Viewport.tsx index bcd2f5a2e..5f8f2c500 100644 --- a/platform/ui/src/components/Viewport/Viewport.tsx +++ b/platform/ui/src/components/Viewport/Viewport.tsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { LegacyViewportActionBar, Notification } from '../'; +import LegacyViewportActionBar from '../LegacyViewportActionBar'; +import Notification from '../Notification'; const Viewport = ({ viewportId, diff --git a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx index cbb5df022..ec0761097 100644 --- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx +++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx @@ -7,10 +7,11 @@ import React, { useRef, useState, } from 'react'; -import { Icon } from '..'; import { useResizeObserver } from '../../hooks'; import useOnClickOutside from '../../utils/useOnClickOutside'; + import PatientInfo from '../PatientInfo'; +import Icon from '../Icon'; export type ViewportActionBarProps = { studyData: any; diff --git a/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx b/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx index e04dd1308..99eee77aa 100644 --- a/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx +++ b/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx @@ -7,16 +7,14 @@ import React, { } from 'react'; import { useTranslation } from 'react-i18next'; -import { - Typography, - Input, - Tooltip, - IconButton, - Icon, - Select, - InputLabelWrapper, - Button, -} from '../'; +import Typography from '../Typography'; +import Input from '../Input'; +import Tooltip from '../Tooltip'; +import IconButton from '../IconButton'; +import Icon from '../Icon'; +import Select from '../Select'; +import InputLabelWrapper from '../InputLabelWrapper'; +import Button from '../Button'; const FILE_TYPE_OPTIONS = [ {