Fixed node filtering and design. Nodes may still change color during filter...

Fixed node filtering and design. Nodes may still change color during filter operations. This should be resolved when colors are hard-mapped to node types.

src/display/components/nodefilter/classlabel.css

 .filter-class-label {
     display: inline-block;
-    padding-right: 5px;
+    padding-right: 10px;
     color: #fff;
     font-size: 13px;
     line-height: 20px;
     font-family: CuratorRegular, Helvetica Neue, Helvetica, Arial, sans-serif;
     text-transform: uppercase;
-    margin-bottom: 6px;
+    margin-bottom: 8px;
     height: 17px;
     z-index: 100;
     cursor: pointer;

src/display/components/nodefilter/filtermenu.css

@@ -3,7 +3,7 @@
     bottom: 0;
     pointer-events: none;
     width: 350px;
-    max-width: 400px;
+    height: 105px;
     padding: 10px;
     left: 0;
     display: block;

src/display/components/nodefilter/filtermenu.tsx

@@ -32,14 +32,17 @@ function FilterMenu({ classes, onVisibilityChange }: FilterMenuProps) {
         }
     };
 
+    const labelWidth = 10 * chars;
+    const width = Math.ceil(classList.length / 3) * (labelWidth + 20);
+
     return (
-        <div className={"filter-menu"}>
+        <div className={"filter-menu"} style={{ width }}>
             {classList.map((cls: string, idx) => (
                 <ClassLabel
                     key={cls}
                     type={cls}
                     color={classes.get(cls)}
-                    width={10 * chars}
+                    width={labelWidth}
                     visible={visibility[idx]}
                     onClick={() => handleClick(idx)}
                 />

src/display/display.tsx

@@ -131,7 +131,7 @@ class Display extends React.Component<
 
                 {this.state.graph && (
                     <FilterMenu
-                        classes={this.state.graph.nodeColors}
+                        classes={this.graph.nodeColors}
                         onVisibilityChange={this.handleNodeFilter}
                     />
                 )}

src/display/graph.ts

@@ -58,6 +58,7 @@ export default class Graph {
 
         this.resetNodeData();
         this.updateNodeData();
+        this.removeFloatingNodes();
         this.mapNodeColors();
         this.mapLinkColors();
     }
@@ -69,6 +70,10 @@ export default class Graph {
         }
     }
 
+    private removeFloatingNodes() {
+        this.nodes = this.nodes.filter((node) => node.neighbors.length > 0);
+    }
+
     /**
      * Updates the graph data structure to contain additional values.
      * Creates a 'neighbors' and 'links' array for each node object.
@@ -137,6 +142,10 @@ export default class Graph {
         nodeTypes: Map<string, boolean>,
         linkTypes?: Map<string, boolean>
     ): Graph {
+        // Filter nodes depending on type
+        const nodes = this.nodes.filter((l) => nodeTypes.get(l.type));
+
+        // Filter links depending on type
         let links;
         if (linkTypes === undefined) {
             links = this.links;
@@ -144,8 +153,13 @@ export default class Graph {
             links = this.links.filter((l) => linkTypes.get(l.type));
         }
 
+        // Filter links which are connected to an invisible node
+        links = links.filter(
+            (l) => nodeTypes.get(l.source.type) && nodeTypes.get(l.target.type)
+        );
+
         return new Graph(
-            this.nodes.filter((l) => nodeTypes.get(l.type)),
+            nodes,
             links.map((link) => {
                 return {
                     source: link.source.id,