make node smaller

complexdatacollective · Dec 18, 2024 · 26335ad · 26335ad
1 parent edbf769
commit 26335ad
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/lib/interviewer/components/Node.js b/lib/interviewer/components/Node.js
@@ -1,14 +1,12 @@
 import { useSelector } from 'react-redux';
+import { getEntityAttributes } from '~/lib/interviewer/ducks/modules/network';
 import UINode from '~/lib/ui/components/Node';
-import {
-  getNodeColor, labelLogic,
-} from '../selectors/network';
+import { getNodeColor, labelLogic } from '../selectors/network';
 import { getProtocolCodebook } from '../selectors/protocol';
-import { getEntityAttributes } from '~/lib/interviewer/ducks/modules/network';
 
 /**
-  * Renders a Node.
-  */
+ * Renders a Node.
+ */
 
 const Node = (props) => {
   const { type } = props;

diff --git a/lib/interviewer/containers/Interfaces/Geospatial.tsx b/lib/interviewer/containers/Interfaces/Geospatial.tsx
@@ -231,7 +231,10 @@ export default function GeospatialInterface({
               animate="animate"
               exit="exit"
             >
-              <Node {...stageNodes[navState.activeIndex]} />
+              <Node
+                {...stageNodes[navState.activeIndex]}
+                style={{ fontSize: `calc(var(--nc-base-font-size) * 8)` }}
+              />
             </motion.div>
           </AnimatePresence>
           <Button size="small" onClick={moveForward}>

diff --git a/lib/ui/components/Node.js b/lib/ui/components/Node.js
@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { Component } from 'react';
 
 /**
  * Renders a Node.
@@ -15,6 +15,7 @@ class Node extends Component {
       selected = false,
       selectedColor = '',
       linking = false,
+      style,
       handleClick,
     } = this.props;
 
@@ -37,7 +38,7 @@ class Node extends Component {
       label.length < 22 ? label : `${label.substring(0, 18)}\u{AD}...`; // Add ellipsis for really long labels
 
     return (
-      <div className={classes} onClick={() => handleClick?.()}>
+      <div className={classes} onClick={() => handleClick?.()} style={style}>
         <svg
           viewBox="0 0 500 500"
           xmlns="http://www.w3.org/2000/svg"