From 5d2c4231361c5822c34a2a296c637f07e2bbff6f Mon Sep 17 00:00:00 2001 From: Ricky Reusser Date: Thu, 25 Mar 2021 12:08:08 -0700 Subject: [PATCH 01/15] Pass a bbox through graph hover data --- src/fragments/Graph.react.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/fragments/Graph.react.js b/src/fragments/Graph.react.js index d4353b8d5..f7af5605d 100644 --- a/src/fragments/Graph.react.js +++ b/src/fragments/Graph.react.js @@ -74,6 +74,10 @@ const filterEventData = (gd, eventData, event) => { const pointData = filter(function(o) { return !includes(type(o), ['Object', 'Array']); }, fullPoint); + // permit a bounding box to pass through, if present + if (has('bbox', fullPoint)) { + pointData.bbox = fullPoint.bbox; + } if ( has('curveNumber', fullPoint) && has('pointNumber', fullPoint) && From 870cde9ba8cb19ee8541077834337da14b137dfb Mon Sep 17 00:00:00 2001 From: xhlulu Date: Mon, 26 Jul 2021 17:33:41 -0400 Subject: [PATCH 02/15] Move files from #940, correct generation issue Removed default props that were not typed --- src/components/ToolTip.react.js | 247 ++++++++++++++++++++++++++++++++ src/index.js | 6 +- 2 files changed, 251 insertions(+), 2 deletions(-) create mode 100644 src/components/ToolTip.react.js diff --git a/src/components/ToolTip.react.js b/src/components/ToolTip.react.js new file mode 100644 index 000000000..a2e158f28 --- /dev/null +++ b/src/components/ToolTip.react.js @@ -0,0 +1,247 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {omit} from 'ramda'; + +/** + * A basic HTML textarea for entering multiline text. + */ +export default class ToolTip extends Component { + render() { + const {loading_state, value, children, direction, colors} = this.props; + + return ( + + + {children} + + + + + ); + } +} + +ToolTip.defaultProps = { + // persisted_props: ['value'], + // persistence_type: 'local', + direction: 'right', + colors: { + border: '#d6d6d6', + background: 'white', + }, +}; + +ToolTip.propTypes = { + /** + * The ID of this component, used to identify dash components + * in callbacks. The ID needs to be unique across all of the + * components in an app. + */ + id: PropTypes.string, + + /** + * Often used with CSS to style elements with common properties. + */ + className: PropTypes.string, + + /** + * Defines the direction in which the hover opens. + */ + direction: PropTypes.oneOf([ + 'top', + 'right', + 'bottom', + 'left' + ]), + + /** + * Holds the colors used by the ToolTip component. If you set these, you should specify colors for all properties, so: + * colors: { + * border: '#d6d6d6', + * primary: '#1975FA', + * background: '#f9f9f9' + * } + */ + colors: PropTypes.exact({ + border: PropTypes.string, + background: PropTypes.string, + }), + + /** + * Prevents rendering of given element, while keeping child elements, e.g. script elements, active. + */ + hidden: PropTypes.string, + + /** + * Defines CSS styles which will override styles previously set. + */ + style: PropTypes.object, + + /** + * Object that holds the loading state object coming from dash-renderer + */ + loading_state: PropTypes.shape({ + /** + * Determines if the component is loading or not + */ + is_loading: PropTypes.bool, + /** + * Holds which property is loading + */ + prop_name: PropTypes.string, + /** + * Holds the name of the component that is loading + */ + component_name: PropTypes.string, + }), +}; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 5ec4bca0e..1ccace980 100644 --- a/src/index.js +++ b/src/index.js @@ -22,7 +22,8 @@ import Tabs from './components/Tabs.react'; import Tab from './components/Tab.react'; import Store from './components/Store.react'; import LogoutButton from './components/LogoutButton.react'; -import Clipboard from './components/Clipboard.react'; +import Clipboard from './components/Clipboard.react';; +import ToolTip from './components/ToolTip.react'; import 'react-dates/lib/css/_datepicker.css'; import './components/css/react-dates@20.1.0-fix.css'; @@ -51,5 +52,6 @@ export { Store, LogoutButton, Download, - Clipboard + Clipboard, + ToolTip }; From cbfb31e874ad31d43b4826299cd4fe3d111323d3 Mon Sep 17 00:00:00 2001 From: xhlulu Date: Mon, 2 Aug 2021 18:34:44 -0400 Subject: [PATCH 03/15] Update namespace --- NAMESPACE | 1 + 1 file changed, 1 insertion(+) diff --git a/NAMESPACE b/NAMESPACE index 2d40383e9..c264a14ae 100644 --- a/NAMESPACE +++ b/NAMESPACE @@ -23,4 +23,5 @@ export(dccStore) export(dccTab) export(dccTabs) export(dccTextarea) +export(dccToolTip) export(dccUpload) From 0ef5d9b1259dc04bf61b4558ff94267d3dbddd93 Mon Sep 17 00:00:00 2001 From: xhlulu Date: Mon, 2 Aug 2021 19:09:22 -0400 Subject: [PATCH 04/15] Remove fixedtooltip from namespace --- NAMESPACE | 1 + 1 file changed, 1 insertion(+) diff --git a/NAMESPACE b/NAMESPACE index c264a14ae..67a05e0ce 100644 --- a/NAMESPACE +++ b/NAMESPACE @@ -25,3 +25,4 @@ export(dccTabs) export(dccTextarea) export(dccToolTip) export(dccUpload) +export(dccFixedTooltip) \ No newline at end of file From 69d6d3e6267fc454e83765f08e2f0b7f0056f15a Mon Sep 17 00:00:00 2001 From: xhlulu Date: Tue, 3 Aug 2021 16:41:29 -0400 Subject: [PATCH 05/15] Create initial AbsoluteTooltip --- src/components/AbsoluteTooltip.react.js | 81 +++++++++++++++++++++++++ src/components/css/AbsoluteTooltip.css | 28 +++++++++ src/index.js | 4 +- 3 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 src/components/AbsoluteTooltip.react.js create mode 100644 src/components/css/AbsoluteTooltip.css diff --git a/src/components/AbsoluteTooltip.react.js b/src/components/AbsoluteTooltip.react.js new file mode 100644 index 000000000..fbbcd4237 --- /dev/null +++ b/src/components/AbsoluteTooltip.react.js @@ -0,0 +1,81 @@ +import PropTypes from 'prop-types'; +import './css/AbsoluteTooltip.css'; + +/** + * A tooltip with an absolute position. + */ +const AbsoluteTooltip = props => { + const { bbox } = props; + + const containerStyle = { + top: `${bbox.y0}px`, + left: `${bbox.x0}px`, + width: `${bbox.x1 - bbox.x0}px`, + height: `${bbox.y1 - bbox.y0}px`, + display: props.show ? 'block' : 'none', + }; + + return ( +
+
+ {props.children} +
+
+ ) +} + +AbsoluteTooltip.defaultProps = { + show: false, +}; + +AbsoluteTooltip.propTypes = { + // Dash specific props + /** + * The children of this component + */ + children: PropTypes.node, + + /** + * The ID of this component, used to identify dash components + * in callbacks. The ID needs to be unique across all of the + * components in an app. + */ + id: PropTypes.string, + + /** + * The class of the input element + */ + className: PropTypes.string, + + /** + * The input's inline styles + */ + style: PropTypes.object, + + /** + * Dash-assigned callback that gets fired when the value changes. + */ + setProps: PropTypes.func, + + // Component specific props + /** + * The bounding boxes coordinates + */ + bbox: PropTypes.exact({ + x0: PropTypes.number, + y0: PropTypes.number, + x1: PropTypes.number, + y1: PropTypes.number, + }), + + /** + * Whether to show the tooltip or not + */ + show: PropTypes.bool, +} + +export default AbsoluteTooltip; \ No newline at end of file diff --git a/src/components/css/AbsoluteTooltip.css b/src/components/css/AbsoluteTooltip.css new file mode 100644 index 000000000..3517b32b2 --- /dev/null +++ b/src/components/css/AbsoluteTooltip.css @@ -0,0 +1,28 @@ +.dccAbsoluteTooltip-container { + position: absolute; +} + +.dccAbsoluteTooltip-content { + width: 120px; + background-color: black; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + position: absolute; + z-index: 1; + top: calc(100% + 5px); + left: 50%; + margin-left: -60px; +} + +.dccAbsoluteTooltip-content::after { + content: ""; + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent black transparent; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 1ccace980..59176307d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ /* eslint-disable import/prefer-default-export */ +import AbsoluteTooltip from './components/AbsoluteTooltip.react'; import ConfirmDialog from './components/ConfirmDialog.react'; import ConfirmDialogProvider from './components/ConfirmDialogProvider.react'; import Dropdown from './components/Dropdown.react'; @@ -29,6 +30,7 @@ import 'react-dates/lib/css/_datepicker.css'; import './components/css/react-dates@20.1.0-fix.css'; export { + AbsoluteTooltip, Checklist, ConfirmDialog, ConfirmDialogProvider, @@ -53,5 +55,5 @@ export { LogoutButton, Download, Clipboard, - ToolTip + ToolTip, }; From 9d384d55137c2a8709dbafe78ae40fa5eb860394 Mon Sep 17 00:00:00 2001 From: xhlulu Date: Wed, 4 Aug 2021 10:02:08 -0400 Subject: [PATCH 06/15] Absolute Tooltip now working --- src/components/AbsoluteTooltip.react.js | 275 +++++++++++++++++++++--- src/index.js | 6 +- 2 files changed, 252 insertions(+), 29 deletions(-) diff --git a/src/components/AbsoluteTooltip.react.js b/src/components/AbsoluteTooltip.react.js index fbbcd4237..06af23639 100644 --- a/src/components/AbsoluteTooltip.react.js +++ b/src/components/AbsoluteTooltip.react.js @@ -1,35 +1,205 @@ import PropTypes from 'prop-types'; -import './css/AbsoluteTooltip.css'; +// import './css/AbsoluteTooltip.css'; + +import _JSXStyle from 'styled-jsx/style'; // eslint-disable-line no-unused-vars /** * A tooltip with an absolute position. */ const AbsoluteTooltip = props => { - const { bbox } = props; - - const containerStyle = { - top: `${bbox.y0}px`, - left: `${bbox.x0}px`, - width: `${bbox.x1 - bbox.x0}px`, - height: `${bbox.y1 - bbox.y0}px`, - display: props.show ? 'block' : 'none', - }; + const {bbox, colors, loading_state} = props; return ( -
-
- {props.children} -
+
+ + + + {props.children} +
- ) -} + ); +}; AbsoluteTooltip.defaultProps = { - show: false, + show: true, + caretSize: 5, + direction: 'right', + colors: { + border: '#d6d6d6', + background: 'white', + }, }; AbsoluteTooltip.propTypes = { @@ -47,15 +217,24 @@ AbsoluteTooltip.propTypes = { id: PropTypes.string, /** - * The class of the input element + * The class of the tooltip */ className: PropTypes.string, + /** + * The class of the container (invisible bounding box) + */ + containerClassName: PropTypes.string, /** - * The input's inline styles + * The style of the tooltip */ style: PropTypes.object, + /** + * The style of the container (invisible bounding box) + */ + containerStyle: PropTypes.object, + /** * Dash-assigned callback that gets fired when the value changes. */ @@ -76,6 +255,52 @@ AbsoluteTooltip.propTypes = { * Whether to show the tooltip or not */ show: PropTypes.bool, -} -export default AbsoluteTooltip; \ No newline at end of file + /** + * The size of the caret in pixels + */ + caretSize: PropTypes.number, + + /** + * Defines the direction in which the hover opens. + */ + direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), + + /** + * Holds the colors used by the ToolTip component. If you set these, you should specify colors for all properties, so: + * colors: { + * border: '#d6d6d6', + * primary: '#1975FA', + * background: '#f9f9f9' + * } + */ + colors: PropTypes.exact({ + border: PropTypes.string, + background: PropTypes.string, + }), + + /** + * Prevents rendering of given element, while keeping child elements, e.g. script elements, active. + */ + hidden: PropTypes.string, + + /** + * Object that holds the loading state object coming from dash-renderer + */ + loading_state: PropTypes.shape({ + /** + * Determines if the component is loading or not + */ + is_loading: PropTypes.bool, + /** + * Holds which property is loading + */ + prop_name: PropTypes.string, + /** + * Holds the name of the component that is loading + */ + component_name: PropTypes.string, + }), +}; + +export default AbsoluteTooltip; diff --git a/src/index.js b/src/index.js index 59176307d..96d64cd29 100644 --- a/src/index.js +++ b/src/index.js @@ -23,8 +23,7 @@ import Tabs from './components/Tabs.react'; import Tab from './components/Tab.react'; import Store from './components/Store.react'; import LogoutButton from './components/LogoutButton.react'; -import Clipboard from './components/Clipboard.react';; -import ToolTip from './components/ToolTip.react'; +import Clipboard from './components/Clipboard.react'; import 'react-dates/lib/css/_datepicker.css'; import './components/css/react-dates@20.1.0-fix.css'; @@ -54,6 +53,5 @@ export { Store, LogoutButton, Download, - Clipboard, - ToolTip, + Clipboard }; From ec27faf33ca9191b16c9ccfa86b194e771690005 Mon Sep 17 00:00:00 2001 From: xhlulu Date: Wed, 4 Aug 2021 13:42:36 -0400 Subject: [PATCH 07/15] Change class name to eliminate conflict, add z-index --- src/components/AbsoluteTooltip.react.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/AbsoluteTooltip.react.js b/src/components/AbsoluteTooltip.react.js index 06af23639..5cc33606a 100644 --- a/src/components/AbsoluteTooltip.react.js +++ b/src/components/AbsoluteTooltip.react.js @@ -10,19 +10,26 @@ const AbsoluteTooltip = props => { const {bbox, colors, loading_state} = props; return ( -
+
- - - ); - } -} - -ToolTip.defaultProps = { - // persisted_props: ['value'], - // persistence_type: 'local', - direction: 'right', - colors: { - border: '#d6d6d6', - background: 'white', - }, -}; - -ToolTip.propTypes = { - /** - * The ID of this component, used to identify dash components - * in callbacks. The ID needs to be unique across all of the - * components in an app. - */ - id: PropTypes.string, - - /** - * Often used with CSS to style elements with common properties. - */ - className: PropTypes.string, - - /** - * Defines the direction in which the hover opens. - */ - direction: PropTypes.oneOf([ - 'top', - 'right', - 'bottom', - 'left' - ]), - - /** - * Holds the colors used by the ToolTip component. If you set these, you should specify colors for all properties, so: - * colors: { - * border: '#d6d6d6', - * primary: '#1975FA', - * background: '#f9f9f9' - * } - */ - colors: PropTypes.exact({ - border: PropTypes.string, - background: PropTypes.string, - }), - - /** - * Prevents rendering of given element, while keeping child elements, e.g. script elements, active. - */ - hidden: PropTypes.string, - - /** - * Defines CSS styles which will override styles previously set. - */ - style: PropTypes.object, - - /** - * Object that holds the loading state object coming from dash-renderer - */ - loading_state: PropTypes.shape({ - /** - * Determines if the component is loading or not - */ - is_loading: PropTypes.bool, - /** - * Holds which property is loading - */ - prop_name: PropTypes.string, - /** - * Holds the name of the component that is loading - */ - component_name: PropTypes.string, - }), -}; \ No newline at end of file From ce6df7963ba81e2002fbdd0634edb60f1472d7a8 Mon Sep 17 00:00:00 2001 From: xhlulu Date: Wed, 4 Aug 2021 16:52:38 -0400 Subject: [PATCH 09/15] Rename classes, add props, remove caretSize --- src/components/AbsoluteTooltip.react.js | 51 ++++++++++++++----------- 1 file changed, 28 insertions(+), 23 deletions(-) diff --git a/src/components/AbsoluteTooltip.react.js b/src/components/AbsoluteTooltip.react.js index 5cc33606a..ccc520dac 100644 --- a/src/components/AbsoluteTooltip.react.js +++ b/src/components/AbsoluteTooltip.react.js @@ -10,9 +10,27 @@ const AbsoluteTooltip = props => { const {bbox, colors, loading_state} = props; return ( -
+ <> +
+ + + {props.children} + + +
- - {props.children} - -
+ ); }; AbsoluteTooltip.defaultProps = { show: true, - caretSize: 5, direction: 'right', colors: { border: '#d6d6d6', background: 'white', }, - containerClassName: '', + hoverAreaClassName: '', + className: '', zindex: 1, }; @@ -230,9 +240,9 @@ AbsoluteTooltip.propTypes = { */ className: PropTypes.string, /** - * The class of the container (invisible bounding box) + * The class of the invisible area determined by `bbox`. When you hover over that area, the tooltip will appear. */ - containerClassName: PropTypes.string, + hoverAreaClassName: PropTypes.string, /** * The style of the tooltip @@ -240,9 +250,9 @@ AbsoluteTooltip.propTypes = { style: PropTypes.object, /** - * The style of the container (invisible bounding box) + * The style of the invisible area determined by `bbox`. When you hover over that area, the tooltip will appear. */ - containerStyle: PropTypes.object, + hoverAreaStyle: PropTypes.object, /** * Dash-assigned callback that gets fired when the value changes. @@ -265,11 +275,6 @@ AbsoluteTooltip.propTypes = { */ show: PropTypes.bool, - /** - * The size of the caret in pixels - */ - caretSize: PropTypes.number, - /** * Defines the direction in which the hover opens. */ From 45dba118768f0e50c914e07955001687141adb04 Mon Sep 17 00:00:00 2001 From: xhlulu Date: Mon, 9 Aug 2021 15:01:30 -0400 Subject: [PATCH 10/15] Remove :hover toggling, Remove z-index for bbox --- src/components/AbsoluteTooltip.react.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/AbsoluteTooltip.react.js b/src/components/AbsoluteTooltip.react.js index ccc520dac..353c3462b 100644 --- a/src/components/AbsoluteTooltip.react.js +++ b/src/components/AbsoluteTooltip.react.js @@ -12,7 +12,7 @@ const AbsoluteTooltip = props => { return ( <>
{
- ); }; @@ -210,6 +197,7 @@ AbsoluteTooltip.defaultProps = { }, className: '', zindex: 1, + loading_text: 'Loading...', }; AbsoluteTooltip.propTypes = { @@ -298,6 +286,11 @@ AbsoluteTooltip.propTypes = { component_name: PropTypes.string, }), + /** + * The text displayed in the tooltip when loading + */ + loading_text: PropTypes.string, + /** * This corresponds to the `z-index` CSS property you want to assign to the tooltip. Components with higher values will be displayed first on the screen. */