Skip to content

Commit b14b4ed

Browse files
authored
Merge pull request #57 from daveseah/iu-tweak
Iu tweak: Add Vocabulary and Misc Language Adjustments
2 parents 6a828d6 + 9b5d931 commit b14b4ed

File tree

8 files changed

+286
-48
lines changed

8 files changed

+286
-48
lines changed
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>SimpleHTML</title>
5+
<script src="/scripts/netc-lib.js"></script>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
7+
<script src="/scripts/netc-app.js"></script>
8+
<link rel="stylesheet" href="/styles/netc-app.css" type="text/css">
9+
10+
</head>
11+
<style>
12+
body {
13+
padding: 10px;
14+
}
15+
</style>
16+
<body>
17+
<h2>Basic Network Analysis Vocabulary</h2>
18+
19+
<dl>
20+
<dt>Network</dt>
21+
<dd>This is a collection of nodes and the edges between them. </dd>
22+
23+
<dt>Graph</dt>
24+
<dd>a graphic representation of a network and its components. <em><strong>Similar terms include:</strong> sociogram, visualization</em></dd>
25+
26+
<dt>Node</dt>
27+
<dd>The thing or <em>entity</em> (shown as circles) that is connected through relationships. This could be individual people, groups of people, institutions (like churches, organizations, schools). One way of thinking about this is that nodes are nouns and edges are verbs - nodes are things that are connected through edges. <em><strong>Similar terms include:</strong> actor, vertex</em></dd>
28+
<ul>
29+
<dl>
30+
<dt>Ego</dt>
31+
<dd>This refers to the node you are focused on at the moment and the connections that they have. </dd>
32+
</dl>
33+
</ul>
34+
35+
<dt>Edge</dt>
36+
<dd>The relationships between nodes you are considering (shown as lines). Relationships can take on many forms: nodes could be connected through somewhat intangible relationships, such as friendship or not liking one another. Edges can be based on interactions, such as talking to one another or being in conflict. They could also be defined by sharing resources, such as money or information. <em><strong>Similar terms include:</strong> line, tie, arc</em></dd>
37+
38+
<ul><dl>
39+
<dt>Edge weight</dt>
40+
<dd>Edges can have a value attached to them. So, for instance, an node could sent $10,000 to another actor. Or, they could share three interactions of the same type with one another. This value is referred to as a weight. <em><strong>Similar terms include:</strong> value</em></dd>
41+
42+
<dt>Directed or undirected edges</dt>
43+
<dd>Edges can either be directed or undirected. If a relationship is directed, it is being sent from (originating from) one node to another node. Node A may say they are friends with Node B, but Node B does not say Node A does this. Or Node A gives Node B something, such as resources, information, or an illness. However, in some cases, edges are defined as undirected. Two people who share a meal together or are married are both engaged share an undirected edge. <em>Note: in some academic literatures, the term "edge" is reserved for an undirected relationship, while the term "arc" is used to refer to directed ties.</em></dd>
44+
</dl></ul>
45+
46+
<dt>Attributes</dt>
47+
<dd>Characteristics of the nodes or edges. A node could be designated by gender, for instance or the amount of wealth they possess. They could also be characteristics you find from the network itself - such as how many ties an node has (degree centrality). </dd>
48+
49+
<dt>Centrality</dt>
50+
<dd>This is a way of ranking the importance of individuals within a network. There are many different ways to measure importance, such as degree centrality, betweenness centrality, and eigenvector centrality. </dd>
51+
<ul> <dl>
52+
53+
<dt>Degree Centrality</dt>
54+
<dd>Degree centrality is a measure of how many connections a node has. An node with many ties that are being sent to them has a high in-degree centrality. In a friendship network, this can be easily recognized as popularity. Nodes sending many outgoing ties (high out-degree centrality) may be thought of as expansive in their relationship.</dd>
55+
56+
<dt>Betweenness Centrality</dt>
57+
<dd>Nodes with high betweenness centrality serve as connectors between other individuals who wouldn't otherwise be directly connected. They may not be connected to a large number of people (that would be high degree centrality), but they are unique in their connections. If an actor with high betweenness centrality was removed from a network, the network would be more fragmented and less connected. Often researchers are interested in finding actors with high betweenness centrality because they can control whatever flows in the networks. For instance, military analysts often look for nodes with high betweenness in a terrorist network.</dd>
58+
59+
<dt>Eigenvector Centrality</dt>
60+
<dd>Eigenvector centrality ranks actors based on their connection to other highly central nodes. So, a nodes importance as measured by eigenvector centrality are dependent on the other nodes with whom they share connections. Google's PageRank algorithm was a famous application of a version of this type of centrality, and allowed them to return highly relevant results in search for users.</dd>
61+
</dl></ul>
62+
63+
<dt>Communities</dt>
64+
<dd>A community in a network is a way of thinking about grouping, often by finding densely connected sets of nodes. A community within a network that is tightly connected to one another but not to an outside group might be seen as a faction, such as rival political groups. In this case, nodes with high betweenness centrality in a network with multiple factions might be some of the only points of contact between rival groups - a potentially powerful but also difficult position to be in.</dd>
65+
</dl>
66+
</body>
67+
<script>
68+
require("babel-polyfill"); // enables regenerators for async/await
69+
console.log('*** SCRIPT IN IFRAME ***');
70+
// NOTE: because this simple file runs inside of an IFRAME,
71+
// the javascript environment is SEPARATE from the one that loaded
72+
// this page. Thus, most UNISYS NET services aren't available because
73+
// they rely on the global 'EJSprops' set in index.ejs
74+
const STORE = require('system/datastore');
75+
const UNISYS = require('unisys/client');
76+
const $ = require('jquery');
77+
//$('body').append('<p>JQUERY ADDED THIS. Now D3 will turn me orange.</p>');
78+
// d3 is loaded
79+
//d3.select("body").style("background-color", "orange");
80+
</script>
81+
</html>

