diff --git a/example/data.json b/example/data.json
index af67074..e94bd7a 100644
--- a/example/data.json
+++ b/example/data.json
@@ -602,6 +602,9 @@
                 "category": "pELS",
                 "simple": "Proximal Enhancer"
             }
-        ]
+        ],
+        "centered": {
+            "cCRE": "EH38E4193211"
+        }
     }
 }
\ No newline at end of file
diff --git a/example/data2.json b/example/data2.json
index b94a07b..a38b226 100644
--- a/example/data2.json
+++ b/example/data2.json
@@ -6,6 +6,12 @@
                 "target": "node_2",
                 "effectSize": 0.1134,
                 "expressionImpact": "lower-expression"
+            },
+            {
+                "perturbed": "node_3",
+                "target": "node_2",
+                "effectSize": 0.5,
+                "expressionImpact": "higher-expression"
             }
         ],
         "node": [
@@ -18,6 +24,11 @@
                 "cCRE": "node_2",
                 "category": "CA-CTCF",
                 "simple": "Chromatin Accessible + CTCF"
+            },
+            {
+                "cCRE": "node_3",
+                "category": "CA-TF",
+                "simple": "Transcription Factor"
             }
         ]
     }
diff --git a/example/data3.json b/example/data3.json
new file mode 100644
index 0000000..af67074
--- /dev/null
+++ b/example/data3.json
@@ -0,0 +1,607 @@
+{
+    "data": {
+        "edge": [
+            {
+                "perturbed": "EH38E3291096",
+                "target": "EH38E1939823",
+                "effectSize": 0.1134,
+                "expressionImpact": "lower-expression"
+            },
+            {
+                "perturbed": "EH38E1939823",
+                "target": "EH38E1939823",
+                "effectSize": 0.1933,
+                "expressionImpact": "lower-expression"
+            },
+            {
+                "perturbed": "EH38E3291121",
+                "target": "EH38E1939823",
+                "effectSize": 0.0545,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291122",
+                "target": "EH38E1939823",
+                "effectSize": 0.0665,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291358",
+                "target": "EH38E1939823",
+                "effectSize": 0.0674,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291271",
+                "target": "EH38E3291279",
+                "effectSize": 0.0381,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291279",
+                "target": "EH38E3291279",
+                "effectSize": 0.1667,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291358",
+                "target": "EH38E3291279",
+                "effectSize": 0.0478,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291174",
+                "target": "EH38E3291410",
+                "effectSize": 0.0504,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E4193273",
+                "target": "EH38E3291410",
+                "effectSize": 0.0507,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291358",
+                "target": "EH38E3291410",
+                "effectSize": 0.0895,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291392",
+                "target": "EH38E3291410",
+                "effectSize": 0.0352,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291410",
+                "target": "EH38E3291410",
+                "effectSize": 0.2538,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291174",
+                "target": "EH38E4193228",
+                "effectSize": 0.0211,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291218",
+                "target": "EH38E4193228",
+                "effectSize": 0.0477,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291222",
+                "target": "EH38E4193228",
+                "effectSize": 0.0627,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291226",
+                "target": "EH38E4193228",
+                "effectSize": 0.0448,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E4193211",
+                "target": "EH38E4193228",
+                "effectSize": 0.0454,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291232",
+                "target": "EH38E4193228",
+                "effectSize": 0.0311,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291249",
+                "target": "EH38E4193228",
+                "effectSize": 0.0593,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291263",
+                "target": "EH38E4193228",
+                "effectSize": 0.1136,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291271",
+                "target": "EH38E4193228",
+                "effectSize": 0.4097,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291279",
+                "target": "EH38E4193228",
+                "effectSize": 0.1077,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E4193243",
+                "target": "EH38E4193228",
+                "effectSize": 0.026,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291318",
+                "target": "EH38E4193228",
+                "effectSize": 0.0297,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E4193273",
+                "target": "EH38E4193228",
+                "effectSize": 0.0405,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291358",
+                "target": "EH38E4193228",
+                "effectSize": 0.0918,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291779",
+                "target": "EH38E4193228",
+                "effectSize": 0.0263,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E4193467",
+                "target": "EH38E4193228",
+                "effectSize": 0.0374,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E1960374",
+                "target": "EH38E1960374",
+                "effectSize": 0.1853,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3312736",
+                "target": "EH38E1960374",
+                "effectSize": 0.0698,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E1960377",
+                "target": "EH38E1960374",
+                "effectSize": 0.1479,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E4201343",
+                "target": "EH38E1960374",
+                "effectSize": 0.1042,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E1960374",
+                "target": "EH38E3312774",
+                "effectSize": 0.143,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E3312736",
+                "target": "EH38E3312774",
+                "effectSize": 0.0864,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E1960377",
+                "target": "EH38E3312774",
+                "effectSize": 0.1641,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E4201343",
+                "target": "EH38E3312774",
+                "effectSize": 0.0652,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E3312746",
+                "target": "EH38E3312774",
+                "effectSize": 0.0835,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3312765",
+                "target": "EH38E3312774",
+                "effectSize": 0.0386,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3312774",
+                "target": "EH38E3312774",
+                "effectSize": 0.3507,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3312787",
+                "target": "EH38E3312774",
+                "effectSize": 0.0959,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E1940335",
+                "target": "EH38E3291664",
+                "effectSize": 0.0701,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291664",
+                "target": "EH38E3291664",
+                "effectSize": 0.3563,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291668",
+                "target": "EH38E3291664",
+                "effectSize": 0.1181,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291318",
+                "target": "EH38E3291358",
+                "effectSize": 0.0369,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291346",
+                "target": "EH38E3291358",
+                "effectSize": 0.108,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E4193273",
+                "target": "EH38E3291358",
+                "effectSize": 0.2005,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291358",
+                "target": "EH38E3291358",
+                "effectSize": 0.441,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291364",
+                "target": "EH38E3291358",
+                "effectSize": 0.0862,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291374",
+                "target": "EH38E3291358",
+                "effectSize": 0.0278,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291664",
+                "target": "EH38E3291358",
+                "effectSize": 0.0291,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E1939855",
+                "target": "EH38E3291249",
+                "effectSize": 0.0684,
+                "expressionImpact": "higher-expression"
+
+            },
+            {
+                "perturbed": "EH38E4193211",
+                "target": "EH38E3291249",
+                "effectSize": 0.0354,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291232",
+                "target": "EH38E3291249",
+                "effectSize": 0.0767,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291244",
+                "target": "EH38E3291249",
+                "effectSize": 0.0883,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291249",
+                "target": "EH38E3291249",
+                "effectSize": 0.1514,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291358",
+                "target": "EH38E3291249",
+                "effectSize": 0.0378,
+                "expressionImpact": "lower-expression"
+
+            },
+            {
+                "perturbed": "EH38E3291664",
+                "target": "EH38E3291249",
+                "effectSize": 0.0276,
+                "expressionImpact": "higher-expression"
+
+            }
+        ],
+        "node": [
+            {
+                "cCRE": "EH38E1939823",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E1939855",
+                "category": "CA-CTCF",
+                "simple": "Chromatin Accessible + CTCF"
+            },
+            {
+                "cCRE": "EH38E1940335",
+                "category": "dELS",
+                "simple": "Distal Enhancer"
+            },
+            {
+                "cCRE": "EH38E1960374",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E1960377",
+                "category": "pELS",
+                "simple": "Proximal Enhancer"
+            },
+            {
+                "cCRE": "EH38E3291096",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291121",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291122",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291174",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291218",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291222",
+                "category": "dELS",
+                "simple": "Distal Enhancer"
+            },
+            {
+                "cCRE": "EH38E3291226",
+                "category": "dELS",
+                "simple": "Distal Enhancer"
+            },
+            {
+                "cCRE": "EH38E3291232",
+                "category": "pELS",
+                "simple": "Proximal Enhancer"
+            },
+            {
+                "cCRE": "EH38E3291244",
+                "category": "pELS",
+                "simple": "Proximal Enhancer"
+            },
+            {
+                "cCRE": "EH38E3291249",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291263",
+                "category": "pELS",
+                "simple": "Proximal Enhancer"
+            },
+            {
+                "cCRE": "EH38E3291271",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291279",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291318",
+                "category": "CA-CTCF",
+                "simple": "Chromatin Accessible + CTCF"
+            },
+            {
+                "cCRE": "EH38E3291346",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291358",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291364",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291374",
+                "category": "CA-TF",
+                "simple": "Chromatin Accessible + Transcription Factor"
+            },
+            {
+                "cCRE": "EH38E3291392",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291410",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291664",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3291668",
+                "category": "pELS",
+                "simple": "Proximal Enhancer"
+            },
+            {
+                "cCRE": "EH38E3291779",
+                "category": "CA-CTCF",
+                "simple": "Chromatin Accessible + CTCF"
+            },
+            {
+                "cCRE": "EH38E3312736",
+                "category": "pELS",
+                "simple": "Proximal Enhancer"
+            },
+            {
+                "cCRE": "EH38E3312746",
+                "category": "dELS",
+                "simple": "Distal Enhancer"
+            },
+            {
+                "cCRE": "EH38E3312765",
+                "category": "CA-TF",
+                "simple": "Chromatin Accessible + Transcription Factor"
+            },
+            {
+                "cCRE": "EH38E3312774",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E3312787",
+                "category": "CA-TF",
+                "simple": "Chromatin Accessible + Transcription Factor"
+            },
+            {
+                "cCRE": "EH38E4193211",
+                "category": "pELS",
+                "simple": "Proximal Enhancer"
+            },
+            {
+                "cCRE": "EH38E4193228",
+                "category": "PLS",
+                "simple": "Promoter"
+            },
+            {
+                "cCRE": "EH38E4193243",
+                "category": "CA-H3K4me3",
+                "simple": "Chromatin Accessible + H3K4me3"
+            },
+            {
+                "cCRE": "EH38E4193273",
+                "category": "pELS",
+                "simple": "Proximal Enhancer"
+            },
+            {
+                "cCRE": "EH38E4193467",
+                "category": "CA-CTCF",
+                "simple": "Chromatin Accessible + CTCF"
+            },
+            {
+                "cCRE": "EH38E4201343",
+                "category": "pELS",
+                "simple": "Proximal Enhancer"
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
index 0bfd715..d699aa3 100644
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@@ -3,8 +3,13 @@
  */
 
 import React from 'react';
-import { AppBar as MUIAppBar, AppBarProps as MUIAppBarProps, Box, Toolbar } from '@mui/material';
-import { styled } from "@mui/material/styles"
+import {
+  AppBar as MUIAppBar,
+  AppBarProps as MUIAppBarProps,
+  Box,
+  Toolbar,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 import MenuItem from './MenuItem';
 import DropDownMenuItem from './DropDownMenuItem';
@@ -17,71 +22,77 @@ import DropDownMenuItem from './DropDownMenuItem';
  * @member onDownloadsClicked event handler for when the downloads link is clicked.
  */
 export type AppBarProps = MUIAppBarProps & {
-    onHomepageClicked?: () => void;
-    onAboutClicked?: () => void;
-    onPortalClicked?: (index: number) => void;
-    onDownloadsClicked?: () => void;
-    centered?: boolean;
+  onHomepageClicked?: () => void;
+  onAboutClicked?: () => void;
+  onPortalClicked?: (index: number) => void;
+  onDownloadsClicked?: () => void;
+  centered?: boolean;
 };
 
 export const StyledAppBar = styled(MUIAppBar)<AppBarProps>((props) => ({
-    backgroundColor: "#ffffff",
-    color: "#000000",
-    alignItems: props.centered===true ? "center" : "left"
-
+  backgroundColor: '#ffffff',
+  color: '#000000',
+  alignItems: props.centered === true ? 'center' : 'left',
 }));
 
-export const PortalsMenuItem: React.FC<{ children?: React.ReactNode, onClick?: () => void }> = ({ children, onClick }) => (
-    <MenuItem
-        onClick={onClick}
-        height="48px"
-        fontSize="14px"
-        lineHeight="24px"
-        marginTop="5px"
-    >
-        {children}
-    </MenuItem>
+export const PortalsMenuItem: React.FC<{
+  children?: React.ReactNode;
+  onClick?: () => void;
+}> = ({ children, onClick }) => (
+  <MenuItem
+    onClick={onClick}
+    height="48px"
+    fontSize="14px"
+    lineHeight="24px"
+    marginTop="5px"
+  >
+    {children}
+  </MenuItem>
 );
 
-const PortalsMenu: React.FC<{ onPortalClicked?: (index: number) => void }> = ({ onPortalClicked }) => (
-    <>
-        <PortalsMenuItem onClick={() => onPortalClicked && onPortalClicked(0)}>Disease/Trait</PortalsMenuItem>
-        <PortalsMenuItem onClick={() => onPortalClicked && onPortalClicked(1)}>Gene/b-cCRE</PortalsMenuItem>
-        <PortalsMenuItem onClick={() => onPortalClicked && onPortalClicked(2)}>SNP/QTL</PortalsMenuItem>
-        <PortalsMenuItem onClick={() => onPortalClicked && onPortalClicked(3)}>Single-Cell</PortalsMenuItem>
-    </>
+const PortalsMenu: React.FC<{ onPortalClicked?: (index: number) => void }> = ({
+  onPortalClicked,
+}) => (
+  <>
+    <PortalsMenuItem onClick={() => onPortalClicked && onPortalClicked(0)}>
+      Disease/Trait
+    </PortalsMenuItem>
+    <PortalsMenuItem onClick={() => onPortalClicked && onPortalClicked(1)}>
+      Gene/b-cCRE
+    </PortalsMenuItem>
+    <PortalsMenuItem onClick={() => onPortalClicked && onPortalClicked(2)}>
+      SNP/QTL
+    </PortalsMenuItem>
+    <PortalsMenuItem onClick={() => onPortalClicked && onPortalClicked(3)}>
+      Single-Cell
+    </PortalsMenuItem>
+  </>
 );
 
-const AppBar: React.FC<AppBarProps> = props => (
-    <Box sx={{ flexGrow: 1 }}>
-        <StyledAppBar position="static" {...props}>
-            <Toolbar sx={{gap: 4}}>
-                <MenuItem
-                    onClick={props.onHomepageClicked}
-                    fontWeight={700}
-                    fontSize="20px"
-                    lineHeight="15px"
-                    flexGrow={1}
-                >
-                    psych<br />&nbsp;screen
-                </MenuItem>
-                <DropDownMenuItem
-                    menu={<PortalsMenu onPortalClicked={props.onPortalClicked} />}
-                >
-                    Portals
-                </DropDownMenuItem>
-                <MenuItem
-                    onClick={props.onAboutClicked}
-                >
-                    About Us
-                </MenuItem>
-                <MenuItem
-                    onClick={props.onDownloadsClicked}
-                >
-                    Downloads
-                </MenuItem>
-            </Toolbar>
-        </StyledAppBar>
-    </Box>
+const AppBar: React.FC<AppBarProps> = (props) => (
+  <Box sx={{ flexGrow: 1 }}>
+    <StyledAppBar position="static" {...props}>
+      <Toolbar sx={{ gap: 4 }}>
+        <MenuItem
+          onClick={props.onHomepageClicked}
+          fontWeight={700}
+          fontSize="20px"
+          lineHeight="15px"
+          flexGrow={1}
+        >
+          psych
+          <br />
+          &nbsp;screen
+        </MenuItem>
+        <DropDownMenuItem
+          menu={<PortalsMenu onPortalClicked={props.onPortalClicked} />}
+        >
+          Portals
+        </DropDownMenuItem>
+        <MenuItem onClick={props.onAboutClicked}>About Us</MenuItem>
+        <MenuItem onClick={props.onDownloadsClicked}>Downloads</MenuItem>
+      </Toolbar>
+    </StyledAppBar>
+  </Box>
 );
 export default AppBar;
diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
index 846250c..4bcb69c 100644
--- a/src/components/Graph/Graph.tsx
+++ b/src/components/Graph/Graph.tsx
@@ -4,7 +4,6 @@ import coseBilkent from 'cytoscape-cose-bilkent';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { useScreenshot } from 'use-react-screenshot';
 import { cCREConstants, cCREClass, buttonStyle } from './constants';
-// import './Graph.css';
 import { GraphProps, Node, Edge } from './types';
 import Legend from './Legend';
 import ScaleLegend from './ScaleLegend';
@@ -17,6 +16,12 @@ cytoscape.use(coseBilkent);
 interface ToolTipData {
   cCRE?: string;
   type: string;
+  centered?: string;
+}
+
+function shortHand(str: string): string {
+  const simple = str as cCREClass;
+  return cCREConstants[simple]?.label || 'n/a';
 }
 
 const download = (image: string, { name = 'img', extension = 'jpg' } = {}) => {
@@ -41,6 +46,7 @@ const Graph: React.FC<GraphProps> = ({
   const [scales, setScales] = useState<number[]>([]);
   const [expressionType, setExpressions] = useState<string[]>([]);
   const [edges, setEdges] = useState<Edge[]>([]);
+  const [showLabels, setShowLabels] = useState(true); // State for label visibility
   const [toggles, setToggles] = useState<{ [key: string]: boolean }>({
     Promoter: true,
     'Distal Enhancer': true,
@@ -52,6 +58,7 @@ const Graph: React.FC<GraphProps> = ({
     'Lower-Expression': true,
     'Higher-Expression': true,
   });
+  const [degree, setDegree] = useState<number>(3);
 
   const toggleControls = () => {
     setShowControls(!showControls);
@@ -83,7 +90,7 @@ const Graph: React.FC<GraphProps> = ({
     scroll: true,
   });
 
-  const handleMouseOver = (event: cytoscape.EventObject, datum: any) => {
+  const handleMouseMove = (event: cytoscape.EventObject, datum: any) => {
     if (!containerRef.current) {
       console.error('Container ref is not set');
       return;
@@ -104,18 +111,77 @@ const Graph: React.FC<GraphProps> = ({
   // each graph needs a unique id
   let k = 'cy-' + id;
 
-  useEffect(() => {
-    setElements(data.node);
-    setEdges(data.edge);
-    setScales(data.edge.map((e: Edge) => e.effectSize));
-    setExpressions(
-      data.edge.map((e: Edge) =>
-        e.expressionImpact === 'higher-expression'
-          ? 'Higher-Expression'
-          : 'Lower-Expression'
-      )
-    );
-  }, [data]);
+  if (data.centered) {
+    // function to filter nodes and edges based on degree - do some check here for if centered even exists in data
+    const filterNodesAndEdges = (degree: number) => {
+      const centeredNode = data.centered.cCRE;
+      let nodesToInclude = new Set<string>([centeredNode]);
+      let edgesToInclude: Edge[] = [];
+      let visited = new Set<string>([centeredNode]);
+
+      // queue to manage BFS traversal
+      let queue: { node: string; depth: number }[] = [
+        { node: centeredNode, depth: 0 },
+      ];
+
+      while (queue.length > 0) {
+        const { node, depth } = queue.shift()!;
+
+        // if the curr depth = to the degree, skip further expansion
+        if (depth >= degree) continue;
+
+        // find edges involving the current node
+        data.edge.forEach((edge) => {
+          const neighbors = [
+            { target: edge.target, perturbed: edge.perturbed },
+            { target: edge.perturbed, perturbed: edge.target },
+          ];
+
+          neighbors.forEach(({ target, perturbed }) => {
+            if (perturbed === node && !visited.has(target)) {
+              visited.add(target);
+              nodesToInclude.add(target);
+              edgesToInclude.push(edge);
+              queue.push({ node: target, depth: depth + 1 });
+            }
+          });
+        });
+      }
+
+      // filter nodes to include only those found within the specified degrees of separation
+      const filteredNodes = data.node.filter((node) =>
+        nodesToInclude.has(node.cCRE)
+      );
+      return { nodes: filteredNodes, edges: edgesToInclude };
+    };
+
+    useEffect(() => {
+      const filteredData = filterNodesAndEdges(degree);
+      setElements(filteredData.nodes);
+      setEdges(filteredData.edges);
+      setScales(filteredData.edges.map((e) => e.effectSize));
+      setExpressions(
+        filteredData.edges.map((e) =>
+          e.expressionImpact === 'higher-expression'
+            ? 'Higher-Expression'
+            : 'Lower-Expression'
+        )
+      );
+    }, [data, degree]);
+  } else {
+    useEffect(() => {
+      setElements(data.node);
+      setEdges(data.edge);
+      setScales(data.edge.map((e: Edge) => e.effectSize));
+      setExpressions(
+        data.edge.map((e: Edge) =>
+          e.expressionImpact === 'higher-expression'
+            ? 'Higher-Expression'
+            : 'Lower-Expression'
+        )
+      );
+    }, [data]);
+  }
 
   useEffect(() => {
     if (
@@ -148,18 +214,13 @@ const Graph: React.FC<GraphProps> = ({
       return cCREConstants[simple]?.color || 'grey';
     }
 
-    function shortHand(str: string): string {
-      const simple = str as cCREClass;
-      return cCREConstants[simple]?.label || 'n/a';
-    }
-
     const cy = cytoscape({
       container: document.getElementById(k),
       style: [
         {
           selector: 'node',
           style: {
-            label: 'data(id)',
+            label: '',
             'font-size': 15,
           },
         },
@@ -206,7 +267,7 @@ const Graph: React.FC<GraphProps> = ({
           style: {
             // find color based on CRE
             'background-color': chooseColor(i),
-            label: shortHand(elements[i].simple),
+            label: showLabels ? shortHand(elements[i].simple) : '',
           },
         });
       }
@@ -246,19 +307,29 @@ const Graph: React.FC<GraphProps> = ({
     cy.nodes().forEach((node: NodeSingular) => {
       let cre = allcCREs[idx].toString();
       let simple = elements[idx].simple.toString();
-      node.on('mousemove', (event) =>
-        handleMouseOver(event, {
-          cCRE: cre,
-          type: simple,
-        })
-      );
+      if (data.centered && cre === data.centered.cCRE) {
+        node.on('mousemove', (event) =>
+          handleMouseMove(event, {
+            cCRE: cre,
+            type: simple,
+            centered: 'Centered Node',
+          })
+        );
+      } else {
+        node.on('mousemove', (event) =>
+          handleMouseMove(event, {
+            cCRE: cre,
+            type: simple,
+          })
+        );
+      }
       idx++;
       node.on('mouseout', hideTooltip);
     });
 
     cy.edges().forEach((edge: EdgeSingular) => {
       edge.on('mousemove', (event) =>
-        handleMouseOver(event, {
+        handleMouseMove(event, {
           type:
             edge.style('line-color').toString() === 'rgb(0,0,0)'
               ? 'Lower-Expression'
@@ -267,6 +338,7 @@ const Graph: React.FC<GraphProps> = ({
       );
       edge.on('mouseout', hideTooltip);
     });
+    organize();
 
     return () => {
       cy.destroy();
@@ -281,6 +353,19 @@ const Graph: React.FC<GraphProps> = ({
     hideTooltip,
   ]);
 
+  useEffect(() => {
+    const allSIMPLE: string[] = elements.map((e) => e.simple);
+
+    if (!cyRef.current) return;
+    let ind = 0;
+    cyRef.current.nodes().forEach((node) => {
+      node.style({
+        label: showLabels ? shortHand(allSIMPLE[ind]) : '', // Update label based on `showLabels`
+      });
+      ind++;
+    });
+  }, [showLabels]);
+
   // RANDOMIZE
   const randomize = () => {
     const cy = cyRef.current;
@@ -318,39 +403,38 @@ const Graph: React.FC<GraphProps> = ({
     }));
   };
 
-  // organize on any toggle change
-  useEffect(() => {
-    if (cyRef.current) {
-      organize();
-    }
-  }, [toggles]);
-
   const downloadStyle = {
     ...buttonStyle,
-    top: '5px',
+    top: '0px',
     right: '5px',
   };
 
   const randomizeStyle = {
     ...buttonStyle,
-    top: '50px',
+    top: '45px',
     right: '5px',
   };
 
   const organizeStyle = {
     ...buttonStyle,
-    top: '95px',
+    top: '90px',
     right: '5px',
   };
 
   const toggleControlsStyle = {
     ...buttonStyle,
-    top: '5px',
+    top: '0px',
     padding: '3px',
     backgroundColor: 'white',
     color: '#0095ff',
   };
 
+  const labelStyle = {
+    ...buttonStyle,
+    top: '135px',
+    right: '5px',
+  };
+
   const r = {
     collapsed: {
       right: '175px',
@@ -359,6 +443,7 @@ const Graph: React.FC<GraphProps> = ({
       right: '2px',
     },
   };
+  console.log(showLabels);
 
   return (
     <div
@@ -371,6 +456,29 @@ const Graph: React.FC<GraphProps> = ({
         fontFamily: 'helvetica',
       }}
     >
+      <header
+        style={{
+          opacity: 0.5,
+          fontSize: '1em',
+          margin: 0,
+        }}
+      >
+        <h1 style={{ fontSize: '17px' }}>{title}</h1>
+      </header>
+      {data.centered ? (
+        <div style={{ top: '55px', left: '15px' }}>
+          <label htmlFor="degree">Degrees of Separation: </label>
+          <input
+            id="degree"
+            type="number"
+            value={degree}
+            min={1}
+            max={5}
+            onChange={(e) => setDegree(parseInt(e.target.value))}
+          />
+        </div>
+      ) : null}
+
       {showControls && (
         <div
           style={{
@@ -394,6 +502,11 @@ const Graph: React.FC<GraphProps> = ({
             styles={organizeStyle}
             func={organize}
           ></GraphButton>
+          <GraphButton
+            text="Toggle Labels"
+            styles={labelStyle}
+            func={() => setShowLabels(!showLabels)}
+          ></GraphButton>
 
           <Legend toggles={toggles} onToggle={handleToggle} />
           <ScaleLegend scales={scales} />
@@ -420,21 +533,12 @@ const Graph: React.FC<GraphProps> = ({
           position: 'relative',
         }}
       >
-        <header
-          style={{
-            opacity: 0.5,
-            fontSize: '1em',
-            margin: 0,
-          }}
-        >
-          <h1 style={{ fontSize: '14px' }}>{title}</h1>
-        </header>
         <div
           ref={containerRef}
           id={k}
           style={{
             width: '100%',
-            height: '95vh',
+            height: '90vh',
             zIndex: 999,
           }}
         ></div>
@@ -456,6 +560,7 @@ const Graph: React.FC<GraphProps> = ({
             <div style={{ fontFamily: 'helvetica' }}>
               cCRE: {tooltipData.cCRE} <br />
               Type: {tooltipData.type}
+              {tooltipData.centered ? <div> Centered Node </div> : null}
             </div>
           ) : (
             <div style={{ fontFamily: 'helvetica' }}>
diff --git a/src/components/Graph/GraphButton.tsx b/src/components/Graph/GraphButton.tsx
index 30de53b..60e9543 100644
--- a/src/components/Graph/GraphButton.tsx
+++ b/src/components/Graph/GraphButton.tsx
@@ -1,38 +1,25 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 
 interface buttonProps {
   text: string;
-  styles: any;
+  styles: CSSProperties;
   func: any;
 }
 
 const GraphButton: React.FC<buttonProps> = ({ text, styles, func }) => {
   const randID = Math.random() * 1000000;
   const r = randID + '';
-
-  function mouseover(): null | undefined | void {
-    const c = document.getElementById(r);
-    if (c === null) {
-      return null;
-    }
-    c.style.backgroundColor = '#07c';
-  }
-
-  function mouseout(): null | undefined | void {
-    const c = document.getElementById(r);
-    if (c === null) {
-      return null;
-    }
-    c.style.backgroundColor = '#0095ff';
-  }
-
   return (
     <>
       <button
         id={r}
         style={styles}
-        onMouseEnter={() => mouseover()}
-        onMouseLeave={() => mouseout()}
+        onMouseEnter={(event) =>
+          (event.currentTarget.style.backgroundColor = '#07c')
+        }
+        onMouseLeave={(event) =>
+          (event.currentTarget.style.backgroundColor = '#0095ff')
+        }
         onClick={func}
       >
         {text}
diff --git a/src/components/Graph/Legend.tsx b/src/components/Graph/Legend.tsx
index 66f6195..3e40add 100644
--- a/src/components/Graph/Legend.tsx
+++ b/src/components/Graph/Legend.tsx
@@ -1,7 +1,6 @@
 import React, { CSSProperties, useState } from 'react';
 import { cCREConstants } from './constants';
 import GraphButton from './GraphButton';
-// import '../styles/Legend.css';
 
 interface LegendProps {
   toggles: { [key: string]: boolean };
@@ -34,7 +33,7 @@ const Legend: React.FC<LegendProps> = ({ toggles, onToggle }) => {
 
   const divStyle: CSSProperties = {
     position: 'absolute',
-    bottom: '20px',
+    bottom: '10px',
     right: '3px',
     zIndex: 1000,
     backgroundColor: 'white',
@@ -64,7 +63,10 @@ const Legend: React.FC<LegendProps> = ({ toggles, onToggle }) => {
                 checked={toggles[key]}
                 onChange={() => onToggle(key)}
               />
-              <span style={{ color: value.color, marginLeft: '8px' }}>
+              <span
+                style={{ color: value.color, marginLeft: '8px' }}
+                onClick={() => onToggle(key)}
+              >
                 {key} ({value.label})
               </span>
             </div>
diff --git a/src/components/Graph/ScaleLegend.tsx b/src/components/Graph/ScaleLegend.tsx
index b44cbf2..f630e6c 100644
--- a/src/components/Graph/ScaleLegend.tsx
+++ b/src/components/Graph/ScaleLegend.tsx
@@ -40,7 +40,7 @@ const ScaleLegend: React.FC<ScaleProps> = ({ scales }) => {
 
   const divStyle: CSSProperties = {
     position: 'absolute',
-    top: '150px',
+    top: '200px',
     right: '10px',
     zIndex: 1000,
     backgroundColor: 'white',
diff --git a/src/components/Graph/types.ts b/src/components/Graph/types.ts
index e437e46..35ecc60 100644
--- a/src/components/Graph/types.ts
+++ b/src/components/Graph/types.ts
@@ -13,7 +13,7 @@ export interface Edge {
   
   export interface GraphProps {
     data: {
-      edge: Edge[], node: Node[] 
+      edge: Edge[], node: Node[], centered: {cCRE: string}
     },
     title?: string,
     id: number | string,
diff --git a/stories/Graph.stories.tsx b/stories/Graph.stories.tsx
index 4d4e7fe..c2f04dd 100644
--- a/stories/Graph.stories.tsx
+++ b/stories/Graph.stories.tsx
@@ -3,6 +3,7 @@ import { Meta, Story } from '@storybook/react';
 import { Graph } from '../src';
 import { GraphProps } from '../src';
 import data2 from '../example/data2.json';
+import data3 from '../example/data3.json';
 import data from '../example/data.json';
 import '../src/App.css';
 
@@ -15,11 +16,15 @@ export default meta;
 const Template: Story<GraphProps> = (args) => <Graph {...args} />;
 
 export const SampleGraph = Template.bind({});
-SampleGraph.args = { data: data2.data, title: 'Sample Graph', id: 1 };
-export const GraphWithPilotData = Template.bind({});
-GraphWithPilotData.args = {
+SampleGraph.args = {
+  data: data2.data,
+  title: 'Sample Graph With No Centered cCRE',
+  id: 1,
+};
+export const PilotDataWithCentered = Template.bind({});
+PilotDataWithCentered.args = {
   data: data.data,
-  title: 'cCRE Impact With Pilot Data',
+  title: 'cCRE Impact With Pilot Data With Centered cCRE',
   id: 'hello',
 };
 
@@ -31,3 +36,10 @@ FiftyPercent.args = {
   width: '50%',
   height: '50%',
 };
+
+export const PilotDataWithoutCentered = Template.bind({});
+PilotDataWithoutCentered.args = {
+  data: data3.data,
+  title: 'cCRE Impact With Pilot Data Without Centered cCRE',
+  id: 'hi',
+};