diff --git a/src/display/components/nodefilter/classlabel.css b/src/display/components/nodefilter/classlabel.css index 8d4ff55046ec6d5780eb14f5e61e1954dca520f7..17d3d0052a0c815af33573f0df35576f1677e1b4 100644 --- a/src/display/components/nodefilter/classlabel.css +++ b/src/display/components/nodefilter/classlabel.css @@ -1,12 +1,12 @@ .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; diff --git a/src/display/components/nodefilter/filtermenu.css b/src/display/components/nodefilter/filtermenu.css index 015e6b42667268c13446b06d6ea683b9bb5cdeef..4823e2be35e6fb4ede5ad801c21debcc156e83a0 100644 --- a/src/display/components/nodefilter/filtermenu.css +++ b/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; diff --git a/src/display/components/nodefilter/filtermenu.tsx b/src/display/components/nodefilter/filtermenu.tsx index bbd2549ece13345606501953690b8f93352640e7..80655432c9ac8fe02789d4d3427ab1268aba09f2 100644 --- a/src/display/components/nodefilter/filtermenu.tsx +++ b/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)} /> diff --git a/src/display/display.tsx b/src/display/display.tsx index d802622f55a19be913e5133fc7046550c2778fa4..d5bd1fda6dc4ef6bea0317b2dac55f9f0070a5e1 100644 --- a/src/display/display.tsx +++ b/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} /> )} diff --git a/src/display/graph.ts b/src/display/graph.ts index 934305da9149ab29319932a1e5ed551a6303a2f0..262a47e69b2c8f5e67e94e33d5e8a2bf0f078340 100644 --- a/src/display/graph.ts +++ b/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,