build/app/init-appshell.jsx

Lines changed: 43 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
const UNISYS = require('unisys/client');
3333

3434

35+
3536
/** (1) ROUTED COMPONENTS ****************************************************\
3637
Used by render()'s <Switch> to load a React component (what we call a
3738
'view' in the NetCreate app). The component should return its elements
@@ -85,13 +86,20 @@
8586
path: '/simple',
8687
component: (props) => {return HTML(props)}
8788
},
89+
{
90+
path: '/vocabulary',
91+
component: (props) => {return HTML(props)}
92+
},
8893
{
8994
path: '*',
9095
restricted: false,
9196
component: NoMatch
9297
}
9398
];
9499

100+
// Joshua added to disable Extras
101+
const isLocalHost = (SETTINGS.EJSProp('client').ip === '127.0.0.1');
102+
95103

96104
/** (2) ROUTED FUNCTIONS *****************************************************\
97105
Used by render()'s <Switch> to load a plain html page that is
@@ -178,38 +186,41 @@ class AppShell extends UNISYS.Component {
178186
<Navbar fixed="top" light expand="md" style={{ backgroundColor:'#f0f0f0', padding:'8px 10px'}}>
179187
<NavbarBrand href="#" style={{padding:'0'}}><img src='images/netcreate-logo.svg' height='36px'/></NavbarBrand>
180188
<NavbarToggler onClick={this.toggle} />
181-
<Collapse isOpen={this.state.isOpen} navbar>
182-
{/*/ (1) add navigation links here /*/}
183-
<Nav className="ml-auto" navbar>
184-
{ /* extra menu items
185-
<NavItem>
186-
<NavLink to="/d3forcedemo" tag={RRNavLink} replace>D3 ForceDemo</NavLink>
187-
</NavItem>
188-
*/ }
189-
<UncontrolledDropdown direction="right" nav>
190-
<DropdownToggle>
191-
Extras
192-
</DropdownToggle>
193-
<DropdownMenu>
194-
<DropdownItem>
195-
<NavLink to="/dev-react" tag={RRNavLink} replace>dev-react</NavLink>
196-
</DropdownItem>
197-
<DropdownItem>
198-
<NavLink to="/dev-unisys" tag={RRNavLink} replace>dev-unisys</NavLink>
199-
</DropdownItem>
200-
<DropdownItem>
201-
<NavLink to="/dev-db" tag={RRNavLink} replace>dev-db</NavLink>
202-
</DropdownItem>
203-
<DropdownItem>
204-
<NavLink to="/dev-session" tag={RRNavLink} replace>dev-session</NavLink>
205-
</DropdownItem>
206-
<DropdownItem>
207-
<NavLink to="/simple" tag={RRNavLink} replace>SimpleHTML Example</NavLink>
208-
</DropdownItem>
209-
</DropdownMenu>
210-
</UncontrolledDropdown>
211-
</Nav>
212-
</Collapse>
189+
<Collapse isOpen={this.state.isOpen} navbar>
190+
{/*/ (1) add navigation links here /*/}
191+
<Nav className="ml-auto" navbar hidden={!isLocalHost}>
192+
{ /* extra menu items
193+
<NavItem>
194+
<NavLink to="/d3forcedemo" tag={RRNavLink} replace>D3 ForceDemo</NavLink>
195+
</NavItem>
196+
*/ }
197+
<UncontrolledDropdown direction="right" nav>
198+
<DropdownToggle>
199+
Extras
200+
</DropdownToggle>
201+
<DropdownMenu>
202+
<DropdownItem>
203+
<NavLink to="/dev-react" tag={RRNavLink} replace>dev-react</NavLink>
204+
</DropdownItem>
205+
<DropdownItem>
206+
<NavLink to="/dev-unisys" tag={RRNavLink} replace>dev-unisys</NavLink>
207+
</DropdownItem>
208+
<DropdownItem>
209+
<NavLink to="/dev-db" tag={RRNavLink} replace>dev-db</NavLink>
210+
</DropdownItem>
211+
<DropdownItem>
212+
<NavLink to="/dev-session" tag={RRNavLink} replace>dev-session</NavLink>
213+
</DropdownItem>
214+
<DropdownItem>
215+
<NavLink to="/simple" tag={RRNavLink} replace>SimpleHTML Example</NavLink>
216+
</DropdownItem>
217+
<DropdownItem>
218+
<NavLink to="/vocabulary" tag={RRNavLink} replace>Network Vocabulary</NavLink>
219+
</DropdownItem>
220+
</DropdownMenu>
221+
</UncontrolledDropdown>
222+
</Nav>
223+
</Collapse>
213224
</Navbar>
214225
<div style={{height:'3.5em'}}>{/*/ add space underneath the fixed navbar /*/}</div>
215226
<Switch>

