forked from pnnl/HyperNetX
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwidget.html
More file actions
184 lines (169 loc) · 10.8 KB
/
widget.html
File metadata and controls
184 lines (169 loc) · 10.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
<meta charset="utf-8" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hypernetx-Widget — HyperNetX 1.2.4 documentation</title>
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
<!--[if lt IE 9]>
<script src="_static/js/html5shiv.min.js"></script>
<![endif]-->
<script data-url_root="./" id="documentation_options" src="_static/documentation_options.js"></script>
<script src="_static/jquery.js"></script>
<script src="_static/underscore.js"></script>
<script src="_static/doctools.js"></script>
<script src="_static/copybutton.js"></script>
<script src="_static/js/theme.js"></script>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="next" title="Modularity and Clustering" href="modularity.html" />
<link rel="prev" title="NWHy" href="nwhy.html" />
</head>
<body class="wy-body-for-nav">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search" >
<a href="index.html" class="icon icon-home"> HyperNetX
<img src="_static/hnx_logo_smaller.png" class="logo" alt="Logo"/>
</a>
<div class="version">
1.2
</div>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu">
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="index.html">Home</a></li>
<li class="toctree-l1"><a class="reference internal" href="overview/index.html">Overview</a></li>
<li class="toctree-l1"><a class="reference internal" href="install.html">Installing HyperNetX</a></li>
<li class="toctree-l1"><a class="reference internal" href="glossary.html">Glossary</a></li>
<li class="toctree-l1"><a class="reference internal" href="core.html">HyperNetX Packages</a></li>
<li class="toctree-l1"><a class="reference internal" href="nwhy.html">NWHypergraph C++ Optimization</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">HyperNetX Visualization Widget</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#overview">Overview</a></li>
<li class="toctree-l2"><a class="reference internal" href="#installation">Installation</a></li>
<li class="toctree-l2"><a class="reference internal" href="#using-the-tool">Using the Tool</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#layout">Layout</a></li>
<li class="toctree-l3"><a class="reference internal" href="#selection">Selection</a></li>
<li class="toctree-l3"><a class="reference internal" href="#side-panel">Side Panel</a></li>
<li class="toctree-l3"><a class="reference internal" href="#other-features">Other Features</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="modularity.html">Algorithms: Modularity and Clustering</a></li>
<li class="toctree-l1"><a class="reference internal" href="publications.html">Publications</a></li>
<li class="toctree-l1"><a class="reference internal" href="license.html">License</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" >
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="index.html">HyperNetX</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="Page navigation">
<ul class="wy-breadcrumbs">
<li><a href="index.html" class="icon icon-home"></a> »</li>
<li>Hypernetx-Widget</li>
<li class="wy-breadcrumbs-aside">
<a href="_sources/widget.rst.txt" rel="nofollow"> View page source</a>
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<section id="hypernetx-widget">
<span id="widget"></span><h1>Hypernetx-Widget<a class="headerlink" href="#hypernetx-widget" title="Permalink to this headline"></a></h1>
<a class="reference internal image-reference" href="_images/WidgetScreenShot.png"><img alt="_images/WidgetScreenShot.png" class="align-right" src="_images/WidgetScreenShot.png" style="width: 300px;" /></a>
<section id="overview">
<h2>Overview<a class="headerlink" href="#overview" title="Permalink to this headline"></a></h2>
<p>The <a class="reference external" href="https://github.com/pnnl/hypernetx-widget">HyperNetXWidget</a> is an addon for HNX, which extends the built in visualization
capabilities of HNX to a JavaScript based interactive visualization. The tool has two main interfaces,
the hypergraph visualization and the nodes & edges panel.
You may <a class="reference external" href="https://pnnl.github.io/hypernetx-widget/">demo the widget here</a></p>
</section>
<section id="installation">
<h2>Installation<a class="headerlink" href="#installation" title="Permalink to this headline"></a></h2>
<p>The <a class="reference external" href="https://github.com/pnnl/hypernetx-widget">HypernetxWidget</a> is available on <a class="reference external" href="https://github.com">GitHub</a> and may be
installed using pip:</p>
<div class="doctest highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">>>> </span><span class="n">pip</span> <span class="n">install</span> <span class="n">hnxwidget</span>
</pre></div>
</div>
</section>
<section id="using-the-tool">
<h2>Using the Tool<a class="headerlink" href="#using-the-tool" title="Permalink to this headline"></a></h2>
<section id="layout">
<h3>Layout<a class="headerlink" href="#layout" title="Permalink to this headline"></a></h3>
<p>The hypergraph visualization is an Euler diagram that shows nodes as circles and hyper edges as outlines
containing the nodes/circles they contain. The visualization uses a force directed optimization to perform
the layout. This algorithm is not perfect and sometimes gives results that the user might want to improve upon.
The visualization allows the user to drag nodes and position them directly at any time. The algorithm will
re-position any nodes that are not specified by the user. Ctrl (Windows) or Command (Mac) clicking a node
will release a pinned node it to be re-positioned by the algorithm.</p>
</section>
<section id="selection">
<h3>Selection<a class="headerlink" href="#selection" title="Permalink to this headline"></a></h3>
<p>Nodes and edges can be selected by clicking them. Nodes and edges can be selected independently of each other,
i.e., it is possible to select an edge without selecting the nodes it contains. Multiple nodes and edges can
be selected, by holding down Shift while clicking. Shift clicking an already selected node will de-select it.
Clicking the background will de-select all nodes and edges. Dragging a selected node will drag all selected
nodes, keeping their relative placement.
Selected nodes can be hidden (having their appearance minimized) or removed completely from the visualization.
Hiding a node or edge will not cause a change in the layout, wheras removing a node or edge will.
The selection can also be expanded. Buttons in the toolbar allow for selecting all nodes contained within selected edges,
and selecting all edges containing any selected nodes.
The toolbar also contains buttons to select all nodes (or edges), un-select all nodes (or edges),
or reverse the selected nodes (or edges). An advanced user might:</p>
<ul class="simple">
<li><p><strong>Select all nodes not in an edge</strong> by: select an edge, select all nodes in that edge, then reverse the selected nodes to select every node not in that edge.</p></li>
<li><p><strong>Traverse the graph</strong> by: selecting a start node, then alternating select all edges containing selected nodes and selecting all nodes within selected edges</p></li>
<li><p><strong>Pin Everything</strong> by: hitting the button to select all nodes, then drag any node slightly to activate the pinning for all nodes.</p></li>
</ul>
</section>
<section id="side-panel">
<h3>Side Panel<a class="headerlink" href="#side-panel" title="Permalink to this headline"></a></h3>
<p>Details on nodes and edges are visible in the side panel. For both nodes and edges, a table shows the node name, degree (or size for edges), its selection state, removed state, and color. These properties can also be controlled directly from this panel. The color of nodes and edges can be set in bulk here as well, for example, coloring by degree.</p>
</section>
<section id="other-features">
<h3>Other Features<a class="headerlink" href="#other-features" title="Permalink to this headline"></a></h3>
<p>Nodes with identical edge membership can be collapsed into a super node, which can be helpful for larger hypergraphs. Dragging any node in a super node will drag the entire super node. This feature is available as a toggle in the nodes panel.</p>
<p>The hypergraph can also be visualized as a bipartite graph (similar to a traditional node-link diagram). Toggling this feature will preserve the locations of the nodes between the bipartite and the Euler diagrams.</p>
</section>
</section>
</section>
</div>
</div>
<footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
<a href="nwhy.html" class="btn btn-neutral float-left" title="NWHy" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
<a href="modularity.html" class="btn btn-neutral float-right" title="Modularity and Clustering" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
</div>
<hr/>
<div role="contentinfo">
<p>© Copyright 2021 Battelle Memorial Institute.</p>
</div>
Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
<a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script>
jQuery(function () {
SphinxRtdTheme.Navigation.enable(true);
});
</script>
</body>
</html>