Merge pull request #2121 from Inist-CNRS/fix/full-screen

Refactor ZoomableFormat and Fix Network
Inist-CNRS · Aug 26, 2024 · 4b6bc44 · 4b6bc44
2 parents 84aa483 + 11e9416
commit 4b6bc44
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 49 deletions.
diff --git 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 }) => (
-    <ZoomableFormat>
+    <FormatFullScreenMode>
         <div style={styles.container({ diameter })}>
             {data.map(({ data: { _id: key }, r, x, y, value }, index) => (
                 <Bubble
@@ -34,7 +34,7 @@ export const BubbleView = ({ data, diameter, colorSet }) => (
                 />
             ))}
         </div>
-    </ZoomableFormat>
+    </FormatFullScreenMode>
 );
 
 BubbleView.propTypes = {

diff --git 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 (
         <div style={{ margin: '12px' }}>
-            <ZoomableFormat>
+            <FormatFullScreenMode>
                 <Grid
                     container
                     justifyContent="center"
@@ -64,7 +64,7 @@ const ClusteredChartView = ({ data, colors, xTitle, yTitle, flipAxis }) => {
                         </Grid>
                     ))}
                 </Grid>
-            </ZoomableFormat>
+            </FormatFullScreenMode>
         </div>
     );
 };

diff --git 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 (
-            <ZoomableFormat>
-                <div className={css(styles.container)}>
+            <FormatFullScreenMode>
+                <div style={styles.container}>
                     <InteractiveForceGraph
                         simulationOptions={simulationOptions}
                         zoom
@@ -83,7 +75,6 @@ class Network extends Component {
                         labelOffset={labelOffset}
                         highlightDependencies
                         createSimulation={this.createSimulation}
-                        className={css(styles.network)}
                     >
                         {nodes.map((node) => (
                             <ForceGraphNode
@@ -102,7 +93,7 @@ class Network extends Component {
 
                     <div>{this.mouseIcon}</div>
                 </div>
-            </ZoomableFormat>
+            </FormatFullScreenMode>
         );
     }
 }

diff --git 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 (
-            <ZoomableFormat>
+            <FormatFullScreenMode>
                 <div
                     ref={this.divContainer}
                     style={styles.divContainer}
@@ -701,7 +701,7 @@ class Streamgraph extends PureComponent {
                         <g id="anchor" ref={this.anchor} />
                     </svg>
                 </div>
-            </ZoomableFormat>
+            </FormatFullScreenMode>
         );
     }
 }

diff --git a/...ormats/utils/components/ZoomableFormat.js → .../utils/components/FormatFullScreenMode.js b/...ormats/utils/components/ZoomableFormat.js → .../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 (
         <>
-            <div>
-                {!open ? children : null}
+            {children}
 
-                <Tooltip title={p.t('fullscreen')} placement="left">
-                    <IconButton
-                        onClick={handleClickOpen}
-                        sx={{
-                            position: 'absolute',
-                            right: 8,
-                            bottom: 8,
-                        }}
-                    >
-                        <OpenInFullIcon />
-                    </IconButton>
-                </Tooltip>
-            </div>
+            <Tooltip title={p.t('fullscreen')} placement="left">
+                <IconButton
+                    onClick={handleClickOpen}
+                    sx={{
+                        position: 'absolute',
+                        right: 8,
+                        bottom: 8,
+                    }}
+                >
+                    <OpenInFullIcon />
+                </IconButton>
+            </Tooltip>
 
             <Dialog fullScreen={true} open={open} onClose={handleClose}>
                 <IconButton
@@ -63,17 +61,17 @@ const ZoomableFormat = ({ children, p }) => {
                             overflow: 'scroll',
                         }}
                     >
-                        {open ? children : null}
+                        {children}
                     </fieldset>
                 </DialogContent>
             </Dialog>
         </>
     );
 };
 
-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
@@ -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 (
-        <ZoomableFormat>
+        <FormatFullScreenMode>
             <style>{'#vg-tooltip-element {z-index:99999}'}</style>
             <Vega
                 style={
@@ -94,7 +94,7 @@ function CustomActionVega(props) {
                 actions={actions}
                 mode="vega"
             />
-        </ZoomableFormat>
+        </FormatFullScreenMode>
     );
 }
 

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
@@ -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({
                     />
                 </div>
             ) : (
-                <ZoomableFormat>
+                <FormatFullScreenMode>
                     <Vega
                         style={
                             aspectRatio === ASPECT_RATIO_NONE
@@ -100,7 +100,7 @@ function CustomActionVegaLite({
                         actions={actions}
                         mode="vega-lite"
                     />
-                </ZoomableFormat>
+                </FormatFullScreenMode>
             )}
         </>
     );