Skip to content

Commit b8be837

Browse files
hmskleehmsklee
committed
improve link crossovers...
1 parent 3975fb1 commit b8be837

File tree

5 files changed

+138
-49
lines changed

5 files changed

+138
-49
lines changed

‎css/style.css‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,15 @@ svg text {
2626
font: 14px/1.5em helvetica, arial, sans-serif;
2727
}
2828

29-
#options {
29+
header > div {
3030
float:right;
3131
display:inline-block;
3232
background:inherit;
3333
color:white;
34+
position:relative;
3435
}
3536
#dataset,
36-
#options button {
37+
header > button {
3738
color:white;
3839
height:40px;
3940
padding: 0 20px;
@@ -43,43 +44,38 @@ svg text {
4344
font:inherit;
4445
border:none;
4546
}
46-
#options button {
47+
header > button {
4748
border: 1px solid #999;
4849
border-width:0 0 0 1px;
4950
border-radius:0;
5051
}
51-
#options.open button {
52-
background: #333;
53-
border-color: #555;
54-
border-width:0 0 1px 0;
55-
}
56-
#options ul {
52+
53+
.modal {
54+
background:rgba(0,0,0,0.5);
55+
width:100%;
56+
height:100%;
57+
top:0;
58+
left:0;
59+
position:fixed;
60+
z-index:1000;
5761
display:none;
58-
margin:0;
59-
list-style-type: none;
60-
padding: 4px 0;
61-
background: #333;
62-
}
63-
#options > ul {
64-
position:absolute;
65-
min-width:125px;
66-
padding: 10px;
67-
padding-left: 0;
68-
right: 0;
69-
max-height: calc(100vh - 60px);
70-
overflow-y: scroll;
7162
}
72-
#options.open ul {
63+
.modal.open {
7364
display:block;
7465
}
75-
#options li {
76-
padding: 3px 10px;
77-
padding-right: 0;
78-
}
79-
#options li input[type="checkbox"] {
80-
margin-right: 5px;
66+
.modal > div {
67+
padding:10px;
68+
background:hsl(5,5%,98%);
69+
margin: 10vh auto;
70+
width:80%;
71+
max-width:700px;
72+
height:80vh;
73+
overflow-y:auto;
74+
border-radius:6px;
75+
box-shadow: 0 0 20px black;
8176
}
8277

