forked from pnnl/HyperNetX
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwidget.html
295 lines (177 loc) · 11.6 KB
/
widget.html
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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hypernetx-Widget — HyperNetX 1.2.1 documentation</title>
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<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 type="text/javascript" id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
<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 type="text/javascript" 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="main navigation">
<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="top navigation">
<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="breadcrumbs 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">
<div class="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>
<div class="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>
</div>
<div class="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>
</div>
<div class="section" id="using-the-tool">
<h2>Using the Tool<a class="headerlink" href="#using-the-tool" title="Permalink to this headline">¶</a></h2>
<div class="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>
</div>
<div class="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>
</div>
<div class="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>
</div>
<div class="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>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<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>
<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>
</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 type="text/javascript">
jQuery(function () {
SphinxRtdTheme.Navigation.enable(true);
});
</script>
</body>
</html>