graph style fixes

weng-lab · Jul 30, 2024 · 04133ab · 04133ab
1 parent ee6f914
commit 04133ab
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 8 deletions.
diff --git a/src/components/Graph/ControlPanel.tsx b/src/components/Graph/ControlPanel.tsx
@@ -109,6 +109,7 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
               justifyContent: 'center',
               alignItems: 'center',
               display: 'inline-block',
+              fontFamily: 'Roboto',
             }}
           >
             Controls

diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
@@ -57,6 +57,7 @@ const Graph: React.FC<GraphProps> = ({
   legendNodeLabel,
   legendEdgeLabel,
   order,
+  fontFamily = 'Roboto',
 }) => {
   const cyRef = useRef<Core | null>(null);
 
@@ -280,7 +281,7 @@ const Graph: React.FC<GraphProps> = ({
               fontSize: '12px',
               borderWidth: '2px',
               borderColor: 'black',
-              fontFamily: 'Roboto',
+              fontFamily: fontFamily,
               backgroundFit: 'contain',
               backgroundClip: 'none',
               backgroundImage: `url(${starSVGURL})`,
@@ -303,7 +304,7 @@ const Graph: React.FC<GraphProps> = ({
                   : elements[i].id
                 : '',
               fontSize: '12px',
-              fontFamily: 'Roboto',
+              fontFamily: fontFamily,
             },
           });
         }
@@ -359,7 +360,7 @@ const Graph: React.FC<GraphProps> = ({
       }
 
       content.style.fontSize = '12px';
-      content.style.fontFamily = 'Roboto';
+      content.style.fontFamily = fontFamily;
       const tip = popperFactory(ref, content, {});
       node.on('mouseover', () => tip.show());
       node.on('mouseout', () => tip.hide());
@@ -394,7 +395,7 @@ const Graph: React.FC<GraphProps> = ({
       }
 
       content.style.fontSize = '12px';
-      content.style.fontFamily = 'Roboto';
+      content.style.fontFamily = fontFamily;
       const tip = popperFactory(ref, content, {});
       edge.on('mouseover', () => tip.show());
       edge.on('mouseout', () => tip.hide());
@@ -474,6 +475,7 @@ const Graph: React.FC<GraphProps> = ({
           marginLeft: '3px',
           fontSize: '18px',
           fontWeight: 'bold',
+          fontFamily: fontFamily,
         }}
       >
         {title}

diff --git a/src/components/Graph/Legend.tsx b/src/components/Graph/Legend.tsx
@@ -61,7 +61,9 @@ const Legend: React.FC<LegendProps> = ({
         padding: '5px',
       }}
     >
-      <Typography style={{ fontSize: '18px', margin: '3px' }}>
+      <Typography
+        style={{ fontSize: '18px', margin: '3px', fontFamily: 'Roboto' }}
+      >
         {legendNodeLabel ? legendNodeLabel : 'Node Type'}
       </Typography>
       {uniqueCat
@@ -106,6 +108,7 @@ const Legend: React.FC<LegendProps> = ({
                     marginLeft: '4px',
                     cursor: 'pointer',
                     fontSize: '14px',
+                    fontFamily: 'Roboto',
                   }}
                   onClick={() => onToggle(category)}
                 >
@@ -154,6 +157,7 @@ const Legend: React.FC<LegendProps> = ({
                     marginLeft: '4px',
                     cursor: 'pointer',
                     fontSize: '14px',
+                    fontFamily: 'Roboto',
                   }}
                   onClick={() => onToggle(category)}
                 >
@@ -167,7 +171,9 @@ const Legend: React.FC<LegendProps> = ({
 
       {edgeType && edgeTypes !== null ? (
         <div>
-          <Typography style={{ fontSize: '18px', margin: '3px' }}>
+          <Typography
+            style={{ fontSize: '18px', margin: '3px', fontFamily: 'Roboto' }}
+          >
             {legendEdgeLabel ? legendEdgeLabel : 'Edge Type'}
           </Typography>
           {edgeTypes.map((category) => {
@@ -208,6 +214,7 @@ const Legend: React.FC<LegendProps> = ({
                     marginLeft: '4px',
                     cursor: 'pointer',
                     fontSize: '14px',
+                    fontFamily: 'Roboto',
                   }}
                   onClick={() => onToggle(category)}
                 >

diff --git a/src/components/Graph/ScaleLegend.tsx b/src/components/Graph/ScaleLegend.tsx
@@ -49,7 +49,7 @@ const ScaleLegend: React.FC<ScaleProps> = ({ scales, width }) => {
           style={{
             margin: '3px 0',
             fontSize: '16px',
-            fontWeight: 'bold',
+            fontFamily: 'Roboto',
           }}
         >
           Edge Weight Scale:
@@ -60,7 +60,7 @@ const ScaleLegend: React.FC<ScaleProps> = ({ scales, width }) => {
           style={{
             margin: '3px 0',
             fontSize: '14px',
-            fontWeight: 'bold',
+            fontFamily: 'Roboto',
           }}
         >
           {scaleFormula}
@@ -88,6 +88,7 @@ const ScaleLegend: React.FC<ScaleProps> = ({ scales, width }) => {
               style={{
                 marginLeft: '10px',
                 fontSize: '14px',
+                fontFamily: 'Roboto',
               }}
             >
               {min.toFixed(2)}
@@ -107,6 +108,7 @@ const ScaleLegend: React.FC<ScaleProps> = ({ scales, width }) => {
               style={{
                 marginLeft: '10px',
                 fontSize: '14px',
+                fontFamily: 'Roboto',
               }}
             >
               {mid1.toFixed(2)}
@@ -126,6 +128,7 @@ const ScaleLegend: React.FC<ScaleProps> = ({ scales, width }) => {
               style={{
                 marginLeft: '10px',
                 fontSize: '14px',
+                fontFamily: 'Roboto',
               }}
             >
               {mid2.toFixed(2)}
@@ -145,6 +148,7 @@ const ScaleLegend: React.FC<ScaleProps> = ({ scales, width }) => {
               style={{
                 marginLeft: '10px',
                 fontSize: '14px',
+                fontFamily: 'Roboto',
               }}
             >
               {max.toFixed(2)}

diff --git a/src/components/Graph/types.ts b/src/components/Graph/types.ts
@@ -30,6 +30,7 @@ export interface Edge {
     legendNodeLabel?: string, 
     legendEdgeLabel?: string,
     order?: string[],
+    fontFamily?: string,
   }
 
 

diff --git a/stories/Graph.stories.tsx b/stories/Graph.stories.tsx
@@ -161,6 +161,7 @@ PilotDataWithCentered.args = {
     'TF',
     'Low DNase',
   ],
+  fontFamily: 'Times New Roman',
 };
 
 export const FiftyPercent = Template.bind({});