78+
8379
#tooltip {
8480
width:175px;
8581
background:hsl(40,10%,98%);
@@ -166,7 +162,7 @@ svg text {
166162

167163
.editing .word-tag,
168164
.editing text {
169-
fill: #fff;
165+
fill: #fff !important;
170166
}
171167
.editing rect {
172168
fill:#a94442;

‎index.html‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<body>
1010

11-
<div id="header">
11+
<header id="header">
1212
<select id="dataset">
1313
<option>-- select dataset --</option>
1414
<option>data1</option>
@@ -17,23 +17,17 @@
1717
<option>passage1</option>
1818
<option>passage2</option>
1919
</select>
20-
<div id="options">
21-
<button id="options-toggle">Visible edges ▾</button>
22-
<ul>
23-
<li class="reach">
24-
<input id="reach--all" type="checkbox" checked><label for="reach--all">REACH</label>
25-
</li>
26-
<li class="pos">
27-
<input id="pos--all" type="checkbox" checked><label for="pos--all">Syntax</label>
28-
</li>
29-
</ul>
30-
</div>
31-
</div>
20+
<button id="taxonomy-toggle">Taxonomy ▾</button>
21+
</header>
3222

3323
<div id="main">
3424
<div id="tooltip">
3525
</div>
3626
</div>
27+
<div class="modal" id="taxonomy">
28+
<div>
29+
</div>
30+
</div>
3731

3832
<script src="libs/svg.js"></script>
3933
<script src="libs/svg.draggable.js"></script>

‎js/components/link.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ class Link {
4848
// get location of trigger
4949
if (this.trigger) {
5050
let offset = this.trigger.links.filter(l => l.top == this.top).indexOf(this);
51+
if (this.trigger.idx > this.endpoints[0].idx) { offset *= -1; }
5152
let x = this.trigger.cx + 8 * offset;
5253
let y = this.top ? this.trigger.absoluteY : this.trigger.absoluteDescent;
5354
this.handles.push({ anchor: this.trigger, x, y, offset });
@@ -57,6 +58,7 @@ class Link {
5758
this.arguments.forEach(arg => {
5859
// get location of the argument
5960
let offset = arg.anchor.links.filter(l => l.top == this.top).indexOf(this);
61+
if (arg.anchor.idx > this.endpoints[0].idx) { offset *= -1; }
6062
let x = arg.anchor.cx + 8 * offset;
6163
let y = this.top ? arg.anchor.absoluteY : arg.anchor.absoluteDescent;
6264
this.handles.push({ anchor: arg.anchor, x, y, offset });

‎js/main.js‎

Lines changed: 101 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const Main = (function() {
3131
lm = new LabelManager(svg);
3232

3333
// load and render initial dataset by default
34-
changeDataset(3);
34+
changeDataset(2);
3535

3636
// svg event listeners
3737
svg.on('row-resize', function(e) {
@@ -57,8 +57,11 @@ const Main = (function() {
5757
changeDataset(this.selectedIndex);
5858
}
5959
}
60-
document.getElementById('options-toggle').onclick = function() {
61-
document.getElementById('options').classList.toggle('open');
60+
document.getElementById('taxonomy-toggle').onclick = function() {
61+
document.getElementById('taxonomy').classList.add('open');
62+
}
63+
document.getElementById('taxonomy').onclick = function(e) {
64+
e.target.classList.remove('open');
6265
}
6366
}
6467

@@ -71,8 +74,102 @@ const Main = (function() {
7174
clear();
7275
ymlToJson.convert('taxonomy.yml.txt', function(taxonomy) {
7376
[words, links, clusters] = buildWordsAndLinks();
74-
populateOptions();
77+
78+
// turn taxonomy into a proper tree
79+
let tree = (function() {
80+
81+
let flat = [];
82+
83+
function createLinks(val, i, n, parent) {
84+
let index = { i, n };
85+
let obj = {
86+
val,
87+
parent,
88+
index: parent ? parent.index.concat(index) : [index],
89+
depth: parent ? parent.depth + 1 : 0,
90+
ancestor: parent ? parent.ancestor : null,
91+
children: null
92+
};
93+
if (!obj.ancestor) {
94+
obj.ancestor = obj;
95+
obj.descendantCount = 0;
96+
}
97+
++obj.ancestor.descendantCount;
98+
99+
flat.push(obj);
100+
101+
if (!(typeof val === 'string' || val instanceof String)) {
102+
let key = Object.keys(val)[0];
103+
obj.val = key;
104+
obj.children = val[key].map((v, i) => createLinks(v, i, val[key].length, obj));
105+
}
106+
return obj;
107+
}
108+
109+
let hierarchy = taxonomy.map((val, i) => createLinks(val, i, taxonomy.length, null));
110+
111+
return {
112+
hierarchy,
113+
flat
114+
}
115+
})();
116+
117+
let tagTypes = {};
118+
words.forEach(word => {
119+
if (word.tag) {
120+
if (tagTypes[word.tag]) {
121+
tagTypes[word.tag].push(word);
122+
}
123+
else {
124+
tagTypes[word.tag] = [word];
125+
}
126+
}
127+
if (word.clusters.length > 0) {
128+
word.clusters.forEach(cluster => {
129+
if (tagTypes[cluster.val]) {
130+
tagTypes[cluster.val].push(cluster);
131+
}
132+
else {
133+
tagTypes[cluster.val] = [cluster];
134+
}
135+
});
136+
}
137+
});
138+
colors = [
139+
'#6185b5',
140+
'#ff7f0e',
141+
'#52a717',
142+
'#d62728',
143+
'#9467bd',
144+
'#8c564b',
145+
'#e377c2',
146+
'#347847',
147+
'#909108',
148+
'#17becf'
149+
];
150+
151+
let div = document.querySelector('#taxonomy > div');
152+
153+
tree.flat.forEach(el => {
154+
let u = document.createElement('div');
155+
u.style.color = colors[el.depth];
156+
u.style.marginLeft = el.depth * 15 + 5 + 'px';
157+
u.appendChild(document.createTextNode(el.val));
158+
div.appendChild(u);
159+
});
160+
75161
draw();
162+
console.log(Object.keys(tagTypes), tree.flat.filter(x => tagTypes[x.val]));
163+
Object.keys(tagTypes).forEach((tag, i) => {
164+
tagTypes[tag].forEach(word => {
165+
if (word instanceof Word) {
166+
word.tag.svgText.node.style.fill = colors[i];
167+
}
168+
else {
169+
word.svgText.node.style.fill = colors[i];
170+
}
171+
});
172+
});
76173
});
77174
});
78175
};

‎js/managers/rowmanager.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,7 @@ const RowManager = (function() {
6363

6464
// get word slots
6565
let slots = this.getSlotRange([0,0], word);
66-
if (word.row && word.row !== row &&
67-
(slots[0] === word.row.minSlot || word.row.maxSlot === slots[1])) {
66+
if (word.row && word.row !== row && (slots[0] === word.row.minSlot || word.row.maxSlot === slots[1])) {
6867
this.recalculateRowSlots(word.row);
6968
}
7069
if (row.minSlot > slots[0] || row.maxSlot < slots[1]) {
@@ -192,6 +191,7 @@ const RowManager = (function() {
192191
}
193192

194193
getSlotRange(acc, anchor) {
194+
// if (anchor instanceof Link && !anchor.visible) { return [acc, acc]; }
195195
if (anchor.links.length === 0) {
196196
return [Math.min(acc[0], anchor.slot), Math.max(acc[1], anchor.slot)];
197197
}

0 commit comments

Comments
 (0)