fix: less clunky expand/collapse ui

css/GraphPane.scss

@@ -1,24 +1,5 @@
 #pane-graph {
   .collapsed {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: inline-block;
-    cursor: pointer;
-    padding: 0.2em 0.5em;
-    background-color: firebrick;
-    color: var(--bg0);
-    border-radius: var(--rad_lg);
-
-    &::before {
-      color: transparent;
-      content: '\2715';
-      display: inline-block;
-      margin-right: 0.5em;
-    }
-
-    &:hover::before {
-      color: var(--bg0);
-    }
+    opacity: 50%;
   }
 }

js/GraphPane.js

@@ -93,7 +93,7 @@ export default function GraphPane({ graph, ...props }) {
   const compareEntryKey = ([a], [b]) => a < b ? -1 : a > b ? 1 : 0;
   const compareEntryValue = ([, a], [, b]) => a < b ? -1 : a > b ? 1 : 0;
   const [colorize, setColorize] = useColorize();
-  const [excludes, setExcludes] = useExcludes();
+  const [excludes] = useExcludes();
 
   const occurances = {};
   const maintainers = {};
@@ -119,10 +119,6 @@ export default function GraphPane({ graph, ...props }) {
     .sort(compareEntryValue)
     .reverse();
 
-  function unexclude(name) {
-    setExcludes(excludes.filter(n => n != name));
-  }
-
   return <Pane {...props}>
     Include:
     <DepInclude type='dependencies' />
@@ -157,22 +153,20 @@ export default function GraphPane({ graph, ...props }) {
       </div> : null
     }
 
-    <strong>Collapsed modules</strong>:
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridGap: '.5em' }}>
-    {
-      excludes.map(name => <span key={name} className='collapsed bright-hover' onClick={() => unexclude(name)}>{name}</span>)
-    }
-    </div>
-    <div style={{ fontSize: '90%', color: 'var(--text-dim)' }}>(shift-click modules in graph to toggle)</div>
-
     <Section title={simplur`${graph.size} Module[|s]`}>
       <Tags>
         {
           Object.entries(occurances)
             .sort(compareEntryKey)
-            .map(([name, count]) => <Tag key={name + count} name={name} type='module' count={count} />)
+            .map(([name, count]) => <Tag key={name + count} name={name} type='module' count={count}
+          className={excludes.includes(name) ? 'collapsed' : null}
+          />)
         }
       </Tags>
+
+      <div style={{ fontSize: '90%', color: 'var(--text-dim)', marginTop: '1em' }}>
+        (Shift-click modules in graph to expand/collapse)
+      </div>
     </Section>
 
     <Section title={simplur`${Object.entries(maintainers).length} Maintainer[|s]`}>

js/Inspector.js

@@ -51,7 +51,7 @@ export function Tags({ children, style, ...props }) {
   </div>;
 }
 
-export function Tag({ type, name, title = name, count = 0, gravatar, ...props }) {
+export function Tag({ type, name, title = name, count = 0, gravatar, className, ...props }) {
   if (count > 1) title += ` (${count})`;
 
   let img = null;
@@ -60,7 +60,7 @@ export function Tag({ type, name, title = name, count = 0, gravatar, ...props })
     img = <img src={`https://www.gravatar.com/avatar/${hash}?s=32`} />;
   }
 
-  return <div className={`tag ${type} bright-hover`} title={title}
+  return <div className={`tag ${type} bright-hover ${className ?? ''}`} title={title}
     onClick={() => selectTag(tagify(type, name), true, true)}>{img}{title}</div>;
 }