Skip to content

Commit

Permalink
Abstract away tooltip overlay trigger
Browse files Browse the repository at this point in the history
  • Loading branch information
axelboc committed Sep 26, 2024
1 parent a5313cd commit 0d14192
Show file tree
Hide file tree
Showing 8 changed files with 93 additions and 128 deletions.
32 changes: 11 additions & 21 deletions ui/src/components/Equipment/PlateManipulator.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ import {
ButtonToolbar,
OverlayTrigger,
Popover,
Tooltip,
} from 'react-bootstrap';
import { contextMenu, Menu, Item, Separator } from 'react-contexify';

import { MdSync } from 'react-icons/md';
import styles from './equipment.module.css';
import TooltipTrigger from '../TooltipTrigger';

const strokeColor = 'rgb(136, 136, 136)';

Expand Down Expand Up @@ -634,33 +634,23 @@ export default function PlateManipulator(props) {
>
<Col className="ms-3">
<ButtonToolbar className="ms-4">
{!inPopover ? (
{!inPopover && (
<div className="me-4">
<b>{cplate_label}</b>
</div>
) : null}
<OverlayTrigger
variant="outline-success"
placement="bottom"
overlay={
<Tooltip id="select-samples">
Refresh if Plate Location not Updated
</Tooltip>
}
)}
<TooltipTrigger
id="refresh-tooltip"
tooltipContent="Refresh if plate location not updated"
>
<Button size="sm" variant="outline-info" onClick={refreshClicked}>
<MdSync size="1.5em" /> Refresh
</Button>
</OverlayTrigger>
</TooltipTrigger>
<span style={{ marginLeft: '1.5em' }} />
<OverlayTrigger
variant="outline-success"
placement="bottom"
overlay={
<Tooltip id="select-samples">
Synchronise sample list with CRIMS
</Tooltip>
}
<TooltipTrigger
id="sync-samples-tooltip"
tooltipContent="Synchronise sample list with CRIMS"
>
<Button
size="sm"
Expand All @@ -669,7 +659,7 @@ export default function PlateManipulator(props) {
>
<MdSync size="1.5em" /> CRIMS
</Button>
</OverlayTrigger>
</TooltipTrigger>
</ButtonToolbar>
</Col>
<div className={styles.plate_div} style={cssDisable}>
Expand Down
51 changes: 25 additions & 26 deletions ui/src/components/SampleGrid/SampleGridTableItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React from 'react';
import {
ListGroup,
OverlayTrigger,
Tooltip,
Popover,
Badge,
Button,
Expand All @@ -17,6 +16,7 @@ import { isCollected } from '../../constants';
import { BsSquare, BsCheck2Square } from 'react-icons/bs';
import { MdContentCopy } from 'react-icons/md';
import './SampleGridTable.css';
import TooltipTrigger from '../TooltipTrigger';

export class SampleGridTableItem extends React.Component {
constructor(props) {
Expand All @@ -38,33 +38,32 @@ export class SampleGridTableItem extends React.Component {
}

itemControls() {
let icon = <BsSquare size="0.9em" />;

if (this.props.picked) {
icon = <BsCheck2Square size="1em" />;
}

const pickButton = (
<OverlayTrigger
placement="auto"
overlay={
<Tooltip id="pick-sample">Pick/Unpick sample for collect</Tooltip>
}
>
<Button
variant="link"
disabled={this.props.current && this.props.picked}
className="samples-grid-table-item-button"
onClick={(e) => {
this.pickButtonOnClick(e);
}}
return (
<div className="samples-item-controls-container">
<TooltipTrigger
id="pick-sample"
placement="auto"
tooltipContent="Pick/Unpick sample for collect"
>
<i>{icon}</i>
</Button>
</OverlayTrigger>
<Button
variant="link"
disabled={this.props.current && this.props.picked}
className="samples-grid-table-item-button"
onClick={(e) => {
this.pickButtonOnClick(e);
}}
>
<i>
{this.props.picked ? (
<BsCheck2Square size="1em" />
) : (
<BsSquare size="0.9em" />
)}
</i>
</Button>
</TooltipTrigger>
</div>
);

return <div className="samples-item-controls-container">{pickButton}</div>;
}

seqId() {
Expand Down
23 changes: 8 additions & 15 deletions ui/src/components/SampleQueue/CharacterisationTaskItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,14 @@
/* eslint-disable sonarjs/no-duplicate-string */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
ProgressBar,
Button,
Collapse,
Table,
OverlayTrigger,
Tooltip,
} from 'react-bootstrap';
import { ProgressBar, Button, Collapse, Table } from 'react-bootstrap';
import {
TASK_UNCOLLECTED,
TASK_COLLECTED,
TASK_COLLECT_FAILED,
TASK_RUNNING,
} from '../../constants';
import TooltipTrigger from '../TooltipTrigger';

export default class TaskItem extends Component {
static propTypes = {
Expand Down Expand Up @@ -201,21 +195,20 @@ export default class TaskItem extends Component {
const pathEndPart = path.slice(-40);

return (
<OverlayTrigger
placement="bottom"
rootClose
overlay={
<Tooltip id="wedge-popover">
<TooltipTrigger
id="wedge-path-tooltip"
tooltipContent={
<>
{path}
{value}
</Tooltip>
</>
}
>
<a style={{ flexGrow: 1 }}>
.../{pathEndPart.slice(pathEndPart.indexOf('/') + 1)}
{value}
</a>
</OverlayTrigger>
</TooltipTrigger>
);
}

Expand Down
23 changes: 8 additions & 15 deletions ui/src/components/SampleQueue/TaskItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,14 @@
/* eslint-disable sonarjs/no-duplicate-string */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
ProgressBar,
Button,
Collapse,
Table,
OverlayTrigger,
Tooltip,
} from 'react-bootstrap';
import { ProgressBar, Button, Collapse, Table } from 'react-bootstrap';
import {
TASK_UNCOLLECTED,
TASK_COLLECTED,
TASK_COLLECT_FAILED,
TASK_RUNNING,
} from '../../constants';
import TooltipTrigger from '../TooltipTrigger';

export default class TaskItem extends Component {
static propTypes = {
Expand Down Expand Up @@ -153,21 +147,20 @@ export default class TaskItem extends Component {
const pathEndPart = path.slice(-40);

return (
<OverlayTrigger
placement="bottom"
rootClose
overlay={
<Tooltip id="wedge-popover">
<TooltipTrigger
id="wedge-path-tooltip"
tooltipContent={
<>
{path}
{value}
</Tooltip>
</>
}
>
<a style={{ flexGrow: 1 }}>
.../{pathEndPart.slice(pathEndPart.indexOf('/') + 1)}
{value}
</a>
</OverlayTrigger>
</TooltipTrigger>
);
}

Expand Down
17 changes: 4 additions & 13 deletions ui/src/components/SampleQueue/WorkflowTaskItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,14 @@
/* eslint-disable sonarjs/no-duplicate-string */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
ProgressBar,
Button,
Collapse,
OverlayTrigger,
Tooltip,
} from 'react-bootstrap';
import { ProgressBar, Button, Collapse } from 'react-bootstrap';
import {
TASK_UNCOLLECTED,
TASK_COLLECTED,
TASK_COLLECT_FAILED,
TASK_RUNNING,
} from '../../constants';
import TooltipTrigger from '../TooltipTrigger';

export default class WorkflowTaskItem extends Component {
static propTypes = {
Expand Down Expand Up @@ -122,15 +117,11 @@ export default class WorkflowTaskItem extends Component {
const pathEndPart = path.slice(-40);

return (
<OverlayTrigger
placement="bottom"
rootClose
overlay={<Tooltip id="wedge-popover">{path}</Tooltip>}
>
<TooltipTrigger id="wedge-path-tooltip" tooltipContent={path}>
<a style={{ flexGrow: 1 }}>
.../{pathEndPart.slice(pathEndPart.indexOf('/') + 1)}
</a>
</OverlayTrigger>
</TooltipTrigger>
);
}

Expand Down
18 changes: 18 additions & 0 deletions ui/src/components/TooltipTrigger.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';

function TooltipTrigger(props) {
const { id, placement = 'bottom', tooltipContent, children } = props;

return (
<OverlayTrigger
rootClose // ensures focus is removed from child (and tooltip closed) when clicking anywhere else
placement={placement}
overlay={<Tooltip id={id}>{tooltipContent}</Tooltip>}
>
{children}
</OverlayTrigger>
);
}

export default TooltipTrigger;
30 changes: 10 additions & 20 deletions ui/src/containers/SampleGridTableContainer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,7 @@ import React from 'react';
import withNavigate from '../components/withNavigate';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {
Row,
Col,
Table,
OverlayTrigger,
Tooltip,
Button,
Dropdown,
} from 'react-bootstrap';
import { Row, Col, Table, Button, Dropdown } from 'react-bootstrap';

import LazyLoad, { forceVisible } from 'react-lazyload';
import Collapsible from 'react-collapsible';
Expand Down Expand Up @@ -61,6 +53,7 @@ import SampleIsaraView from './SampleIsaraView';
import { SampleGridTableItem } from '../components/SampleGrid/SampleGridTableItem';

import { TaskItem } from '../components/SampleGrid/TaskItem';
import TooltipTrigger from '../components/TooltipTrigger';

const SETTINGS = {
dots: false,
Expand Down Expand Up @@ -485,17 +478,14 @@ class SampleGridTableContainer extends React.Component {

return (
<>
{puck ? (
<span className="span-container-code"> {puckCode} </span>
) : null}
<OverlayTrigger
{puck && <span className="span-container-code"> {puckCode} </span>}
<TooltipTrigger
id="pick-sample-tooltip"
placement="auto"
overlay={
<Tooltip id="pick-sample">
{pickSample
? 'Pick samples/ Add to Queue'
: 'Unpick samples / Remove from Queue'}
</Tooltip>
tooltipContent={
pickSample
? 'Pick samples/ Add to Queue'
: 'Unpick samples / Remove from Queue'
}
>
<Button
Expand All @@ -507,7 +497,7 @@ class SampleGridTableContainer extends React.Component {
>
<i>{icon}</i>
</Button>
</OverlayTrigger>
</TooltipTrigger>
</>
);
}
Expand Down
Loading

0 comments on commit 0d14192

Please sign in to comment.