fixes for issues #2,30

LePa-YU · Nov 11, 2024 · 33ed893 · 33ed893
1 parent 9491e5d
commit 33ed893
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 23 deletions.
diff --git a/src/LinkPopover.js b/src/LinkPopover.js
@@ -91,8 +91,37 @@ const LinkPopover = ({ id, open, anchorEl, onClose, handleTypeChange, handleRemo
                 vertical: 'top',
                 horizontal: 'center',
             }}
+            sx={{
+                width: 'auto',
+                height: 'auto',
+                padding: '10px',
+                marginTop:'10px',
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '4px',
+                gap: 1,
+                '@media (max-width: 600px)': {
+      flexDirection: 'column',  // Switch to column layout on small screens
+      alignItems: 'flex-start',
+    },
+
+        }}
         >
-            <FormControl style={{ margin: '8px', width: '180px' }}>
+            <FormControl
+                style={{ margin: '8px', width: '180px' }}
+                sx={{
+                p: 1,  // Adds padding inside the button
+                m: 0.5,  // Adds margin around the button
+                textOverflow: 'ellipsis',
+                maxWidth: '100%',  // Ensure it doesn’t overflow container
+                '@media (max-width: 600px)': {
+                width: '100%',  // Full-width on smaller screens
+                },
+                }}
+            >
                 <InputLabel>Type</InputLabel>
                 <Select
                     value={selectedLink.type}
@@ -106,7 +135,16 @@ const LinkPopover = ({ id, open, anchorEl, onClose, handleTypeChange, handleRemo
                 onClick={handleRemoveLink}
                 startIcon={<Remove />}
                 variant="outlined"
-                style={{ margin: '8px', width: '100px' }}
+                style={{ margin: '8px', width: '110px' }}
+                sx={{
+                    p: 1,  // Adds padding inside the button
+                    m: 0.5,  // Adds margin around the button
+                    textOverflow: 'ellipsis',
+                    maxWidth: '100%',  // Ensure it doesn’t overflow container
+                    '@media (max-width: 600px)': {
+                      width: '100%',  // Full-width on smaller screens
+                    },
+                  }}
 
             >
                 Remove Link
@@ -115,7 +153,16 @@ const LinkPopover = ({ id, open, anchorEl, onClose, handleTypeChange, handleRemo
                 onClick={handleReverse}
                 startIcon={<SwapHoriz />}
                 variant="outlined"
-                style={{ margin: '8px', width: '100px' }}
+                style={{ margin: '8px', width: '110px' }}
+                sx={{
+                    textOverflow: 'ellipsis',
+                    p: 1,  // Adds padding inside the button
+                    m: 1,  // Adds margin around the button
+                    maxWidth: '100%',  // Ensure it doesn’t overflow container
+                    '@media (max-width: 600px)': {
+                      width: '100%',  // Full-width on smaller screens
+                    },
+                  }}
             >
                 Reverse Link
             </Button>

diff --git a/src/NetworkGraph.js b/src/NetworkGraph.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import * as d3 from 'd3';
 import { Alert, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControlLabel, FormGroup, Slide, Stack, Switch, Typography } from '@mui/material';
 import { MenuItem, Select, FormControl, InputLabel } from '@mui/material';
-import { Add, ErrorOutline, Visibility ,Undo as UndoIcon} from '@mui/icons-material';
+import { Add, ErrorOutline, Visibility ,Undo as UndoIcon, Redo as RedoIcon} from '@mui/icons-material';
 import NodePopover from './NodePopover';
 import LinkPopover from './LinkPopover';
 import Navbar from './Navbar';
@@ -942,9 +942,10 @@ const NetworkGraph = () => {
             default:
                 break;
         }
-
         setHistory(prev => prev.slice(0, -1));
     };
+
+
     const handleRemoveNode = () => {
         let nodeId = null;
         if (selectedNode) {
@@ -1191,23 +1192,15 @@ const NetworkGraph = () => {
 
     const handleReverseLink = (source, target) => {
         if (selectedLink) {
-            //remove link
-            switch (selectedLink.type) {
-                    case "Assesses":
-                        selectedLink.source.assesses = null;
-                    case "Comes After":
-                        selectedLink.source.comesAfter = null;
-                    case "Is Part Of":
-                        selectedLink.source.isPartOf = null;
-                }
-
-                // Create a new array without the selected link
-
-
-                const updatedLinks = links.filter(link => link.source.id !== selectedLink.source.id);
-
-
 
+        // Create a new array without the selected link
+        const updatedLinks = links.filter(
+            link => !(
+                    link.source.id === selectedLink.source.id &&
+                    link.target.id === selectedLink.target.id
+                )
+            );
+
 
                 // Create a new link object with swapped source and target
 
@@ -1234,7 +1227,8 @@ const NetworkGraph = () => {
 
             // Update the state with the new links array
             setLinks(updatedLinks);
-           setAnchorElLink(false);
+            setAnchorElLink(false);
+            setSelectedLink(null);
         }
         };
 
@@ -1454,7 +1448,6 @@ const NetworkGraph = () => {
                     <Button onClick={handleAddNode} startIcon={<Add />} variant="outlined">Add ER</Button>
                     <Button id='recenterButton' variant="outlined">Recenter</Button>
                     <Button onClick={handleUndo} startIcon={<UndoIcon />} variant="outlined" disabled={history.length === 0} >Undo</Button>
-
                     <FormControlLabel sx={{ marginLeft: '2px' }}
                         control={<Switch size="small" checked={labelsToggled} onChange={() => setLabelsToggled(!labelsToggled)} />}
                         label={`${labelsToggled ? 'Hide' : 'Show'} Labels`}