From 7d7e4871e3898838c4af0fc255d67b8819c40985 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 6 Feb 2024 18:12:39 -0500 Subject: [PATCH 01/17] Move web-components Tooltip to coreui --- .../src/components/widgets/Tooltip.tsx | 16 +--------------- .../containers/DraggablePanel/index.tsx | 2 +- .../src/components/information/Tooltip.tsx | 15 +++++++++++++++ .../{ => information}/banners/Banner.tsx | 4 ++-- .../{ => information}/banners/BannerList.tsx | 0 .../notifications/DismissButton.tsx | 2 +- .../notifications/SnackbarProvider.tsx | 4 ++-- .../notifications/useSnackbar.tsx | 0 packages/libs/coreui/src/index.ts | 3 +++ 9 files changed, 25 insertions(+), 21 deletions(-) create mode 100644 packages/libs/coreui/src/components/information/Tooltip.tsx rename packages/libs/coreui/src/components/{ => information}/banners/Banner.tsx (99%) rename packages/libs/coreui/src/components/{ => information}/banners/BannerList.tsx (100%) rename packages/libs/coreui/src/components/{ => information}/notifications/DismissButton.tsx (91%) rename packages/libs/coreui/src/components/{ => information}/notifications/SnackbarProvider.tsx (96%) rename packages/libs/coreui/src/components/{ => information}/notifications/useSnackbar.tsx (100%) diff --git a/packages/libs/components/src/components/widgets/Tooltip.tsx b/packages/libs/components/src/components/widgets/Tooltip.tsx index 0517db505d..17a3607d7c 100644 --- a/packages/libs/components/src/components/widgets/Tooltip.tsx +++ b/packages/libs/components/src/components/widgets/Tooltip.tsx @@ -1,15 +1 @@ -import { Theme, Tooltip, withStyles } from '@material-ui/core'; - -// This is just for convenience. -export { HtmlTooltip as Tooltip }; - -export const HtmlTooltip = withStyles((theme: Theme) => ({ - tooltip: { - backgroundColor: '#fffde7', - color: 'rgba(0, 0, 0, 0.87)', - maxWidth: 320, - fontSize: theme.typography.pxToRem(12), - border: '1px solid #dadde9', - boxShadow: theme.shadows[1], - }, -}))(Tooltip); +export { HtmlTooltip, Tooltip } from '../../../../coreui/src/index'; diff --git a/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx b/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx index 7a3f95536c..a75edb2f51 100644 --- a/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx +++ b/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx @@ -5,7 +5,7 @@ import useResizeObserver from 'use-resize-observer'; import { gray } from '../../../definitions/colors'; import { screenReaderOnly } from '../../../styleDefinitions/typography'; import { useUITheme } from '../../theming'; -import DismissButton from '../../notifications/DismissButton'; +import DismissButton from '../../information/notifications/DismissButton'; import { H6 } from '../../typography'; export type DraggablePanelCoordinatePair = { diff --git a/packages/libs/coreui/src/components/information/Tooltip.tsx b/packages/libs/coreui/src/components/information/Tooltip.tsx new file mode 100644 index 0000000000..0517db505d --- /dev/null +++ b/packages/libs/coreui/src/components/information/Tooltip.tsx @@ -0,0 +1,15 @@ +import { Theme, Tooltip, withStyles } from '@material-ui/core'; + +// This is just for convenience. +export { HtmlTooltip as Tooltip }; + +export const HtmlTooltip = withStyles((theme: Theme) => ({ + tooltip: { + backgroundColor: '#fffde7', + color: 'rgba(0, 0, 0, 0.87)', + maxWidth: 320, + fontSize: theme.typography.pxToRem(12), + border: '1px solid #dadde9', + boxShadow: theme.shadows[1], + }, +}))(Tooltip); diff --git a/packages/libs/coreui/src/components/banners/Banner.tsx b/packages/libs/coreui/src/components/information/banners/Banner.tsx similarity index 99% rename from packages/libs/coreui/src/components/banners/Banner.tsx rename to packages/libs/coreui/src/components/information/banners/Banner.tsx index 2d43f9610d..2973ca12f0 100644 --- a/packages/libs/coreui/src/components/banners/Banner.tsx +++ b/packages/libs/coreui/src/components/information/banners/Banner.tsx @@ -20,8 +20,8 @@ import { success, blue, ColorHue, -} from '../../definitions/colors'; -import { useUITheme } from '../theming'; +} from '../../../definitions/colors'; +import { useUITheme } from '../../theming'; export type BannerProps = { type: 'warning' | 'danger' | 'error' | 'success' | 'info' | 'normal'; diff --git a/packages/libs/coreui/src/components/banners/BannerList.tsx b/packages/libs/coreui/src/components/information/banners/BannerList.tsx similarity index 100% rename from packages/libs/coreui/src/components/banners/BannerList.tsx rename to packages/libs/coreui/src/components/information/banners/BannerList.tsx diff --git a/packages/libs/coreui/src/components/notifications/DismissButton.tsx b/packages/libs/coreui/src/components/information/notifications/DismissButton.tsx similarity index 91% rename from packages/libs/coreui/src/components/notifications/DismissButton.tsx rename to packages/libs/coreui/src/components/information/notifications/DismissButton.tsx index feea78c7c2..f3ef20b547 100644 --- a/packages/libs/coreui/src/components/notifications/DismissButton.tsx +++ b/packages/libs/coreui/src/components/information/notifications/DismissButton.tsx @@ -1,5 +1,5 @@ import Close from '@material-ui/icons/Close'; -import { screenReaderOnly } from '../../styleDefinitions/typography'; +import { screenReaderOnly } from '../../../styleDefinitions/typography'; interface Props { className?: string; diff --git a/packages/libs/coreui/src/components/notifications/SnackbarProvider.tsx b/packages/libs/coreui/src/components/information/notifications/SnackbarProvider.tsx similarity index 96% rename from packages/libs/coreui/src/components/notifications/SnackbarProvider.tsx rename to packages/libs/coreui/src/components/information/notifications/SnackbarProvider.tsx index 9e71f75f0d..6a03db3883 100644 --- a/packages/libs/coreui/src/components/notifications/SnackbarProvider.tsx +++ b/packages/libs/coreui/src/components/information/notifications/SnackbarProvider.tsx @@ -15,8 +15,8 @@ import { success, error, warning, -} from '../../definitions/colors'; -import { UITheme, useUITheme } from '../theming'; +} from '../../../definitions/colors'; +import { UITheme, useUITheme } from '../../theming'; export type SnackbarStyleProps = T & { theme?: UITheme }; diff --git a/packages/libs/coreui/src/components/notifications/useSnackbar.tsx b/packages/libs/coreui/src/components/information/notifications/useSnackbar.tsx similarity index 100% rename from packages/libs/coreui/src/components/notifications/useSnackbar.tsx rename to packages/libs/coreui/src/components/information/notifications/useSnackbar.tsx diff --git a/packages/libs/coreui/src/index.ts b/packages/libs/coreui/src/index.ts index 66c9e6bdd8..fa9d2035af 100644 --- a/packages/libs/coreui/src/index.ts +++ b/packages/libs/coreui/src/index.ts @@ -1,3 +1,6 @@ +// Information +export * from './components/information/Tooltip'; + // Typography export * from './components/typography'; From 64a061ed8c026bc3a4d3ea57bdfd72122bc8a533 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 13 Feb 2024 14:02:38 -0500 Subject: [PATCH 02/17] Revert relocation of components --- .../src/components/{information => }/banners/Banner.tsx | 4 ++-- .../src/components/{information => }/banners/BannerList.tsx | 0 .../coreui/src/components/containers/DraggablePanel/index.tsx | 2 +- .../coreui/src/components/{information => info}/Tooltip.tsx | 0 .../{information => }/notifications/DismissButton.tsx | 2 +- .../{information => }/notifications/SnackbarProvider.tsx | 4 ++-- .../{information => }/notifications/useSnackbar.tsx | 0 packages/libs/coreui/src/index.ts | 2 +- 8 files changed, 7 insertions(+), 7 deletions(-) rename packages/libs/coreui/src/components/{information => }/banners/Banner.tsx (99%) rename packages/libs/coreui/src/components/{information => }/banners/BannerList.tsx (100%) rename packages/libs/coreui/src/components/{information => info}/Tooltip.tsx (100%) rename packages/libs/coreui/src/components/{information => }/notifications/DismissButton.tsx (91%) rename packages/libs/coreui/src/components/{information => }/notifications/SnackbarProvider.tsx (96%) rename packages/libs/coreui/src/components/{information => }/notifications/useSnackbar.tsx (100%) diff --git a/packages/libs/coreui/src/components/information/banners/Banner.tsx b/packages/libs/coreui/src/components/banners/Banner.tsx similarity index 99% rename from packages/libs/coreui/src/components/information/banners/Banner.tsx rename to packages/libs/coreui/src/components/banners/Banner.tsx index 2973ca12f0..2d43f9610d 100644 --- a/packages/libs/coreui/src/components/information/banners/Banner.tsx +++ b/packages/libs/coreui/src/components/banners/Banner.tsx @@ -20,8 +20,8 @@ import { success, blue, ColorHue, -} from '../../../definitions/colors'; -import { useUITheme } from '../../theming'; +} from '../../definitions/colors'; +import { useUITheme } from '../theming'; export type BannerProps = { type: 'warning' | 'danger' | 'error' | 'success' | 'info' | 'normal'; diff --git a/packages/libs/coreui/src/components/information/banners/BannerList.tsx b/packages/libs/coreui/src/components/banners/BannerList.tsx similarity index 100% rename from packages/libs/coreui/src/components/information/banners/BannerList.tsx rename to packages/libs/coreui/src/components/banners/BannerList.tsx diff --git a/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx b/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx index a75edb2f51..7a3f95536c 100644 --- a/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx +++ b/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx @@ -5,7 +5,7 @@ import useResizeObserver from 'use-resize-observer'; import { gray } from '../../../definitions/colors'; import { screenReaderOnly } from '../../../styleDefinitions/typography'; import { useUITheme } from '../../theming'; -import DismissButton from '../../information/notifications/DismissButton'; +import DismissButton from '../../notifications/DismissButton'; import { H6 } from '../../typography'; export type DraggablePanelCoordinatePair = { diff --git a/packages/libs/coreui/src/components/information/Tooltip.tsx b/packages/libs/coreui/src/components/info/Tooltip.tsx similarity index 100% rename from packages/libs/coreui/src/components/information/Tooltip.tsx rename to packages/libs/coreui/src/components/info/Tooltip.tsx diff --git a/packages/libs/coreui/src/components/information/notifications/DismissButton.tsx b/packages/libs/coreui/src/components/notifications/DismissButton.tsx similarity index 91% rename from packages/libs/coreui/src/components/information/notifications/DismissButton.tsx rename to packages/libs/coreui/src/components/notifications/DismissButton.tsx index f3ef20b547..feea78c7c2 100644 --- a/packages/libs/coreui/src/components/information/notifications/DismissButton.tsx +++ b/packages/libs/coreui/src/components/notifications/DismissButton.tsx @@ -1,5 +1,5 @@ import Close from '@material-ui/icons/Close'; -import { screenReaderOnly } from '../../../styleDefinitions/typography'; +import { screenReaderOnly } from '../../styleDefinitions/typography'; interface Props { className?: string; diff --git a/packages/libs/coreui/src/components/information/notifications/SnackbarProvider.tsx b/packages/libs/coreui/src/components/notifications/SnackbarProvider.tsx similarity index 96% rename from packages/libs/coreui/src/components/information/notifications/SnackbarProvider.tsx rename to packages/libs/coreui/src/components/notifications/SnackbarProvider.tsx index 6a03db3883..9e71f75f0d 100644 --- a/packages/libs/coreui/src/components/information/notifications/SnackbarProvider.tsx +++ b/packages/libs/coreui/src/components/notifications/SnackbarProvider.tsx @@ -15,8 +15,8 @@ import { success, error, warning, -} from '../../../definitions/colors'; -import { UITheme, useUITheme } from '../../theming'; +} from '../../definitions/colors'; +import { UITheme, useUITheme } from '../theming'; export type SnackbarStyleProps = T & { theme?: UITheme }; diff --git a/packages/libs/coreui/src/components/information/notifications/useSnackbar.tsx b/packages/libs/coreui/src/components/notifications/useSnackbar.tsx similarity index 100% rename from packages/libs/coreui/src/components/information/notifications/useSnackbar.tsx rename to packages/libs/coreui/src/components/notifications/useSnackbar.tsx diff --git a/packages/libs/coreui/src/index.ts b/packages/libs/coreui/src/index.ts index fa9d2035af..8ad711d2f5 100644 --- a/packages/libs/coreui/src/index.ts +++ b/packages/libs/coreui/src/index.ts @@ -1,5 +1,5 @@ // Information -export * from './components/information/Tooltip'; +export * from './components/info/Tooltip'; // Typography export * from './components/typography'; From fbd47da4845f4a8ffe5c9fd1e056666ec01ab3a7 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 26 Feb 2024 13:50:56 -0500 Subject: [PATCH 03/17] Change MUI tooltips to Coreui --- .../src/components/widgets/Tooltip.tsx | 1 - .../Mesa/Components/AnchoredTooltip.jsx | 4 ++-- .../Components/{Tooltip.jsx => MesaTooltip.jsx} | 6 +++--- .../src/components/Mesa/Ui/HeadingCell.jsx | 8 ++++---- .../libs/coreui/src/components/Mesa/index.jsx | 4 ++-- .../components/inputs/SearchBox/SearchBox.tsx | 17 +++-------------- .../inputs/checkboxes/CheckboxList.tsx | 2 +- .../eda/src/lib/core/components/FilterChip.tsx | 3 ++- .../computations/RunComputeButton.tsx | 2 +- .../core/components/computations/StartPage.tsx | 2 +- .../plugins/differentialabundance.tsx | 2 +- .../variableSelectors/VariableList.tsx | 7 +++---- .../variableSelectors/VariableTreeDropdown.tsx | 2 +- .../visualizations/InputVariables.tsx | 2 +- .../visualizations/VisualizationsContainer.tsx | 2 +- .../implementations/LineplotVisualization.tsx | 2 +- .../implementations/MosaicVisualization.tsx | 2 +- .../src/lib/map/analysis/MapVizManagement.tsx | 2 +- .../CategoricalMarkerConfigurationTable.tsx | 2 +- .../mapTypes/MapTypeHeaderStudyDetails.tsx | 2 +- .../eda/src/lib/workspace/ActionIconButton.tsx | 2 +- .../libs/eda/src/lib/workspace/AllAnalyses.tsx | 3 +-- .../Subsetting/SubsetDownloadModal.tsx | 2 +- .../src/lib/components/OrganismParam.tsx | 2 +- .../lib/components/PreferredOrganismsConfig.tsx | 2 +- .../wdk-client/src/Components/Icon/HelpIcon.tsx | 2 +- .../ResultTableSummaryView/AttributeCell.tsx | 2 +- .../ResultTableAddColumnsDialog.tsx | 2 +- .../src/Views/Strategy/SearchInputSelector.tsx | 2 +- .../src/App/Categories/CategoryIcon.jsx | 2 +- .../web-common/src/App/Showcase/CardList.jsx | 2 +- .../web-common/src/App/Studies/StudyCard.jsx | 2 +- .../libs/web-common/src/components/Footer.jsx | 2 +- .../src/components/SiteSearch/SiteSearch.tsx | 2 +- .../src/components/homepage/ProjectLink.tsx | 2 +- .../src/components/homepage/SearchPane.tsx | 2 +- .../js/client/components/OrganismFilter.tsx | 2 +- .../genomeSummaryView/RegionDialog.tsx | 2 +- .../genomeSummaryView/ResultsTable.tsx | 2 +- .../records/gene-list-export-utils.tsx | 2 +- 40 files changed, 51 insertions(+), 64 deletions(-) delete mode 100644 packages/libs/components/src/components/widgets/Tooltip.tsx rename packages/libs/coreui/src/components/Mesa/Components/{Tooltip.jsx => MesaTooltip.jsx} (98%) diff --git a/packages/libs/components/src/components/widgets/Tooltip.tsx b/packages/libs/components/src/components/widgets/Tooltip.tsx deleted file mode 100644 index 17a3607d7c..0000000000 --- a/packages/libs/components/src/components/widgets/Tooltip.tsx +++ /dev/null @@ -1 +0,0 @@ -export { HtmlTooltip, Tooltip } from '../../../../coreui/src/index'; diff --git a/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx b/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx index ee74932a87..6110521eb3 100644 --- a/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx +++ b/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { debounce } from 'lodash'; -import Tooltip from './Tooltip'; +import MesaTooltip from './MesaTooltip'; import Events from '../Utils/Events'; import { MESA_SCROLL_EVENT, MESA_REFLOW_EVENT } from '../Ui/MesaContants'; @@ -56,7 +56,7 @@ class AnchoredTooltip extends React.Component { const extractedProps = { ...props, children }; return ( - - + ); } diff --git a/packages/libs/coreui/src/components/Mesa/index.jsx b/packages/libs/coreui/src/components/Mesa/index.jsx index 8a97374626..f2aee4868b 100644 --- a/packages/libs/coreui/src/components/Mesa/index.jsx +++ b/packages/libs/coreui/src/components/Mesa/index.jsx @@ -9,7 +9,7 @@ import ActionToolbar from './Ui/ActionToolbar'; import PaginationMenu from './Ui/PaginationMenu'; import MesaController from './Ui/MesaController'; -import Tooltip from './Components/Tooltip'; +import MesaTooltip from './Components/MesaTooltip'; import Checkbox from './Components/Checkbox'; import BodyLayer from './Components/BodyLayer'; import HelpTrigger from './Components/HelpTrigger'; @@ -31,7 +31,7 @@ export { TableToolbar, ActionToolbar, PaginationMenu, - Tooltip, + MesaTooltip, Checkbox, BodyLayer, HelpTrigger, diff --git a/packages/libs/coreui/src/components/inputs/SearchBox/SearchBox.tsx b/packages/libs/coreui/src/components/inputs/SearchBox/SearchBox.tsx index 44f3639f03..da7a3f8f52 100644 --- a/packages/libs/coreui/src/components/inputs/SearchBox/SearchBox.tsx +++ b/packages/libs/coreui/src/components/inputs/SearchBox/SearchBox.tsx @@ -4,18 +4,7 @@ import { merge } from 'lodash'; import { safeHtml } from '../SelectTree/Utils'; import { Close, Filter } from '../../icons'; import { Help, Search } from '@material-ui/icons'; -import { Theme, Tooltip, withStyles } from '@material-ui/core'; - -const StyledTooltip = withStyles((theme: Theme) => ({ - tooltip: { - backgroundColor: '#fffde7', - color: 'rgba(0, 0, 0, 0.87)', - maxWidth: 320, - fontSize: theme.typography.pxToRem(12), - border: '1px solid #dadde9', - boxShadow: theme.shadows[1], - }, -}))(Tooltip); +import { Tooltip } from '../../info/Tooltip'; type SearchBoxProps = { /** Set the autofocus property of the underlying HTMLTextInputElement */ @@ -208,9 +197,9 @@ export default function SearchBox({ {/* use safeHtml for helpText to allow italic */} {!helpText ? null : ( - + - + )} ); diff --git a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx index a09cda221f..9dc1c29a4a 100644 --- a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx +++ b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx @@ -5,7 +5,7 @@ import { merge } from 'lodash'; import { useMemo } from 'react'; import { UITheme } from '../../theming/types'; import useUITheme from '../../theming/useUITheme'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '../../info/Tooltip'; export type CheckboxListStyleSpec = { container: { diff --git a/packages/libs/eda/src/lib/core/components/FilterChip.tsx b/packages/libs/eda/src/lib/core/components/FilterChip.tsx index da13349a93..344ad8fc21 100644 --- a/packages/libs/eda/src/lib/core/components/FilterChip.tsx +++ b/packages/libs/eda/src/lib/core/components/FilterChip.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from 'react'; -import { Chip, Tooltip } from '@material-ui/core'; +import { Chip } from '@material-ui/core'; +import { Tooltip } from '@veupathdb/coreui'; import { makeStyles } from '@material-ui/core/styles'; interface Props { diff --git a/packages/libs/eda/src/lib/core/components/computations/RunComputeButton.tsx b/packages/libs/eda/src/lib/core/components/computations/RunComputeButton.tsx index 322f915bd8..733437345c 100644 --- a/packages/libs/eda/src/lib/core/components/computations/RunComputeButton.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/RunComputeButton.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { FilledButton } from '@veupathdb/coreui'; import { ComputationAppOverview } from '../../types/visualization'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { JobStatus } from './ComputeJobStatusHook'; interface Props { diff --git a/packages/libs/eda/src/lib/core/components/computations/StartPage.tsx b/packages/libs/eda/src/lib/core/components/computations/StartPage.tsx index b2240bea19..28ce7268c9 100644 --- a/packages/libs/eda/src/lib/core/components/computations/StartPage.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/StartPage.tsx @@ -4,7 +4,7 @@ import { isEqual } from 'lodash'; import { H5, H6 } from '@veupathdb/coreui'; import { makeClassNameHelper } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; import '../visualizations/Visualizations.scss'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@veupathdb/coreui'; import { AnalysisState } from '../../../core'; import { createComputation } from '../../../core/components/computations/Utils'; import { v4 as uuid } from 'uuid'; diff --git a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx index 7af2e25247..f32480754e 100644 --- a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx @@ -34,7 +34,7 @@ import { FloatingButton, H6 } from '@veupathdb/coreui'; import { SwapHorizOutlined } from '@material-ui/icons'; import './Plugins.scss'; import { makeClassNameHelper } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@veupathdb/coreui'; import { GetBinRangesProps, getBinRanges, diff --git a/packages/libs/eda/src/lib/core/components/variableSelectors/VariableList.tsx b/packages/libs/eda/src/lib/core/components/variableSelectors/VariableList.tsx index 1a371c3056..e75b66eccf 100644 --- a/packages/libs/eda/src/lib/core/components/variableSelectors/VariableList.tsx +++ b/packages/libs/eda/src/lib/core/components/variableSelectors/VariableList.tsx @@ -36,8 +36,7 @@ import { Field, FieldTreeNode, } from '@veupathdb/wdk-client/lib/Components/AttributeFilter/Types'; -import { Tooltip } from '@material-ui/core'; -import { HtmlTooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { HtmlTooltip } from '@veupathdb/coreui'; import { safeHtml } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; // import ShowHideVariableContext import { VariableDescriptor } from '../../types/variable'; @@ -479,7 +478,7 @@ export default function VariableList({ const additionalFilters = useMemo( () => [ - - , + , ], [ showOnlyStarredVariables, diff --git a/packages/libs/eda/src/lib/core/components/variableSelectors/VariableTreeDropdown.tsx b/packages/libs/eda/src/lib/core/components/variableSelectors/VariableTreeDropdown.tsx index 216275da63..39c96cbb79 100644 --- a/packages/libs/eda/src/lib/core/components/variableSelectors/VariableTreeDropdown.tsx +++ b/packages/libs/eda/src/lib/core/components/variableSelectors/VariableTreeDropdown.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@veupathdb/coreui'; import { Cancel } from '@veupathdb/coreui/lib/assets/icons'; import { gray, red } from '@veupathdb/coreui/lib/definitions/colors'; diff --git a/packages/libs/eda/src/lib/core/components/visualizations/InputVariables.tsx b/packages/libs/eda/src/lib/core/components/visualizations/InputVariables.tsx index 5f40975067..e2a8b91627 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/InputVariables.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/InputVariables.tsx @@ -12,7 +12,7 @@ import VariableTreeDropdown from '../variableSelectors/VariableTreeDropdown'; import { Toggle } from '@veupathdb/coreui'; import { makeEntityDisplayName } from '../../utils/study-metadata'; import { useInputStyles } from './inputStyles'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import RadioButtonGroup from '@veupathdb/components/lib/components/widgets/RadioButtonGroup'; import { isEqual } from 'lodash'; import { red } from '@veupathdb/coreui/lib/definitions/colors'; diff --git a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx index 4dd193b2e4..262b0c3ff5 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx @@ -26,7 +26,7 @@ import Banner from '@veupathdb/coreui/lib/components/banners/Banner'; import { useUITheme } from '@veupathdb/coreui/lib/components/theming'; import { useLocalBackedState } from '@veupathdb/wdk-client/lib/Hooks/LocalBackedState'; import PlaceholderIcon from './PlaceholderIcon'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@veupathdb/coreui'; import { isEqual, groupBy } from 'lodash'; import { EntityCounts } from '../../hooks/entityCounts'; import { useStudyRecord } from '../../hooks/workspace'; diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx index f1106cd5db..1d37009111 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx @@ -134,7 +134,7 @@ import { useDeepValue } from '../../../hooks/immutability'; // reset to defaults button import { ResetButtonCoreUI } from '../../ResetButton'; import Banner from '@veupathdb/coreui/lib/components/banners/Banner'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { FloatingLineplotExtraProps } from '../../../../map/analysis/hooks/plugins/lineplot'; import * as DateMath from 'date-arithmetic'; diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx index d4e2c007b4..537c81925a 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx @@ -69,7 +69,7 @@ import { LayoutOptions, TitleOptions } from '../../layouts/types'; import SingleSelect from '@veupathdb/coreui/lib/components/inputs/SingleSelect'; import { useInputStyles } from '../inputStyles'; import { ClearSelectionButton } from '../../variableSelectors/VariableTreeDropdown'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import Banner from '@veupathdb/coreui/lib/components/banners/Banner'; /** diff --git a/packages/libs/eda/src/lib/map/analysis/MapVizManagement.tsx b/packages/libs/eda/src/lib/map/analysis/MapVizManagement.tsx index aecc40eb9e..154e340492 100644 --- a/packages/libs/eda/src/lib/map/analysis/MapVizManagement.tsx +++ b/packages/libs/eda/src/lib/map/analysis/MapVizManagement.tsx @@ -2,7 +2,7 @@ import { Close, FloatingButton, H5, Paragraph } from '@veupathdb/coreui'; import { useState } from 'react'; import { v4 as uuid } from 'uuid'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@veupathdb/coreui'; import { Add } from '@material-ui/icons'; import { useUITheme } from '@veupathdb/coreui/lib/components/theming'; import { makeClassNameHelper } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; diff --git a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerConfigurationTable.tsx b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerConfigurationTable.tsx index efd58abf53..3e172fa138 100644 --- a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerConfigurationTable.tsx +++ b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerConfigurationTable.tsx @@ -5,7 +5,7 @@ import { MesaStateProps, } from '@veupathdb/coreui/lib/components/Mesa/types'; import { AllValuesDefinition } from '../../../core'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { ColorPaletteDefault } from '@veupathdb/components/lib/types/plots'; import RadioButtonGroup from '@veupathdb/components/lib/components/widgets/RadioButtonGroup'; import { UNSELECTED_TOKEN } from '../../constants'; diff --git a/packages/libs/eda/src/lib/map/analysis/mapTypes/MapTypeHeaderStudyDetails.tsx b/packages/libs/eda/src/lib/map/analysis/mapTypes/MapTypeHeaderStudyDetails.tsx index 57dd71fd69..2e1c17187f 100644 --- a/packages/libs/eda/src/lib/map/analysis/mapTypes/MapTypeHeaderStudyDetails.tsx +++ b/packages/libs/eda/src/lib/map/analysis/mapTypes/MapTypeHeaderStudyDetails.tsx @@ -1,6 +1,6 @@ import { Info } from '@material-ui/icons'; import { useQuery } from '@tanstack/react-query'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { Filter, useStudyEntities, diff --git a/packages/libs/eda/src/lib/workspace/ActionIconButton.tsx b/packages/libs/eda/src/lib/workspace/ActionIconButton.tsx index 071a5aba9b..86142fd0d6 100644 --- a/packages/libs/eda/src/lib/workspace/ActionIconButton.tsx +++ b/packages/libs/eda/src/lib/workspace/ActionIconButton.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { IconAlt } from '@veupathdb/wdk-client/lib/Components'; import { cx } from './Utils'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@veupathdb/coreui'; interface Props { iconClassName: string; diff --git a/packages/libs/eda/src/lib/workspace/AllAnalyses.tsx b/packages/libs/eda/src/lib/workspace/AllAnalyses.tsx index 550cbdb774..64311e1028 100644 --- a/packages/libs/eda/src/lib/workspace/AllAnalyses.tsx +++ b/packages/libs/eda/src/lib/workspace/AllAnalyses.tsx @@ -12,7 +12,6 @@ import { InputAdornment, makeStyles, TextField, - Tooltip, } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; import InfoIcon from '@material-ui/icons/Info'; @@ -49,7 +48,7 @@ import { } from '../core/utils/analysis'; import { convertISOToDisplayFormat } from '../core/utils/date-conversion'; import ShareFromAnalysesList from './sharing/ShareFromAnalysesList'; -import { Checkbox, Toggle, colors } from '@veupathdb/coreui'; +import { Checkbox, Toggle, Tooltip, colors } from '@veupathdb/coreui'; interface AnalysisAndDataset { analysis: AnalysisSummary & { diff --git a/packages/libs/eda/src/lib/workspace/Subsetting/SubsetDownloadModal.tsx b/packages/libs/eda/src/lib/workspace/Subsetting/SubsetDownloadModal.tsx index 0c1cb26de6..64bf898eb4 100644 --- a/packages/libs/eda/src/lib/workspace/Subsetting/SubsetDownloadModal.tsx +++ b/packages/libs/eda/src/lib/workspace/Subsetting/SubsetDownloadModal.tsx @@ -10,7 +10,7 @@ import { LoadingOverlay, HelpIcon, } from '@veupathdb/wdk-client/lib/Components'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@veupathdb/coreui'; import MultiSelectVariableTree from '../../core/components/variableSelectors/MultiSelectVariableTree'; import { Modal, DataGrid, MesaButton, Download } from '@veupathdb/coreui'; diff --git a/packages/libs/preferred-organisms/src/lib/components/OrganismParam.tsx b/packages/libs/preferred-organisms/src/lib/components/OrganismParam.tsx index 2cfc10c65f..7f80be19c7 100644 --- a/packages/libs/preferred-organisms/src/lib/components/OrganismParam.tsx +++ b/packages/libs/preferred-organisms/src/lib/components/OrganismParam.tsx @@ -10,7 +10,7 @@ import { useLocation } from 'react-router'; import { Loading } from '@veupathdb/wdk-client/lib/Components'; import { CheckboxTreeProps } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { pruneDescendantNodes } from '@veupathdb/wdk-client/lib/Utils/TreeUtils'; import { diff --git a/packages/libs/preferred-organisms/src/lib/components/PreferredOrganismsConfig.tsx b/packages/libs/preferred-organisms/src/lib/components/PreferredOrganismsConfig.tsx index 0ed564883f..72bd8b7773 100644 --- a/packages/libs/preferred-organisms/src/lib/components/PreferredOrganismsConfig.tsx +++ b/packages/libs/preferred-organisms/src/lib/components/PreferredOrganismsConfig.tsx @@ -29,7 +29,7 @@ import { getNodeChildren, getNodeId } from '../utils/organismNodes'; import { PreferredOrganismsToggleHelp } from './PreferredOrganismsToggleHelp'; import './PreferredOrganismsConfig.scss'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@veupathdb/coreui'; import useSnackbar from '@veupathdb/coreui/lib/components/notifications/useSnackbar'; export const cx = makeClassNameHelper('PreferredOrganismsConfig'); diff --git a/packages/libs/wdk-client/src/Components/Icon/HelpIcon.tsx b/packages/libs/wdk-client/src/Components/Icon/HelpIcon.tsx index 7524ad0719..c93cdf3d8b 100644 --- a/packages/libs/wdk-client/src/Components/Icon/HelpIcon.tsx +++ b/packages/libs/wdk-client/src/Components/Icon/HelpIcon.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Icon from '../../Components/Icon/IconAlt'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import '../../Components/Icon/HelpIcon.scss'; diff --git a/packages/libs/wdk-client/src/Views/ResultTableSummaryView/AttributeCell.tsx b/packages/libs/wdk-client/src/Views/ResultTableSummaryView/AttributeCell.tsx index ba2a86252f..d0363e4d49 100644 --- a/packages/libs/wdk-client/src/Views/ResultTableSummaryView/AttributeCell.tsx +++ b/packages/libs/wdk-client/src/Views/ResultTableSummaryView/AttributeCell.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { isEqual, truncate } from 'lodash'; import { RecordInstance, AttributeField } from '../../Utils/WdkModel'; import { safeHtml, wrappable } from '../../Utils/ComponentUtils'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { useIsRefOverflowingHorizontally } from '../../Hooks/Overflow'; interface AttributeCellProps { diff --git a/packages/libs/wdk-client/src/Views/ResultTableSummaryView/ResultTableAddColumnsDialog.tsx b/packages/libs/wdk-client/src/Views/ResultTableSummaryView/ResultTableAddColumnsDialog.tsx index 26c8644ab5..f46bf8887d 100644 --- a/packages/libs/wdk-client/src/Views/ResultTableSummaryView/ResultTableAddColumnsDialog.tsx +++ b/packages/libs/wdk-client/src/Views/ResultTableSummaryView/ResultTableAddColumnsDialog.tsx @@ -19,7 +19,7 @@ import { import { LinksPosition } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree'; import { getLeaves } from '../../Utils/TreeUtils'; import { differenceWith } from 'lodash'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; const MAX_COLUMNS_ALLOWED = 80; diff --git a/packages/libs/wdk-client/src/Views/Strategy/SearchInputSelector.tsx b/packages/libs/wdk-client/src/Views/Strategy/SearchInputSelector.tsx index 667484a80b..a57ab6a360 100644 --- a/packages/libs/wdk-client/src/Views/Strategy/SearchInputSelector.tsx +++ b/packages/libs/wdk-client/src/Views/Strategy/SearchInputSelector.tsx @@ -5,7 +5,7 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { createSelector } from 'reselect'; -import { HtmlTooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { HtmlTooltip } from '@veupathdb/coreui'; import { requestBasketCounts } from '../../Actions/BasketActions'; import { diff --git a/packages/libs/web-common/src/App/Categories/CategoryIcon.jsx b/packages/libs/web-common/src/App/Categories/CategoryIcon.jsx index 65d2b1178e..d8137b6be1 100755 --- a/packages/libs/web-common/src/App/Categories/CategoryIcon.jsx +++ b/packages/libs/web-common/src/App/Categories/CategoryIcon.jsx @@ -2,7 +2,7 @@ import './CategoryIcon.css'; import { capitalize } from 'lodash'; import React from 'react'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { getCategoryColor } from './CategoryUtils'; diff --git a/packages/libs/web-common/src/App/Showcase/CardList.jsx b/packages/libs/web-common/src/App/Showcase/CardList.jsx index 181083bfef..e5c7353e5e 100644 --- a/packages/libs/web-common/src/App/Showcase/CardList.jsx +++ b/packages/libs/web-common/src/App/Showcase/CardList.jsx @@ -5,7 +5,7 @@ import Select from 'react-select'; import { Link, RealTimeSearchBox } from '@veupathdb/wdk-client/lib/Components'; import { projectId } from '../../config'; import PlaceholderCard from './PlaceholderCard'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; const CLASS_NAME = 'CardList'; const SHOW_CATEGORIES_DROPDOWN = projectId === 'MicrobiomeDB'; diff --git a/packages/libs/web-common/src/App/Studies/StudyCard.jsx b/packages/libs/web-common/src/App/Studies/StudyCard.jsx index 4160483343..f23fd04eb4 100755 --- a/packages/libs/web-common/src/App/Studies/StudyCard.jsx +++ b/packages/libs/web-common/src/App/Studies/StudyCard.jsx @@ -8,7 +8,7 @@ import DownloadLink from './DownloadLink'; import { isPrereleaseStudy } from '@veupathdb/study-data-access/lib/data-restriction/DataRestrictionUtils'; import './StudyCard.scss'; import { makeEdaRoute } from '../../routes'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; class StudyCard extends React.Component { constructor(props) { diff --git a/packages/libs/web-common/src/components/Footer.jsx b/packages/libs/web-common/src/components/Footer.jsx index b1a2b95e6f..5601e1633c 100644 --- a/packages/libs/web-common/src/components/Footer.jsx +++ b/packages/libs/web-common/src/components/Footer.jsx @@ -4,7 +4,7 @@ import NewWindowLink from './NewWindowLink'; import { formatReleaseDate } from '../util/formatters'; import { makeClassNameHelper } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import '../components/homepage/ProjectLink.scss'; diff --git a/packages/libs/web-common/src/components/SiteSearch/SiteSearch.tsx b/packages/libs/web-common/src/components/SiteSearch/SiteSearch.tsx index 194251c9d2..506751fdaf 100644 --- a/packages/libs/web-common/src/components/SiteSearch/SiteSearch.tsx +++ b/packages/libs/web-common/src/components/SiteSearch/SiteSearch.tsx @@ -1,4 +1,4 @@ -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { DataGrid } from '@veupathdb/coreui'; import { CheckboxList, diff --git a/packages/libs/web-common/src/components/homepage/ProjectLink.tsx b/packages/libs/web-common/src/components/homepage/ProjectLink.tsx index 6c92617fd6..009425ff0a 100644 --- a/packages/libs/web-common/src/components/homepage/ProjectLink.tsx +++ b/packages/libs/web-common/src/components/homepage/ProjectLink.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { makeClassNameHelper } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import './ProjectLink.scss'; diff --git a/packages/libs/web-common/src/components/homepage/SearchPane.tsx b/packages/libs/web-common/src/components/homepage/SearchPane.tsx index 14a0ebc41b..1a46045019 100644 --- a/packages/libs/web-common/src/components/homepage/SearchPane.tsx +++ b/packages/libs/web-common/src/components/homepage/SearchPane.tsx @@ -33,7 +33,7 @@ import { import { decode, arrayOf, string } from '@veupathdb/wdk-client/lib/Utils/Json'; import { Question } from '@veupathdb/wdk-client/lib/Utils/WdkModel'; -import { HtmlTooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { HtmlTooltip } from '@veupathdb/coreui'; import { combineClassNames, diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.tsx index c3365149a2..249e1a26b8 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.tsx +++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.tsx @@ -41,7 +41,7 @@ import { import { useReferenceStrains } from '@veupathdb/preferred-organisms/lib/hooks/referenceStrains'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import './OrganismFilter.scss'; diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/RegionDialog.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/RegionDialog.tsx index d9048b0a89..2b27085df4 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/RegionDialog.tsx +++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/RegionDialog.tsx @@ -7,7 +7,7 @@ import { } from '../../util/GenomeSummaryViewUtils'; import { FeatureTable } from './FeatureTable'; import { FeatureTooltip } from './FeatureTooltip'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; interface RegionDialogProps { region: GenomeViewRegionModel; diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsTable.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsTable.tsx index 76c9ba20a6..8a1b82c207 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsTable.tsx +++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/genomeSummaryView/ResultsTable.tsx @@ -13,7 +13,7 @@ import { GenomeViewSequenceModel, } from '../../util/GenomeSummaryViewUtils'; import { FeatureTooltip } from './FeatureTooltip'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; const resultColumnsFactory = defaultMemoize( ( diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/gene-list-export-utils.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/gene-list-export-utils.tsx index 188b732a2c..740776d10e 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/gene-list-export-utils.tsx +++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/gene-list-export-utils.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { uploadUserDataset } from '@veupathdb/user-datasets/lib/Utils/upload-user-dataset'; From afbc2ec2822be4ad660fd11d66a1333c8ecb344c Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 5 Mar 2024 17:06:09 -0500 Subject: [PATCH 04/17] Update WDKClient tooltip --- .../eda/src/lib/workspace/StudySummary.tsx | 8 +- .../data-restriction/DataRestrictionModal.tsx | 6 +- .../src/lib/Components/UserDatasetStatus.tsx | 4 +- packages/libs/wdk-client/src/Components.ts | 4 +- .../Components/AttributeFilter/FieldList.jsx | 6 +- .../Components/AttributeFilter/Histogram.jsx | 6 +- .../src/Components/DataTable/DataTable.tsx | 6 +- .../src/Components/Overlays/Tooltip.tsx | 209 ++++++------------ .../StepAnalysis/StepAnalysisTile.tsx | 9 +- .../Utils/StepAnalysisResults.tsx | 6 +- .../src/Views/Answer/AnswerFilter.jsx | 6 +- .../src/Views/Records/SectionTitle.tsx | 6 +- .../src/Views/Strategy/AllStrategies.tsx | 6 +- .../src/Views/Strategy/ShowAllToggle.tsx | 7 +- .../src/Views/Strategy/StepBoxes.tsx | 7 +- .../components/SiteSearch/SiteSearchInput.tsx | 14 +- .../questions/InternalGeneDataset.tsx | 6 +- .../StepAnalysisHpiGeneListResults.tsx | 6 +- .../cluster-graph/GraphControls.tsx | 12 +- .../js/client/utils/graphInformation.tsx | 10 +- 20 files changed, 132 insertions(+), 212 deletions(-) diff --git a/packages/libs/eda/src/lib/workspace/StudySummary.tsx b/packages/libs/eda/src/lib/workspace/StudySummary.tsx index c654084709..803e4d715b 100644 --- a/packages/libs/eda/src/lib/workspace/StudySummary.tsx +++ b/packages/libs/eda/src/lib/workspace/StudySummary.tsx @@ -1,4 +1,4 @@ -import { Tooltip } from '@veupathdb/wdk-client/lib/Components'; +import { WDKClientTooltip } from '@veupathdb/wdk-client/lib/Components'; import { renderAttributeValue } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; import { AttributeField } from '@veupathdb/wdk-client/lib/Utils/WdkModel'; import React from 'react'; @@ -17,14 +17,12 @@ export function StudySummary(props: Props) { {Object.entries(studyRecord.attributes).map( ([name, value]) => value != null && ( - {renderAttributeValue(value, { tabIndex: 0 })} - + ) )} diff --git a/packages/libs/study-data-access/src/data-restriction/DataRestrictionModal.tsx b/packages/libs/study-data-access/src/data-restriction/DataRestrictionModal.tsx index f7966021d6..6eb7d656a5 100644 --- a/packages/libs/study-data-access/src/data-restriction/DataRestrictionModal.tsx +++ b/packages/libs/study-data-access/src/data-restriction/DataRestrictionModal.tsx @@ -14,7 +14,7 @@ import Modal from '@veupathdb/wdk-client/lib/Components/Overlays/Modal'; import { IconAlt as Icon, Link, - Tooltip, + WDKClientTooltip, } from '@veupathdb/wdk-client/lib/Components'; import { safeHtml } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; import { getStudyAccess, getStudyId, getStudyName } from '../shared/studies'; @@ -197,12 +197,12 @@ function Buttons(props: Props) { )} {!approvalRequired ? null : user.isGuest ? ( - {submitDataAccessButton} - + ) : ( submitDataAccessButton )} diff --git a/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx b/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx index 0e569c29ff..c2ad8eaeed 100644 --- a/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx +++ b/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { IconAlt as Icon, Link, - Tooltip, + WDKClientTooltip, } from '@veupathdb/wdk-client/lib/Components'; import { UserDataset } from '../Utils/types'; @@ -56,7 +56,7 @@ export default function UserDatasetStatus(props: Props) { : 'exclamation-circle'; const children = ; const visibleContent = props.useTooltip ? ( - {children} + {children} ) : ( {children} {content} diff --git a/packages/libs/wdk-client/src/Components.ts b/packages/libs/wdk-client/src/Components.ts index f3228e203b..de2f22970c 100644 --- a/packages/libs/wdk-client/src/Components.ts +++ b/packages/libs/wdk-client/src/Components.ts @@ -54,7 +54,7 @@ import CommonModal from './Components/Overlays/CommonModal'; import Dialog from './Components/Overlays/Dialog'; import Modal from './Components/Overlays/Modal'; import Popup from './Components/Overlays/Popup'; -import Tooltip from './Components/Overlays/Tooltip'; +import WDKClientTooltip from './Components/Overlays/Tooltip'; import Tabs from './Components/Tabs/Tabs'; import RealTimeSearchBox from './Components/SearchBox/RealTimeSearchBox'; import AttributeCell from './Views/ResultTableSummaryView/AttributeCell'; @@ -141,7 +141,7 @@ export { TextArea, TextBox, TextBoxMultivalued, - Tooltip, + WDKClientTooltip, UnhandledErrors, AttributeCell, ResultTable, diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx index 1719e52cbe..94712023ab 100644 --- a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx +++ b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx @@ -10,7 +10,7 @@ import CheckboxTree, { LinksPosition, } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree'; import Icon from '../../Components/Icon/IconAlt'; -import Tooltip from '../../Components/Overlays/Tooltip'; +import WDKClientTooltip from '../../Components/Overlays/Tooltip'; import { isFilterField, isMulti, @@ -187,7 +187,7 @@ function FieldNode({ node, isActive, searchTerm, handleFieldSelect }) { }, [isActive, nodeRef.current, searchTerm]); return ( - + {isFilterField(node.field) ? ( )} - + ); } diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx index 59fbf61d08..23a66ac1b9 100644 --- a/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx +++ b/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx @@ -24,7 +24,7 @@ import { } from '../../Components/AttributeFilter/AttributeFilterUtils'; import Icon from '../../Components/Icon/IconAlt'; import { CollapsibleSection, IconAlt } from '../../Components'; -import Tooltip from '../../Components/Overlays/Tooltip'; +import WDKClientTooltip from '../../Components/Overlays/Tooltip'; const DAY = 1000 * 60 * 60 * 24; @@ -836,9 +836,9 @@ export default Histogram; function RangeWarning({ rangeMin, rangeMax, selectionMin, selectionMax }) { if (rangeMin >= selectionMin && rangeMax <= selectionMax) return null; return ( - + - + ); } diff --git a/packages/libs/wdk-client/src/Components/DataTable/DataTable.tsx b/packages/libs/wdk-client/src/Components/DataTable/DataTable.tsx index ad7abecb55..198fd50f8d 100644 --- a/packages/libs/wdk-client/src/Components/DataTable/DataTable.tsx +++ b/packages/libs/wdk-client/src/Components/DataTable/DataTable.tsx @@ -22,7 +22,7 @@ import CheckboxList from '@veupathdb/coreui/lib/components/inputs/checkboxes/Che import { LinksPosition } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree'; import '../../Components/DataTable/DataTable.css'; import HelpIcon from '../Icon/HelpIcon'; -import Tooltip from '../Overlays/Tooltip'; +import WDKClientTooltip from '../Overlays/Tooltip'; import TabbableContainer from '../Display/TabbableContainer'; import { ErrorBoundary } from '../../Controllers'; @@ -612,7 +612,7 @@ class DataTable extends PureComponent { top: '0.25em', }} > - + - + diff --git a/packages/libs/web-common/src/components/SiteSearch/SiteSearchInput.tsx b/packages/libs/web-common/src/components/SiteSearch/SiteSearchInput.tsx index 4af2d92e4c..aff76fabed 100644 --- a/packages/libs/web-common/src/components/SiteSearch/SiteSearchInput.tsx +++ b/packages/libs/web-common/src/components/SiteSearch/SiteSearchInput.tsx @@ -1,7 +1,7 @@ import { isEmpty } from 'lodash'; import React, { useCallback, useEffect, useRef } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import { Tooltip } from '@veupathdb/wdk-client/lib/Components'; +import { WDKClientTooltip } from '@veupathdb/wdk-client/lib/Components'; import { useSessionBackedState } from '@veupathdb/wdk-client/lib/Hooks/SessionBackedState'; import { makeClassNameHelper, @@ -111,7 +111,7 @@ export const SiteSearchInput = wrappable(function ({ placeholderText }: Props) { ))} {hasFilters ? ( - + - + ) : null} {location.pathname !== SITE_SEARCH_ROUTE && lastSearchQueryString && ( - + - + )} - - + ); }); diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/InternalGeneDataset.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/InternalGeneDataset.tsx index 59bd4f5361..9eca7ecae3 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/InternalGeneDataset.tsx +++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/InternalGeneDataset.tsx @@ -12,7 +12,7 @@ import { useLocation, useHistory } from 'react-router'; import { Loading, Link, - Tooltip, + WDKClientTooltip, HelpIcon, } from '@veupathdb/wdk-client/lib/Components'; import { TabbedDisplay } from '@veupathdb/coreui'; @@ -277,7 +277,7 @@ function InternalGeneDatasetContent(props: Props) { Legend:
{displayCategoryOrder.map((categoryName) => ( - @@ -292,7 +292,7 @@ function InternalGeneDatasetContent(props: Props) { {displayCategoriesByName[categoryName].displayName} - + ))}
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx index 411ff50f98..f038b84524 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx +++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx @@ -7,7 +7,7 @@ import { import Templates from '@veupathdb/coreui/lib/components/Mesa/Templates'; import './StepAnalysisEnrichmentResult.scss'; -import { Tooltip } from '@veupathdb/wdk-client/lib/Components'; +import { WDKClientTooltip } from '@veupathdb/wdk-client/lib/Components'; const baseColumnSettings: Pick< ColumnSettings, @@ -22,7 +22,7 @@ const baseColumnSettings: Pick< { key: 'experimentName', renderCell: (cellProps: any) => ( - {cellProps.row.experimentName} - + ), sortable: true, }, diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/cluster-graph/GraphControls.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/cluster-graph/GraphControls.tsx index 17dccd684a..58261e30ed 100644 --- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/cluster-graph/GraphControls.tsx +++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/cluster-graph/GraphControls.tsx @@ -6,7 +6,7 @@ import { RadioList, SliderInput, TextBox, - Tooltip, + WDKClientTooltip, } from '@veupathdb/wdk-client/lib/Components'; import { @@ -242,7 +242,7 @@ export interface LegendEntryProps { const TOOLTIP_POSITION = { my: 'top left', at: 'bottom right', -}; +} as const; function LegendEntry({ symbol, @@ -265,8 +265,12 @@ function LegendEntry({ return tooltip == null ? ( legendContent ) : ( - + {legendContent} - + ); } diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/utils/graphInformation.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/utils/graphInformation.tsx index ab12028fb2..c21ae5b3b1 100644 --- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/utils/graphInformation.tsx +++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/utils/graphInformation.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Link, Tooltip } from '@veupathdb/wdk-client/lib/Components'; +import { Link, WDKClientTooltip } from '@veupathdb/wdk-client/lib/Components'; import Icon from '@veupathdb/wdk-client/lib/Components/Icon/IconAlt'; import { TabConfig } from '@veupathdb/wdk-client/lib/Components/Tabs/Tabs'; @@ -32,11 +32,11 @@ export const graphInformationBaseTabConfigs: GraphInformationBaseTabConfig[] = [ display: (
Sequence List - +
- +
), }, @@ -45,11 +45,11 @@ export const graphInformationBaseTabConfigs: GraphInformationBaseTabConfig[] = [ display: (
Node Details - +
- +
), }, From d5af949e1e0c538e224bac0ed19adb8af2bbeef9 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 11 Mar 2024 12:38:33 -0400 Subject: [PATCH 05/17] Reimplement Mesa Tooltip using CoreUI Tooltip --- .../Mesa/Components/MesaTooltip.jsx | 196 ------------------ .../Mesa/Components/MesaTooltip.tsx | 73 +++++++ .../src/Components/Overlays/Tooltip.tsx | 2 +- 3 files changed, 74 insertions(+), 197 deletions(-) delete mode 100644 packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.jsx create mode 100644 packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx diff --git a/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.jsx b/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.jsx deleted file mode 100644 index e3164e98ff..0000000000 --- a/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.jsx +++ /dev/null @@ -1,196 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import BodyLayer from './BodyLayer'; -import { EventsFactory } from '../Utils/Events'; - -class MesaTooltip extends React.Component { - constructor(props) { - super(props); - - this.state = { - isShown: false, - isFocus: false, - isHovered: false, - isDisengaged: true, - }; - - this.componentDidMount = this.componentDidMount.bind(this); - this.componentWillUnmount = this.componentWillUnmount.bind(this); - this.getHideDelay = this.getHideDelay.bind(this); - this.getShowDelay = this.getShowDelay.bind(this); - this.getCornerClass = this.getCornerClass.bind(this); - this.showTooltip = this.showTooltip.bind(this); - this.hideTooltip = this.hideTooltip.bind(this); - this.engageTooltip = this.engageTooltip.bind(this); - this.disengageTooltip = this.disengageTooltip.bind(this); - this.renderTooltipContent = this.renderTooltipContent.bind(this); - } - - /* -=-=-=-=-=-=-=-=-=-=-=-= Lifecycle -=-=-=-=-=-=-=-=-=-=-=-= */ - - componentDidMount() { - if (!this.el) { - console.error(` - Tooltip Error: Can't setup focusIn/focusOut events. - Element ref could not be found; was render interrupted? - `); - } else { - this.events = EventsFactory(this.el); - this.events.use({ - focusIn: this.engageTooltip, - keypress: this.engageTooltip, - mouseEnter: this.engageTooltip, - - focusOut: this.disengageTooltip, - mouseLeave: this.disengageTooltip, - }); - } - } - - componentWillUnmount() { - if (this.events) this.events.clearAll(); - clearTimeout(this.hideTimeout); - clearTimeout(this.showTimeout); - } - - /* -=-=-=-=-=-=-=-=-=-=-=-= Utilities -=-=-=-=-=-=-=-=-=-=-=-= */ - - static getOffset(node) { - return node.getBoundingClientRect(); - } - - getShowDelay() { - const { showDelay } = this.props; - return typeof showDelay === 'number' ? showDelay : 250; - } - getHideDelay() { - let { hideDelay } = this.props; - return typeof hideDelay === 'number' ? hideDelay : 500; - } - - getCornerClass() { - const { corner } = this.props; - if (typeof corner !== 'string' || !corner.length) return 'no-corner'; - return corner - .split(' ') - .filter((s) => s) - .join('-'); - } - - /* -=-=-=-=-=-=-=-=-=-=-=-= Show/Hide -=-=-=-=-=-=-=-=-=-=-=-= */ - - showTooltip() { - // compute position, or get from props - if (this.props.position && this.props.getPosition) { - console.error( - 'Warning: Tooltip expected either `props.position` or `props.getPosition`, but both were provided. ' + - 'Please update your render method to use one or the other. Using `props.position`.' - ); - } - - const position = this.props.position - ? this.props.position - : this.props.getPosition - ? this.props.getPosition() - : undefined; - - this.setState({ isShown: true, position }); - - if (this.hideTimeout) clearTimeout(this.hideTimeout); - } - - hideTooltip() { - if (!this.state.isDisengaged) return; - this.setState({ isShown: false }); - } - - /* -=-=-=-=-=-=-=-=-=-=-=-= Engage/Disengage -=-=-=-=-=-=-=-=-=-=-=-= */ - - engageTooltip() { - this.setState({ isDisengaged: false }); - this.showTimeout = setTimeout(() => { - this.showTooltip(); - if (this.hideTimeout) clearTimeout(this.hideTimeout); - }, this.getShowDelay()); - } - - disengageTooltip() { - this.setState({ isDisengaged: true }); - if (this.showTimeout) clearTimeout(this.showTimeout); - this.hideTimeout = setTimeout(this.hideTooltip, this.getHideDelay()); - } - - /* -=-=-=-=-=-=-=-=-=-=-=-= Renderers -=-=-=-=-=-=-=-=-=-=-=-= */ - - renderTooltipContent() { - const { isDisengaged, position } = this.state; - const { content, style, renderHtml } = this.props; - - const opacity = isDisengaged ? 0.01 : 1; - const { top, left } = Object.assign({ top: 0, left: 0 }, position); - const existingStyle = style && Object.keys(style).length ? style : {}; - const contentStyle = Object.assign( - {}, - { top, left, opacity }, - existingStyle - ); - - const cornerClass = this.getCornerClass(); - const disengagedClass = isDisengaged ? ' Tooltip-Content--Disengaged' : ''; - const className = ['Tooltip-Content', cornerClass, disengagedClass].join( - ' ' - ); - - return ( -
- {renderHtml ? ( -
- ) : ( - content - )} -
- ); - } - - render() { - const { isShown } = this.state; - const TooltipContent = this.renderTooltipContent; - - const { children, className } = this.props; - return ( -
(this.el = el)} - > - {!isShown ? null : ( - - - - )} - {children} -
- ); - } -} - -MesaTooltip.propTypes = { - hideDelay: PropTypes.number, - showDelay: PropTypes.number, - children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]), - className: PropTypes.string, - content: PropTypes.node, - corner: PropTypes.string, - fadeOut: PropTypes.bool, - position: PropTypes.object, - style: PropTypes.object, - getPosition: PropTypes.func, - renderHtml: PropTypes.bool, -}; - -export default MesaTooltip; diff --git a/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx b/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx new file mode 100644 index 0000000000..943b8c5706 --- /dev/null +++ b/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx @@ -0,0 +1,73 @@ +import React, { CSSProperties } from 'react'; + +import { Tooltip } from '../../info/Tooltip'; + +interface Position { + top?: CSSProperties['top']; + left?: CSSProperties['left']; +} + +interface MesaTooltipProps { + hideDelay?: number; + showDelay?: number; + children: React.ReactElement; + className?: string; + content: React.ReactNode; + corner?: string; + position?: Position; + style?: CSSProperties; + getPosition?: () => Position; + renderHtml?: boolean; +} + +const MesaTooltip = ({ + hideDelay, + showDelay, + children, + className, + content, + corner, + position, + style, + getPosition, + renderHtml, +}: MesaTooltipProps) => { + const getPositionResult = getPosition?.(); + const currentPosition = position + ? { + top: position?.top ?? 0, + left: position?.left ?? 0, + } + : getPositionResult + ? { + top: getPositionResult?.top ?? 0, + left: getPositionResult?.left ?? 0, + } + : { top: 0, left: 0 }; + const finalStyle = { + top: currentPosition.top, + left: currentPosition.left, + ...style, + }; + + return ( + + ) : ( + content ?? <> + ) + } + leaveDelay={hideDelay} + enterDelay={showDelay} + // arrow={corner ? corner !== 'no-corner' : false} + className={className + (corner ? ` ${corner}` : '')} + style={finalStyle} + > + {children} + + ); +}; + +export default MesaTooltip; diff --git a/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx b/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx index 6cb1154f56..86a315ae4c 100644 --- a/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx +++ b/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx @@ -72,7 +72,7 @@ Props) => { } // open={open} - classes={classes as any} + className={classes} arrow={true} enterDelay={showDelay} leaveDelay={hideDelay} From cfd91fe001e51592814eb249838f5823a9fd6b33 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 11 Mar 2024 14:41:12 -0400 Subject: [PATCH 06/17] Fix bad import --- .../wdk-client/src/Views/Records/RecordTable/RecordFilter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordFilter.tsx b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordFilter.tsx index e904ce6742..96fa96db92 100644 --- a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordFilter.tsx +++ b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordFilter.tsx @@ -4,7 +4,7 @@ import { HelpIcon, TabbableContainer, } from '../../../Components'; -import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { CheckboxList } from '@veupathdb/coreui'; import { LinksPosition } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree'; From 04e657b7ac0d5a66e1ba29e353d4a4df1eb0c631 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 12 Mar 2024 17:37:30 -0400 Subject: [PATCH 07/17] Get offset from element directly --- .../libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx | 2 +- packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx b/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx index 943b8c5706..f627ab002a 100644 --- a/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx +++ b/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx @@ -62,7 +62,7 @@ const MesaTooltip = ({ leaveDelay={hideDelay} enterDelay={showDelay} // arrow={corner ? corner !== 'no-corner' : false} - className={className + (corner ? ` ${corner}` : '')} + className={(className ?? '') + (corner ? ` ${corner}` : '')} style={finalStyle} > {children} diff --git a/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx index 77b76eebcc..c31ffc5daf 100644 --- a/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx +++ b/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx @@ -65,7 +65,7 @@ class HeadingCell extends React.PureComponent { updateOffset() { const { element } = this; if (!element) return; - let offset = MesaTooltip.getOffset(element); + const offset = element.getBoundingClientRect(); this.setState({ offset }); } From 094be2dd25b4c16f88fdcb51c0becc937b94cb58 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 12 Mar 2024 17:45:30 -0400 Subject: [PATCH 08/17] Clean up PR --- .../src/Components/Overlays/Tooltip.tsx | 27 +++++-------------- .../StepAnalysis/StepAnalysisTile.tsx | 1 - .../src/Views/Strategy/ShowAllToggle.tsx | 1 - .../src/Views/Strategy/StepBoxes.tsx | 1 - 4 files changed, 6 insertions(+), 24 deletions(-) diff --git a/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx b/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx index 86a315ae4c..ad5fc7bfa2 100644 --- a/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx +++ b/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx @@ -36,48 +36,33 @@ export interface TooltipPosition { // FIXME Add `renderContent` props that is a function that returns `typeof content` type Props = { - content: React.ReactNode; // title - children: React.ReactElement; // children - // open?: boolean; // open - classes?: string; // classes - // showTip?: boolean; // arrow + content: React.ReactNode; + children: React.ReactElement; + classes?: string; showEvent?: string; - showDelay?: number; // enterDelay + showDelay?: number; hideEvent?: string; - hideDelay?: number; // leaveDelay + hideDelay?: number; position?: TooltipPosition; - // solo?: boolean; - // onShow?: (e: Event) => void; // onOpen - // onHide?: (e: Event) => void; // onClose }; const WDKClientTooltip = ({ content, children, - // open, classes = 'qtip-wdk', - // showTip = true, - // showEvent, showDelay = defaultOptions.show.delay, - // hideEvent, hideDelay = defaultOptions.hide.delay, position = defaultOptions.position, -}: // solo = true, -// onShow, -// onHide, -Props) => { +}: Props) => { const placement = positionMap[position.at ?? defaultOptions.position.at]; return ( } - // open={open} className={classes} arrow={true} enterDelay={showDelay} leaveDelay={hideDelay} - // onOpen={onShow} - // onClose={onHide} placement={placement} > {children} diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx index d5e9df360d..b6e02ab2d5 100644 --- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx +++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx @@ -27,7 +27,6 @@ export const StepAnalysisTile: React.SFC = ({ loading, loadChoice, }) => ( - // here
- {/* here */}
- {/* here */} Date: Mon, 18 Mar 2024 16:26:50 -0400 Subject: [PATCH 09/17] Use HelpTrigger instead of MesaTooltip --- .../src/components/Mesa/Ui/HeadingCell.jsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx index c31ffc5daf..a89f807e02 100644 --- a/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx +++ b/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Templates from '../Templates'; import Icon from '../Components/Icon'; -import MesaTooltip from '../Components/MesaTooltip'; +import HelpTrigger from '../Components/HelpTrigger'; import { makeClassifier } from '../Utils/Utils'; import Events, { EventsFactory } from '../Utils/Events'; import { MESA_SCROLL_EVENT, MESA_REFLOW_EVENT } from './MesaContants'; @@ -180,21 +180,8 @@ class HeadingCell extends React.PureComponent { renderHelpTrigger() { const { column } = this.props; - const { offset } = this.state; - const { top, left, height } = offset ? offset : {}; - const position = { top: top + height, left }; - if (!column.helpText && !column.htmlHelp) return null; - return ( - - - - ); + return {column.htmlHelp ?? column.helpText}; } // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= From c17e80d8c78c211723ea0e7ad74eb3b65af4795d Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 18 Mar 2024 16:55:34 -0400 Subject: [PATCH 10/17] Fix help icon styling --- packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx | 1 + packages/libs/wdk-client/src/Core/Style/wdk-Common.scss | 4 +--- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx b/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx index ad5fc7bfa2..8c0889bc83 100644 --- a/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx +++ b/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx @@ -50,6 +50,7 @@ const WDKClientTooltip = ({ content, children, classes = 'qtip-wdk', + // classes, showDelay = defaultOptions.show.delay, hideDelay = defaultOptions.hide.delay, position = defaultOptions.position, diff --git a/packages/libs/wdk-client/src/Core/Style/wdk-Common.scss b/packages/libs/wdk-client/src/Core/Style/wdk-Common.scss index 1c8544eccc..5961766bda 100644 --- a/packages/libs/wdk-client/src/Core/Style/wdk-Common.scss +++ b/packages/libs/wdk-client/src/Core/Style/wdk-Common.scss @@ -341,10 +341,8 @@ button.wdk-Link { /* Use style similar to Tooltip from austinbillings/mesa.git */ .qtip-wdk { color: black; - background-color: #fffceb; - padding: 4px; + padding: 0 4px 0 4px; z-index: 1; - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); border-radius: 4px; border: none; font: unset; From 7b2bd021ce5d5a437d7c57d729f002b095452ed8 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 19 Mar 2024 17:42:24 -0400 Subject: [PATCH 11/17] Remove WDKClientTooltip --- .../Mesa/Components/MesaTooltip.tsx | 1 - .../data-restriction/DataRestrictionModal.tsx | 15 ++-- .../src/lib/Components/UserDatasetStatus.tsx | 9 +-- packages/libs/wdk-client/src/Components.ts | 2 - .../src/Components/Overlays/Tooltip.tsx | 74 ------------------- .../StepAnalysis/StepAnalysisTile.tsx | 11 +-- .../Utils/StepAnalysisResults.tsx | 6 +- .../src/Views/Records/SectionTitle.tsx | 7 +- .../src/Views/Strategy/AllStrategies.tsx | 6 +- .../src/Views/Strategy/ShowAllToggle.tsx | 13 ++-- .../src/Views/Strategy/StepBoxes.tsx | 9 +-- .../components/SiteSearch/SiteSearchInput.tsx | 16 ++-- .../js/client/components/QueryGrid.jsx | 4 +- .../questions/InternalGeneDataset.tsx | 15 ++-- .../StepAnalysisHpiGeneListResults.tsx | 8 +- 15 files changed, 49 insertions(+), 147 deletions(-) delete mode 100644 packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx diff --git a/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx b/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx index f627ab002a..ca5656a597 100644 --- a/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx +++ b/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx @@ -61,7 +61,6 @@ const MesaTooltip = ({ } leaveDelay={hideDelay} enterDelay={showDelay} - // arrow={corner ? corner !== 'no-corner' : false} className={(className ?? '') + (corner ? ` ${corner}` : '')} style={finalStyle} > diff --git a/packages/libs/study-data-access/src/data-restriction/DataRestrictionModal.tsx b/packages/libs/study-data-access/src/data-restriction/DataRestrictionModal.tsx index 6eb7d656a5..8fd659fbca 100644 --- a/packages/libs/study-data-access/src/data-restriction/DataRestrictionModal.tsx +++ b/packages/libs/study-data-access/src/data-restriction/DataRestrictionModal.tsx @@ -11,11 +11,8 @@ import { actionRequiresApproval, } from './DataRestrictionUtils'; import Modal from '@veupathdb/wdk-client/lib/Components/Overlays/Modal'; -import { - IconAlt as Icon, - Link, - WDKClientTooltip, -} from '@veupathdb/wdk-client/lib/Components'; +import { IconAlt as Icon, Link } from '@veupathdb/wdk-client/lib/Components'; +import { Tooltip } from '@veupathdb/coreui'; import { safeHtml } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; import { getStudyAccess, getStudyId, getStudyName } from '../shared/studies'; @@ -197,12 +194,12 @@ function Buttons(props: Props) { )} {!approvalRequired ? null : user.isGuest ? ( - {submitDataAccessButton} - + ) : ( submitDataAccessButton )} diff --git a/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx b/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx index c2ad8eaeed..279f5ac174 100644 --- a/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx +++ b/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx @@ -1,9 +1,6 @@ import * as React from 'react'; -import { - IconAlt as Icon, - Link, - WDKClientTooltip, -} from '@veupathdb/wdk-client/lib/Components'; +import { IconAlt as Icon, Link } from '@veupathdb/wdk-client/lib/Components'; +import { Tooltip } from '@veupathdb/coreui'; import { UserDataset } from '../Utils/types'; @@ -56,7 +53,7 @@ export default function UserDatasetStatus(props: Props) { : 'exclamation-circle'; const children = ; const visibleContent = props.useTooltip ? ( - {children} + {children} ) : ( {children} {content} diff --git a/packages/libs/wdk-client/src/Components.ts b/packages/libs/wdk-client/src/Components.ts index 8554a95f4b..4492786878 100644 --- a/packages/libs/wdk-client/src/Components.ts +++ b/packages/libs/wdk-client/src/Components.ts @@ -53,7 +53,6 @@ import CommonModal from './Components/Overlays/CommonModal'; import Dialog from './Components/Overlays/Dialog'; import Modal from './Components/Overlays/Modal'; import Popup from './Components/Overlays/Popup'; -import WDKClientTooltip from './Components/Overlays/Tooltip'; import Tabs from './Components/Tabs/Tabs'; import RealTimeSearchBox from './Components/SearchBox/RealTimeSearchBox'; import AttributeCell from './Views/ResultTableSummaryView/AttributeCell'; @@ -139,7 +138,6 @@ export { TextArea, TextBox, TextBoxMultivalued, - WDKClientTooltip, UnhandledErrors, AttributeCell, ResultTable, diff --git a/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx b/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx deleted file mode 100644 index 8c0889bc83..0000000000 --- a/packages/libs/wdk-client/src/Components/Overlays/Tooltip.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import { Tooltip } from '@veupathdb/coreui'; - -const defaultOptions = { - position: { - my: 'top left', - at: 'bottom left', - } as const, - hide: { - fixed: true, - delay: 250, - }, - show: { - solo: true, - delay: 1000, - }, -}; - -const positionMap = { - 'top left': 'top-start', - 'top center': 'top', - 'top right': 'top-end', - 'right center': 'right', - 'bottom right': 'bottom-end', - 'bottom center': 'bottom', - 'bottom left': 'bottom-start', - 'left center': 'left', -} as const; - -type PositionValue = keyof typeof positionMap; - -export interface TooltipPosition { - my?: PositionValue; - at?: PositionValue; -} - -// FIXME Add `renderContent` props that is a function that returns `typeof content` -type Props = { - content: React.ReactNode; - children: React.ReactElement; - classes?: string; - showEvent?: string; - showDelay?: number; - hideEvent?: string; - hideDelay?: number; - position?: TooltipPosition; -}; - -const WDKClientTooltip = ({ - content, - children, - classes = 'qtip-wdk', - // classes, - showDelay = defaultOptions.show.delay, - hideDelay = defaultOptions.hide.delay, - position = defaultOptions.position, -}: Props) => { - const placement = positionMap[position.at ?? defaultOptions.position.at]; - - return ( - } - className={classes} - arrow={true} - enterDelay={showDelay} - leaveDelay={hideDelay} - placement={placement} - > - {children} - - ); -}; - -export default WDKClientTooltip; diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx index b6e02ab2d5..737c4d9086 100644 --- a/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx +++ b/packages/libs/wdk-client/src/Components/StepAnalysis/StepAnalysisTile.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { WDKClientTooltip } from '../../Components'; import Spinnable from '../Shared/Spinnable'; import { memoize } from 'lodash/fp'; +import { Tooltip } from '@veupathdb/coreui'; interface StepAnalysisTileProps { shortDescription: string; @@ -13,11 +13,6 @@ interface StepAnalysisTileProps { loadChoice: () => void; } -const TOOLTIP_POSITION = { - my: 'top center', - at: 'bottom center', -} as const; - export const StepAnalysisTile: React.SFC = ({ shortDescription, customThumbnailUrl, @@ -27,7 +22,7 @@ export const StepAnalysisTile: React.SFC = ({ loading, loadChoice, }) => ( - +
= ({

{shortDescription}

- + ); const ENTER_KEY_CODE = 13; diff --git a/packages/libs/wdk-client/src/Components/StepAnalysis/Utils/StepAnalysisResults.tsx b/packages/libs/wdk-client/src/Components/StepAnalysis/Utils/StepAnalysisResults.tsx index 179b30deb6..9d1b3df563 100644 --- a/packages/libs/wdk-client/src/Components/StepAnalysis/Utils/StepAnalysisResults.tsx +++ b/packages/libs/wdk-client/src/Components/StepAnalysis/Utils/StepAnalysisResults.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { numericValue } from '@veupathdb/coreui/lib/components/Mesa/Utils/Utils'; -import { WDKClientTooltip } from '../../../Components'; +import { Tooltip } from '@veupathdb/coreui'; export const numberRenderFactory = (exponential: boolean) => @@ -10,9 +10,9 @@ export const numberRenderFactory = (
{exponential ? ( - +
{numericValue(row[key]).toExponential(precision)}
- + ) : ( numericValue(row[key]).toFixed(precision) )} diff --git a/packages/libs/wdk-client/src/Views/Records/SectionTitle.tsx b/packages/libs/wdk-client/src/Views/Records/SectionTitle.tsx index 4918a32e05..1192f706ab 100644 --- a/packages/libs/wdk-client/src/Views/Records/SectionTitle.tsx +++ b/packages/libs/wdk-client/src/Views/Records/SectionTitle.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { IconAlt, WDKClientTooltip } from '../../Components'; +import { IconAlt } from '../../Components'; +import { Tooltip } from '@veupathdb/coreui'; import { safeHtml } from '../../Utils/ComponentUtils'; interface Props { @@ -15,11 +16,11 @@ export function DefaultSectionTitle({ displayName, help }: Props) { {help && ( <>   - +
- + )} diff --git a/packages/libs/wdk-client/src/Views/Strategy/AllStrategies.tsx b/packages/libs/wdk-client/src/Views/Strategy/AllStrategies.tsx index 29c2cc1f10..bd30fed1c7 100644 --- a/packages/libs/wdk-client/src/Views/Strategy/AllStrategies.tsx +++ b/packages/libs/wdk-client/src/Views/Strategy/AllStrategies.tsx @@ -17,7 +17,7 @@ import Icon from '../../Components/Icon/IconAlt'; import LoadingOverlay from '../../Components/Loading/LoadingOverlay'; import './AllStrategies.scss'; -import WDKClientTooltip from '../../Components/Overlays/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { OverflowingTextCell } from '../../Views/Strategy/OverflowingTextCell'; const cx = makeClassNameHelper('AllStrategies'); @@ -174,9 +174,9 @@ interface CellRenderProps { } const invalidIcon = ( - + - + ); function makeColumns( diff --git a/packages/libs/wdk-client/src/Views/Strategy/ShowAllToggle.tsx b/packages/libs/wdk-client/src/Views/Strategy/ShowAllToggle.tsx index ab41c88f52..c78026351c 100644 --- a/packages/libs/wdk-client/src/Views/Strategy/ShowAllToggle.tsx +++ b/packages/libs/wdk-client/src/Views/Strategy/ShowAllToggle.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { makeClassNameHelper } from '../../Utils/ComponentUtils'; -import WDKClientTooltip from '../../Components/Overlays/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import './ShowAllToggle.scss'; import allStrats from './all-strats.svg'; import oneStrat from './one-strat.svg'; @@ -16,12 +16,9 @@ export default function ShowAllToggle(props: Props) { const { on, onChange } = props; return (
-
Show:
@@ -48,7 +45,7 @@ export default function ShowAllToggle(props: Props) {
- +
); } diff --git a/packages/libs/wdk-client/src/Views/Strategy/StepBoxes.tsx b/packages/libs/wdk-client/src/Views/Strategy/StepBoxes.tsx index ca876ae7e5..99db924e6c 100644 --- a/packages/libs/wdk-client/src/Views/Strategy/StepBoxes.tsx +++ b/packages/libs/wdk-client/src/Views/Strategy/StepBoxes.tsx @@ -1,7 +1,7 @@ import { noop } from 'lodash'; import React, { ReactNode, useState } from 'react'; import { NavLink } from 'react-router-dom'; -import WDKClientTooltip from '../../Components/Overlays/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { Plugin } from '../../Utils/ClientPlugin'; import { RecordClass } from '../../Utils/WdkModel'; import { Step } from '../../Utils/WdkUser'; @@ -39,10 +39,7 @@ export default function StepBoxes(props: StepBoxesProps) {
- + - +
diff --git a/packages/libs/web-common/src/components/SiteSearch/SiteSearchInput.tsx b/packages/libs/web-common/src/components/SiteSearch/SiteSearchInput.tsx index aff76fabed..c9471d910d 100644 --- a/packages/libs/web-common/src/components/SiteSearch/SiteSearchInput.tsx +++ b/packages/libs/web-common/src/components/SiteSearch/SiteSearchInput.tsx @@ -1,7 +1,7 @@ import { isEmpty } from 'lodash'; import React, { useCallback, useEffect, useRef } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import { WDKClientTooltip } from '@veupathdb/wdk-client/lib/Components'; +import { Tooltip } from '@veupathdb/coreui'; import { useSessionBackedState } from '@veupathdb/wdk-client/lib/Hooks/SessionBackedState'; import { makeClassNameHelper, @@ -111,7 +111,7 @@ export const SiteSearchInput = wrappable(function ({ placeholderText }: Props) { ))} {hasFilters ? ( - + - + ) : null} {location.pathname !== SITE_SEARCH_ROUTE && lastSearchQueryString && ( - + - + )} - - + ); }); diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/QueryGrid.jsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/QueryGrid.jsx index c9904fcebb..18ba83493c 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/QueryGrid.jsx +++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/QueryGrid.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { webAppUrl } from '../config'; -import { Tooltip } from '@veupathdb/wdk-client/lib/Components'; +import { Tooltip } from '@veupathdb/coreui'; import { getPropertyValue, nodeHasChildren, @@ -89,7 +89,7 @@ class QueryGrid extends React.Component { return (
  • - + Legend:
    {displayCategoryOrder.map((categoryName) => ( -

    {displayCategoriesByName[categoryName].displayName}

    {displayCategoriesByName[categoryName].description} @@ -292,7 +287,7 @@ function InternalGeneDatasetContent(props: Props) { {displayCategoriesByName[categoryName].displayName} -     + ))}
    • diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx index f038b84524..21c80fb954 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx +++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/stepAnalysis/StepAnalysisHpiGeneListResults.tsx @@ -7,7 +7,7 @@ import { import Templates from '@veupathdb/coreui/lib/components/Mesa/Templates'; import './StepAnalysisEnrichmentResult.scss'; -import { WDKClientTooltip } from '@veupathdb/wdk-client/lib/Components'; +import { Tooltip } from '@veupathdb/coreui'; const baseColumnSettings: Pick< ColumnSettings, @@ -22,8 +22,8 @@ const baseColumnSettings: Pick< { key: 'experimentName', renderCell: (cellProps: any) => ( - {cellProps.row.experimentName} -     +     ), sortable: true, }, From 4f26cfcb1c22e4dedd0996d663cd06aafa6e9e9f Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Tue, 19 Mar 2024 17:54:49 -0400 Subject: [PATCH 12/17] Change more instances of WDKClientTooltip --- .../libs/eda/src/lib/workspace/StudySummary.tsx | 10 +++++----- .../src/Components/AttributeFilter/FieldList.jsx | 6 +++--- .../src/Components/AttributeFilter/Histogram.jsx | 6 +++--- .../wdk-client/src/Views/Answer/AnswerFilter.jsx | 6 +++--- .../src/Views/Strategy/SearchInputSelector.tsx | 4 ++-- .../src/components/homepage/SearchPane.tsx | 4 ++-- .../components/cluster-graph/GraphControls.tsx | 16 ++++------------ .../js/client/utils/graphInformation.tsx | 12 +++++++----- 8 files changed, 29 insertions(+), 35 deletions(-) diff --git a/packages/libs/eda/src/lib/workspace/StudySummary.tsx b/packages/libs/eda/src/lib/workspace/StudySummary.tsx index 803e4d715b..bc822084ca 100644 --- a/packages/libs/eda/src/lib/workspace/StudySummary.tsx +++ b/packages/libs/eda/src/lib/workspace/StudySummary.tsx @@ -1,7 +1,7 @@ -import { WDKClientTooltip } from '@veupathdb/wdk-client/lib/Components'; +import React from 'react'; +import { Tooltip } from '@veupathdb/coreui'; import { renderAttributeValue } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; import { AttributeField } from '@veupathdb/wdk-client/lib/Utils/WdkModel'; -import React from 'react'; import { StudyRecord, StudyRecordClass } from '../core'; import { cx } from './Utils'; @@ -17,12 +17,12 @@ export function StudySummary(props: Props) { {Object.entries(studyRecord.attributes).map( ([name, value]) => value != null && ( - {renderAttributeValue(value, { tabIndex: 0 })} - +     ) )}
    diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx index 94712023ab..096ad5f8cd 100644 --- a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx +++ b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx @@ -10,7 +10,7 @@ import CheckboxTree, { LinksPosition, } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree'; import Icon from '../../Components/Icon/IconAlt'; -import WDKClientTooltip from '../../Components/Overlays/Tooltip'; +import { Tooltip } from '@veupathdb/coreui'; import { isFilterField, isMulti, @@ -187,7 +187,7 @@ function FieldNode({ node, isActive, searchTerm, handleFieldSelect }) { }, [isActive, nodeRef.current, searchTerm]); return ( - + {isFilterField(node.field) ? ( )} - + ); } diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx index 23a66ac1b9..1fbde0f6c0 100644 --- a/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx +++ b/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx @@ -24,7 +24,7 @@ import { } from '../../Components/AttributeFilter/AttributeFilterUtils'; import Icon from '../../Components/Icon/IconAlt'; import { CollapsibleSection, IconAlt } from '../../Components'; -import WDKClientTooltip from '../../Components/Overlays/Tooltip'; +import Tooltip from '@veupathdb/coreui'; const DAY = 1000 * 60 * 60 * 24; @@ -836,9 +836,9 @@ export default Histogram; function RangeWarning({ rangeMin, rangeMax, selectionMin, selectionMax }) { if (rangeMin >= selectionMin && rangeMax <= selectionMax) return null; return ( - + - + ); } diff --git a/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx b/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx index 3ae35e8c62..c20beac0ef 100644 --- a/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx +++ b/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx @@ -2,7 +2,7 @@ import { debounce } from 'lodash'; import React from 'react'; import ReactDOM from 'react-dom'; import { HelpTrigger } from '@veupathdb/coreui/lib/components/Mesa'; -import WDKClientTooltip from '../../Components/Overlays/Tooltip'; +import Tooltip from '@veupathdb/coreui'; import { wrappable } from '../../Utils/ComponentUtils'; import AnswerFilterSelector from '../../Views/Answer/AnswerFilterSelector'; @@ -152,7 +152,7 @@ class AnswerFilter extends React.Component { placeholder={`Search ${displayNamePlural}`} onChange={this.handleFilter} /> - + - , + , ], [ showOnlyStarredVariables, @@ -606,7 +606,7 @@ export default function VariableList({ margin: '0.75em', }} > - - + ); diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx index 1fbde0f6c0..f42ff49a9a 100644 --- a/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx +++ b/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx @@ -24,7 +24,7 @@ import { } from '../../Components/AttributeFilter/AttributeFilterUtils'; import Icon from '../../Components/Icon/IconAlt'; import { CollapsibleSection, IconAlt } from '../../Components'; -import Tooltip from '@veupathdb/coreui'; +import { Tooltip } from '@veupathdb/coreui'; const DAY = 1000 * 60 * 60 * 24; diff --git a/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx b/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx index c20beac0ef..75515a7dae 100644 --- a/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx +++ b/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx @@ -2,7 +2,7 @@ import { debounce } from 'lodash'; import React from 'react'; import ReactDOM from 'react-dom'; import { HelpTrigger } from '@veupathdb/coreui/lib/components/Mesa'; -import Tooltip from '@veupathdb/coreui'; +import { Tooltip } from '@veupathdb/coreui'; import { wrappable } from '../../Utils/ComponentUtils'; import AnswerFilterSelector from '../../Views/Answer/AnswerFilterSelector'; From 424763bc4790ab1c745ecadb45959a5af3e218fc Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 8 Apr 2024 15:31:12 -0400 Subject: [PATCH 16/17] FTooltip usages after merge --- .../src/lib/Components/UserDatasetStatus.tsx | 9 +++------ .../src/lib/Components/UserDatasetStatus.tsx | 2 +- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/libs/user-datasets-legacy/src/lib/Components/UserDatasetStatus.tsx b/packages/libs/user-datasets-legacy/src/lib/Components/UserDatasetStatus.tsx index 0e569c29ff..279f5ac174 100644 --- a/packages/libs/user-datasets-legacy/src/lib/Components/UserDatasetStatus.tsx +++ b/packages/libs/user-datasets-legacy/src/lib/Components/UserDatasetStatus.tsx @@ -1,9 +1,6 @@ import * as React from 'react'; -import { - IconAlt as Icon, - Link, - Tooltip, -} from '@veupathdb/wdk-client/lib/Components'; +import { IconAlt as Icon, Link } from '@veupathdb/wdk-client/lib/Components'; +import { Tooltip } from '@veupathdb/coreui'; import { UserDataset } from '../Utils/types'; @@ -56,7 +53,7 @@ export default function UserDatasetStatus(props: Props) { : 'exclamation-circle'; const children = ; const visibleContent = props.useTooltip ? ( - {children} + {children} ) : ( {children} {content} diff --git a/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx b/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx index 17ac37b0b0..7014f8621d 100644 --- a/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx +++ b/packages/libs/user-datasets/src/lib/Components/UserDatasetStatus.tsx @@ -200,7 +200,7 @@ export default function UserDatasetStatus(props: Props) { const link = `${baseUrl}/${userDataset.id}`; const children = ; const visibleContent = props.useTooltip ? ( - {children} + {children} ) : ( {children} {content} From 112842697d40f52a4f7b91d465dce75d3c7943fe Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 8 Apr 2024 16:32:55 -0400 Subject: [PATCH 17/17] Fix some blank tooltips --- .../libs/coreui/src/components/info/Tooltip.tsx | 13 +++++++------ .../src/components/inputs/SearchBox/SearchBox.tsx | 8 +++++--- .../src/Components/AttributeFilter/FieldList.jsx | 2 +- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/libs/coreui/src/components/info/Tooltip.tsx b/packages/libs/coreui/src/components/info/Tooltip.tsx index 4428fe5a79..404e35d031 100644 --- a/packages/libs/coreui/src/components/info/Tooltip.tsx +++ b/packages/libs/coreui/src/components/info/Tooltip.tsx @@ -6,16 +6,17 @@ import _ from 'lodash'; * Tooltip will not render if the title is an empty value or a boolean. */ const UnstyledTooltip = (props: ComponentProps) => { - const { title } = props; + const { title, ...otherProps } = props; - return !( - title === '' || + const finalTitle = !( _.isEqual(title, {}) || _.isEqual(title, []) || typeof title === 'boolean' - ) ? ( - - ) : null; + ) + ? title + : ''; + + return ; }; export const Tooltip = withStyles((theme: Theme) => ({ diff --git a/packages/libs/coreui/src/components/inputs/SearchBox/SearchBox.tsx b/packages/libs/coreui/src/components/inputs/SearchBox/SearchBox.tsx index da7a3f8f52..f28f83e19b 100644 --- a/packages/libs/coreui/src/components/inputs/SearchBox/SearchBox.tsx +++ b/packages/libs/coreui/src/components/inputs/SearchBox/SearchBox.tsx @@ -156,6 +156,9 @@ export default function SearchBox({ ); + // use safeHtml for helpText to allow italic + const helpTextHtml = helpText ? safeHtml(helpText) : null; + return (
    - {/* use safeHtml for helpText to allow italic */} - {!helpText ? null : ( - + {!helpTextHtml ? null : ( + )} diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx index 096ad5f8cd..a1e1fac7df 100644 --- a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx +++ b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx @@ -187,7 +187,7 @@ function FieldNode({ node, isActive, searchTerm, handleFieldSelect }) { }, [isActive, nodeRef.current, searchTerm]); return ( - + {isFilterField(node.field) ? (