Stylings

components/visualize/NodeOverview/NodeOverview.module.css

@@ -1,11 +1,12 @@
 .root {
-    height: fit-content;
     width: fit-content;
+    min-width: 15ch;
+    height: fit-content;
 }
 
 .tiny {
-    font-size: 0.5em;
     margin-top: -1.6em;
+    font-size: 0.5em;
 }
 
 .small {

components/visualize/NodeOverview/NodeOverview.tsx

@@ -5,10 +5,11 @@ import styles from './NodeOverview.module.css'
 import Link from 'next/link'
 import { EntityIcon } from '../../home/EntityIcon/EntityIcon'
 import { GraphNode } from '../../../src/graph-untangle/types'
+import { fixedEncodeURIComponent } from '../../../src/utils'
+import { useRouter } from 'next/router'
 
 export type OverviewGraphNode = GraphNode<{
   icons: (EnrichedEntity | string)[]
-  linkOut: string
 }>
 
 interface Props extends HTMLProps<HTMLDivElement> {
@@ -16,11 +17,19 @@ interface Props extends HTMLProps<HTMLDivElement> {
 }
 
 export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
+  const router = useRouter()
   return (
     <div {...props} className={cx(className, styles.root)}>
       <h3>
         <span className={styles.linkOut}>
-          <Link href={node.linkOut}>🔗</Link>
+          <Link
+            href={{
+              pathname: `/visualize/${fixedEncodeURIComponent(node.name)}`,
+              query: router.query
+            }}
+          >
+            👁
+          </Link>
         </span>
         {node.name}
       </h3>