build/app/view/netcreate/components/EdgeEditor.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -314,11 +314,11 @@ class EdgeEditor extends UNISYS.Component {
314314
/*/ populate formdata from D3DATA
315315
/*/ loadSourceAndTarget () {
316316
if (DBG) console.log('EdgeEditor.loadSourceAndTarget!')
317-
317+
318318
let edgeID = this.props.edgeID || '';
319319
// Clean Data
320320
if (isNaN(edgeID)) { edgeID = parseInt(edgeID); }
321-
321+
322322
let D3DATA = this.AppState('D3DATA');
323323

324324
// parseInt in case of old bad string id
@@ -682,7 +682,7 @@ class EdgeEditor extends UNISYS.Component {
682682
/*/ render () {
683683
const { edgeID, parentNodeLabel } = this.props;
684684
const { formData, sourceNode, targetNode, edgePrompts } = this.state;
685-
const me = <span style={{color:"rgba(0,0,0,0.2)",fontStyle:"italic"}}>this</span>;
685+
const me = <span style={{color:"rgba(0,0,0,0.2)",fontStyle:"italic"}}>this node</span>;
686686
return (
687687
<div>
688688

build/app/view/netcreate/components/Help.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,14 @@ class Help extends UNISYS.Component {
6363
>{this.state.isExpanded ? "Hide Help" : "Help"}</Button>
6464
<div hidden={!this.state.isExpanded}
6565
style={{backgroundColor:'rgba(240,240,240,0.95)',padding:'10px'}}>
66+
<h1>Why Net.Create</h1>
67+
<p>In Net.Create, users can simultaneously do data entry on nodes and the edges between them.</p>
6668
<h1>Navigation</h1>
6769
<ul>
70+
<li>Recenter the graph -- press the * button</li>
6871
<li>Zoom --
6972
<ul>
73+
<li>on screen -- use the +/- buttons</li>
7074
<li>mouse -- use mousewheel</li>
7175
<li>trackpad -- two fingers up/down</li>
7276
<li>tablet -- two fingers pinch</li>
@@ -90,6 +94,9 @@ class Help extends UNISYS.Component {
9094
of all the edges. Click on a column header to sort the table by
9195
that parameter.</li>
9296
</ul>
97+
<h1>About Net.Create</h1>
98+
<p>Net.Create is funded through the <a href="https://www.nsf.gov/pubs/policydocs/pappguide/nsf09_1/gpg_2.jsp#IID2" target="NSF">EAGER program</a> at <a href="https://www.nsf.gov/" target="NSF">NSF</a> under award #<a href="https://www.nsf.gov/awardsearch/showAward?AWD_ID=1848655" target="NSF">1848655</a>. <a href="http://www.kalanicraig.com" target="Craig">Kalani Craig</a> is the PI, with Co-PIs <a href="http://www.joshuadanish.com" target="Danish">Joshua Danish</a> and <a href="https://education.indiana.edu/about/directory/profiles/hmelo-silver-cindy.html" target="Hmelo-Silver">Cindy Hmelo-Silver</a>. Software development provided by <a href="http://inquirium.net" target="Inquirium">Inquirium</a>. For more information, see <a href="http://netcreate.org" target="NetCreateOrg">Net.Create.org</a></p>
99+
93100
</div>
94101
</div>
95102
);

build/app/view/netcreate/components/InfoPanel.jsx

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* Nodes Table
88
* Edges Table
99
* Help
10-
10+
1111
The panel itself can be resized vertically.
1212
1313
@@ -28,6 +28,7 @@ const { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Button } = ReactSt
2828
const classnames = require('classnames');
2929

3030
const Help = require('./Help');
31+
const Vocabulary = require('./Vocabulary');
3132
const NodeTable = require('./NodeTable');
3233
const EdgeTable = require('./EdgeTable');
3334

@@ -68,7 +69,7 @@ class InfoPanel extends UNISYS.Component {
6869
window.event.stopPropagation();
6970
if (this.state.activeTab !== tab) {
7071
this.setState({ activeTab: tab });
71-
if ((tab === `1`) || (tab === '4')) {
72+
if ((tab === `1`) || (tab === '5')) {
7273
this.setState({
7374
tabpanelHeight: '50px', // show only tab buttons
7475
hideDragger: true
@@ -168,6 +169,14 @@ class InfoPanel extends UNISYS.Component {
168169
<NavLink
169170
className={classnames({ active: this.state.activeTab === '4' })}
170171
onClick={() => { this.toggle('4'); }}
172+
>
173+
Vocabulary
174+
</NavLink>
175+
</NavItem>
176+
<NavItem>
177+
<NavLink
178+
className={classnames({ active: this.state.activeTab === '5' })}
179+
onClick={() => { this.toggle('5'); }}
171180
>
172181
Help
173182
</NavLink>
@@ -191,6 +200,13 @@ class InfoPanel extends UNISYS.Component {
191200
</Row>
192201
</TabPane>
193202
<TabPane tabId="4">
203+
<Row>
204+
<Col sm="12">
205+
<Vocabulary tableHeight={tableHeight} />
206+
</Col>
207+
</Row>
208+
</TabPane>
209+
<TabPane tabId="5">
194210
<Row>
195211
<Col sm="12">
196212
<Help />

build/app/view/netcreate/components/NodeTable.jsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -233,12 +233,12 @@ countEdges() {
233233
let styles = `thead, tbody { display: block; }
234234
thead { position: relative; }
235235
tbody { overflow: auto; }
236-
.nodetable td:nth-child(1), .nodetable th:nth-child(1) {width: 2em; min-width: 2em;}
237-
.nodetable td:nth-child(2), .nodetable th:nth-child(2) {width: 2em; min-width: 2em;}
238-
.nodetable td:nth-child(3), .nodetable th:nth-child(3) {width: 4em; min-width: 4em;}
239-
.nodetable td:nth-child(4), .nodetable th:nth-child(4) {width: 12em; min-width: 12em;}
236+
.nodetable td:nth-child(1), .nodetable th:nth-child(1) {width: 4em; min-width: 4em;}
237+
.nodetable td:nth-child(2), .nodetable th:nth-child(2) {width: 5em; min-width: 5em;}
238+
.nodetable td:nth-child(3), .nodetable th:nth-child(3) {width: 10em; min-width: 10em;}
239+
.nodetable td:nth-child(4), .nodetable th:nth-child(4) {width: 4em; min-width: 4em;}
240240
.nodetable td:nth-child(5), .nodetable th:nth-child(5) {width: 4em; min-width: 4em;}
241-
.nodetable td:nth-child(6), .nodetable th:nth-child(6) {min-width: 2em; }`
241+
.nodetable td:nth-child(6), .nodetable th:nth-child(6) {width: 25em; min-width: 25em;}`
242242
return (
243243
<div style={{backgroundColor:'#eafcff'}}>
244244
<style>{styles}</style>
@@ -251,10 +251,6 @@ countEdges() {
251251
>
252252
<thead>
253253
<tr>
254-
<th><Button size="sm"
255-
disabled={this.state.sortkey==="id"}
256-
onClick={()=>this.setSortKey("id")}
257-
>ID</Button></th>
258254
<th></th>
259255
<th><Button size="sm"
260256
disabled={this.state.sortkey === "edgeCount"}
@@ -284,7 +280,6 @@ countEdges() {
284280
<tbody style={{maxHeight: tableHeight}}>
285281
{this.state.nodes.map( (node,i) =>
286282
<tr key={i}>
287-
<td>{node.id}</td>
288283
<td><Button size="sm" outline
289284
value={node.id}
290285
onClick={this.onButtonClick}

build/app/view/netcreate/components/Search.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ class Search extends UNISYS.Component {
7171
return (
7272
<FormGroup row>
7373
<Col sm={3}>
74-
<Label className="small text-muted">Search</Label>
74+
<Label className="small text-muted">Type to search or add a node:</Label>
7575
</Col>
7676
<Col sm={9}>
7777
<AutoComplete

0 commit comments

Comments
 (0)