From 91d8afd32e9adcf17882e78eb523af1c3c722646 Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Fri, 26 Jul 2024 15:33:51 +0200 Subject: [PATCH 1/3] refactor: rename ZoomableFormat to avoid confusion --- src/app/js/formats/chart/bubbleChart/BubbleView.js | 6 +++--- .../js/formats/chart/clustered-chart/ClusteredChartView.js | 6 +++--- src/app/js/formats/chart/network/NetworkView.js | 6 +++--- src/app/js/formats/chart/streamgraph/Streamgraph.js | 6 +++--- .../{ZoomableFormat.js => FormatFullScreenMode.js} | 6 +++--- .../utils/components/vega-component/VegaComponent.js | 6 +++--- .../components/vega-lite-component/VegaLiteComponent.js | 6 +++--- 7 files changed, 21 insertions(+), 21 deletions(-) rename src/app/js/formats/utils/components/{ZoomableFormat.js => FormatFullScreenMode.js} (94%) diff --git a/src/app/js/formats/chart/bubbleChart/BubbleView.js b/src/app/js/formats/chart/bubbleChart/BubbleView.js index d4f5f268c..9b49b16d8 100644 --- a/src/app/js/formats/chart/bubbleChart/BubbleView.js +++ b/src/app/js/formats/chart/bubbleChart/BubbleView.js @@ -8,7 +8,7 @@ import memoize from 'lodash/memoize'; import injectData from '../../injectData'; import Bubble from './Bubble'; import { getColor } from '../../utils/colorUtils'; -import ZoomableFormat from '../../utils/components/ZoomableFormat'; +import FormatFullScreenMode from '../../utils/components/FormatFullScreenMode'; const styles = { container: memoize(({ diameter }) => ({ @@ -20,7 +20,7 @@ const styles = { }; export const BubbleView = ({ data, diameter, colorSet }) => ( - +
{data.map(({ data: { _id: key }, r, x, y, value }, index) => ( ( /> ))}
- + ); BubbleView.propTypes = { diff --git a/src/app/js/formats/chart/clustered-chart/ClusteredChartView.js b/src/app/js/formats/chart/clustered-chart/ClusteredChartView.js index ff1ff69b8..b80015c69 100644 --- a/src/app/js/formats/chart/clustered-chart/ClusteredChartView.js +++ b/src/app/js/formats/chart/clustered-chart/ClusteredChartView.js @@ -9,7 +9,7 @@ import injectData from '../../injectData'; import { field as fieldPropTypes } from '../../../propTypes'; import ClusteredChart from './ClusteredChart'; import { flip } from '../../utils/chartsUtils'; -import ZoomableFormat from '../../utils/components/ZoomableFormat'; +import FormatFullScreenMode from '../../utils/components/FormatFullScreenMode'; /** * Clustered chart view components use to render the chart with given parameters @@ -40,7 +40,7 @@ const ClusteredChartView = ({ data, colors, xTitle, yTitle, flipAxis }) => { return (
- + { ))} - +
); }; diff --git a/src/app/js/formats/chart/network/NetworkView.js b/src/app/js/formats/chart/network/NetworkView.js index 4c67605fe..110cf0a50 100644 --- a/src/app/js/formats/chart/network/NetworkView.js +++ b/src/app/js/formats/chart/network/NetworkView.js @@ -16,7 +16,7 @@ import { StyleSheet, css } from 'aphrodite/no-important'; import injectData from '../../injectData'; import MouseIcon from '../../utils/components/MouseIcon'; -import ZoomableFormat from '../../utils/components/ZoomableFormat'; +import FormatFullScreenMode from '../../utils/components/FormatFullScreenMode'; const simulationOptions = { animate: true, @@ -72,7 +72,7 @@ class Network extends Component { const { nodes, links, colorSet } = this.props; return ( - +
{this.mouseIcon}
- + ); } } diff --git a/src/app/js/formats/chart/streamgraph/Streamgraph.js b/src/app/js/formats/chart/streamgraph/Streamgraph.js index ca0d2596b..4f1e7d509 100644 --- a/src/app/js/formats/chart/streamgraph/Streamgraph.js +++ b/src/app/js/formats/chart/streamgraph/Streamgraph.js @@ -22,7 +22,7 @@ import MouseIcon from '../../utils/components/MouseIcon'; import CenterIcon from '../../utils/components/CenterIcon'; import stylesToClassname from '../../../lib/stylesToClassName'; -import ZoomableFormat from '../../utils/components/ZoomableFormat'; +import FormatFullScreenMode from '../../utils/components/FormatFullScreenMode'; const styles = StyleSheet.create({ divContainer: { @@ -654,7 +654,7 @@ class Streamgraph extends PureComponent { loading = ''; } return ( - +
- + ); } } diff --git a/src/app/js/formats/utils/components/ZoomableFormat.js b/src/app/js/formats/utils/components/FormatFullScreenMode.js similarity index 94% rename from src/app/js/formats/utils/components/ZoomableFormat.js rename to src/app/js/formats/utils/components/FormatFullScreenMode.js index 816c04a43..85f963b7d 100644 --- a/src/app/js/formats/utils/components/ZoomableFormat.js +++ b/src/app/js/formats/utils/components/FormatFullScreenMode.js @@ -9,7 +9,7 @@ import Tooltip from '@mui/material/Tooltip'; import translate from 'redux-polyglot/translate'; import { polyglot as polyglotPropTypes } from '../../../propTypes'; -const ZoomableFormat = ({ children, p }) => { +const FormatFullScreenMode = ({ children, p }) => { const [open, setOpen] = useState(false); const handleClickOpen = () => { @@ -71,9 +71,9 @@ const ZoomableFormat = ({ children, p }) => { ); }; -ZoomableFormat.propTypes = { +FormatFullScreenMode.propTypes = { children: PropTypes.node.isRequired, p: polyglotPropTypes.isRequired, }; -export default translate(ZoomableFormat); +export default translate(FormatFullScreenMode); diff --git a/src/app/js/formats/utils/components/vega-component/VegaComponent.js b/src/app/js/formats/utils/components/vega-component/VegaComponent.js index baccba1ac..18652247b 100644 --- a/src/app/js/formats/utils/components/vega-component/VegaComponent.js +++ b/src/app/js/formats/utils/components/vega-component/VegaComponent.js @@ -10,7 +10,7 @@ import { VEGA_DATA_INJECT_TYPE_C, } from '../../chartsUtils'; import { ASPECT_RATIO_NONE, ASPECT_RATIOS } from '../../aspectRatio'; -import ZoomableFormat from '../ZoomableFormat'; +import FormatFullScreenMode from '../FormatFullScreenMode'; /** * small component use to handle vega lite display @@ -82,7 +82,7 @@ function CustomActionVega(props) { } return ( - + - + ); } diff --git a/src/app/js/formats/utils/components/vega-lite-component/VegaLiteComponent.js b/src/app/js/formats/utils/components/vega-lite-component/VegaLiteComponent.js index dc2015297..e4900633a 100644 --- a/src/app/js/formats/utils/components/vega-lite-component/VegaLiteComponent.js +++ b/src/app/js/formats/utils/components/vega-lite-component/VegaLiteComponent.js @@ -10,7 +10,7 @@ import { VEGA_LITE_DATA_INJECT_TYPE_C, } from '../../chartsUtils'; import { ASPECT_RATIO_NONE, ASPECT_RATIOS } from '../../aspectRatio'; -import ZoomableFormat from '../ZoomableFormat'; +import FormatFullScreenMode from '../FormatFullScreenMode'; /** * small component use to handle vega lite display @@ -89,7 +89,7 @@ function CustomActionVegaLite({ /> ) : ( - + - + )} ); From ef8512516f8c6eb68840b95eab61a02c51dc383a Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Fri, 26 Jul 2024 15:37:34 +0200 Subject: [PATCH 2/3] refactor: remove div and display condition --- .../utils/components/FormatFullScreenMode.js | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/app/js/formats/utils/components/FormatFullScreenMode.js b/src/app/js/formats/utils/components/FormatFullScreenMode.js index 85f963b7d..a73ad638f 100644 --- a/src/app/js/formats/utils/components/FormatFullScreenMode.js +++ b/src/app/js/formats/utils/components/FormatFullScreenMode.js @@ -21,22 +21,20 @@ const FormatFullScreenMode = ({ children, p }) => { return ( <> -
- {!open ? children : null} + {children} - - - - - -
+ + + + + { overflow: 'scroll', }} > - {open ? children : null} + {children} From 11e9416d11f3e775453830381ae58287fa7be4e7 Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Thu, 22 Aug 2024 08:41:04 +0200 Subject: [PATCH 3/3] fix: update network chart to fix #2050 --- src/app/js/formats/chart/network/NetworkView.js | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/src/app/js/formats/chart/network/NetworkView.js b/src/app/js/formats/chart/network/NetworkView.js index 110cf0a50..4c098aa7c 100644 --- a/src/app/js/formats/chart/network/NetworkView.js +++ b/src/app/js/formats/chart/network/NetworkView.js @@ -12,7 +12,6 @@ import compose from 'recompose/compose'; import get from 'lodash/get'; import isEqual from 'lodash/isEqual'; import { scaleLinear } from 'd3-scale'; -import { StyleSheet, css } from 'aphrodite/no-important'; import injectData from '../../injectData'; import MouseIcon from '../../utils/components/MouseIcon'; @@ -20,8 +19,6 @@ import FormatFullScreenMode from '../../utils/components/FormatFullScreenMode'; const simulationOptions = { animate: true, - width: '100%', - height: '100%', strength: { charge: ({ radius }) => -radius * 100, }, @@ -32,17 +29,12 @@ const labelOffset = { y: ({ radius }) => radius * Math.sin(Math.PI / 4) + 6, }; -const styles = StyleSheet.create({ +const styles = { container: { overflow: 'hidden', userSelect: 'none', - height: '100%', - minHeight: '600px', }, - network: { - minHeight: '600px', - }, -}); +}; const zoomOptions = { minScale: 0.25, maxScale: 16 }; @@ -73,7 +65,7 @@ class Network extends Component { return ( -
+
{nodes.map((node) => (