feat: make network chart using the fullscreen feature

Inist-CNRS · Mar 21, 2024 · 2e4562c · 2e4562c · HeleneCreusot · Aug 21, 2024
1 parent c9352d0
commit 2e4562c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/app/js/formats/chart/network/NetworkView.js b/src/app/js/formats/chart/network/NetworkView.js
@@ -12,13 +12,16 @@ 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';
 
 const simulationOptions = {
     animate: true,
+    width: '100%',
+    height: '100%',
     strength: {
         charge: ({ radius }) => -radius * 100,
     },
@@ -29,12 +32,17 @@ const labelOffset = {
     y: ({ radius }) => radius * Math.sin(Math.PI / 4) + 6,
 };
 
-const styles = {
+const styles = StyleSheet.create({
     container: {
         overflow: 'hidden',
         userSelect: 'none',
+        height: '100%',
+        minHeight: '600px',
     },
-};
+    network: {
+        minHeight: '600px',
+    },
+});
 
 const zoomOptions = { minScale: 0.25, maxScale: 16 };
 
@@ -65,7 +73,7 @@ class Network extends Component {
 
         return (
             <ZoomableFormat>
-                <div style={styles.container}>
+                <div className={css(styles.container)}>
                     <InteractiveForceGraph
                         simulationOptions={simulationOptions}
                         zoom
@@ -75,6 +83,7 @@ class Network extends Component {
                         labelOffset={labelOffset}
                         highlightDependencies
                         createSimulation={this.createSimulation}
+                        className={css(styles.network)}
                     >
                         {nodes.map((node) => (
                             <ForceGraphNode

diff --git a/src/app/js/formats/utils/components/ZoomableFormat.js b/src/app/js/formats/utils/components/ZoomableFormat.js
@@ -22,7 +22,8 @@ const ZoomableFormat = ({ children, p }) => {
     return (
         <>
             <div>
-                {children}
+                {!open ? children : null}
+
                 <Tooltip title={p.t('fullscreen')} placement="left">
                     <IconButton
                         onClick={handleClickOpen}
@@ -57,9 +58,12 @@ const ZoomableFormat = ({ children, p }) => {
                         style={{
                             borderRadius: '5px',
                             margin: '24px',
+                            height: '100%',
+                            maxHeight: 'calc(100% - 48px)',
+                            overflow: 'scroll',
                         }}
                     >
-                        {children}
+                        {open ? children : null}
                     </fieldset>
                 </DialogContent>
             </Dialog>