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..4c098aa7c 100644 --- a/src/app/js/formats/chart/network/NetworkView.js +++ b/src/app/js/formats/chart/network/NetworkView.js @@ -12,16 +12,13 @@ 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'; -import ZoomableFormat from '../../utils/components/ZoomableFormat'; +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 }; @@ -72,8 +64,8 @@ class Network extends Component { const { nodes, links, colorSet } = this.props; return ( - -
+ +
{nodes.map((node) => ( {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 72% rename from src/app/js/formats/utils/components/ZoomableFormat.js rename to src/app/js/formats/utils/components/FormatFullScreenMode.js index 816c04a43..a73ad638f 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 = () => { @@ -21,22 +21,20 @@ const ZoomableFormat = ({ children, p }) => { return ( <> -
- {!open ? children : null} + {children} - - - - - -
+ + + + + { overflow: 'scroll', }} > - {open ? children : null} + {children} @@ -71,9 +69,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({ /> ) : ( - + - + )} );