From 33ed89335779d5ada5d1b4ccbf60c1e598ff7baa Mon Sep 17 00:00:00 2001
From: Niharika Rajnish <niharikarajnish49@gmail.com–>
Date: Sun, 10 Nov 2024 21:17:36 -0500
Subject: [PATCH] fixes for issues #2,30

---
 src/LinkPopover.js  | 53 ++++++++++++++++++++++++++++++++++++++++++---
 src/NetworkGraph.js | 33 +++++++++++-----------------
 2 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/src/LinkPopover.js b/src/LinkPopover.js
index e1a6576..2354cae 100644
--- 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
index 28fffec..0b7919e 100644
--- 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`}