diff --git a/package.json b/package.json index 698370b..a1754dd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iknow-entity-browser", - "version": "0.5.12", + "version": "0.6.0", "description": "Visualizer for iKnow entities", "main": "gulpfile.babel.js", "scripts": { diff --git a/src/static/fonts/iknowentitybrowsericons.eot b/src/static/fonts/iknowentitybrowsericons.eot index 6c162f1..37cef04 100644 Binary files a/src/static/fonts/iknowentitybrowsericons.eot and b/src/static/fonts/iknowentitybrowsericons.eot differ diff --git a/src/static/fonts/iknowentitybrowsericons.svg b/src/static/fonts/iknowentitybrowsericons.svg index 6df0a74..5c9aa6d 100644 --- a/src/static/fonts/iknowentitybrowsericons.svg +++ b/src/static/fonts/iknowentitybrowsericons.svg @@ -27,4 +27,5 @@ <glyph glyph-name="share" unicode="s" d="M324 197l100 101c4 4 6 8 6 13 0 5-2 9-6 13l-100 100c-6 6-13 8-20 4-8-3-11-9-11-17l0-45c-23 0-44-2-62-6-19-4-34-8-47-14-12-6-23-14-32-23-9-9-17-18-22-27-5-9-10-20-13-31-3-12-5-23-6-32-1-10-1-20-1-32 0-34 16-73 47-115 2-3 5-4 8-4 1 0 2 1 3 1 4 2 6 5 6 10-9 67-3 112 17 135 9 10 22 17 38 21 16 5 37 7 64 7l0-46c0-8 3-13 11-17 2-1 5-1 7-1 5 0 9 2 13 5z m151 196l0-274c0-23-8-42-24-58-16-16-35-24-58-24l-274 0c-23 0-42 8-58 24-16 16-24 35-24 58l0 274c0 23 8 42 24 58 16 16 35 24 58 24l274 0c23 0 42-8 58-24 16-16 24-35 24-58z"/> <glyph glyph-name="redo" unicode="t" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/> <glyph glyph-name="undo" unicode="u" d="M475 256c0-30-5-58-17-85-12-27-27-51-47-70-19-20-43-35-70-47-27-12-55-17-85-17-33 0-64 6-93 20-30 14-55 34-76 59-1 2-2 4-2 6 0 3 1 4 3 6l39 39c2 2 4 3 7 3 3 0 5-2 7-3 13-19 31-33 51-42 20-10 41-15 64-15 20 0 39 4 57 11 18 8 33 18 46 32 14 13 24 28 32 46 7 18 11 37 11 57 0 20-4 39-11 57-8 18-18 33-32 46-13 14-28 24-46 32-18 7-37 11-57 11-19 0-37-3-54-10-17-7-32-16-45-29l39-39c6-6 7-13 4-20-4-8-9-11-17-11l-128 0c-5 0-9 1-13 5-4 4-5 8-5 13l0 128c0 8 3 13 11 17 7 3 14 2 20-4l37-37c20 19 44 34 70 45 26 10 53 15 81 15 30 0 58-5 85-17 27-12 51-27 70-47 20-19 35-43 47-70 12-27 17-55 17-85z"/> +<glyph glyph-name="add" unicode="b" d="M384 238l0 36c0 5-2 10-5 13-4 4-8 6-13 6l-73 0 0 73c0 5-2 9-6 13-3 3-8 5-13 5l-36 0c-5 0-10-2-13-5-4-4-6-8-6-13l0-73-73 0c-5 0-9-2-13-6-3-3-5-8-5-13l0-36c0-5 2-10 5-13 4-4 8-6 13-6l73 0 0-73c0-5 2-9 6-13 3-3 8-5 13-5l36 0c5 0 10 2 13 5 4 4 6 8 6 13l0 73 73 0c5 0 9 2 13 6 3 3 5 8 5 13z m91 18c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/> </font></defs></svg> diff --git a/src/static/fonts/iknowentitybrowsericons.ttf b/src/static/fonts/iknowentitybrowsericons.ttf index 9af7921..0650f6b 100644 Binary files a/src/static/fonts/iknowentitybrowsericons.ttf and b/src/static/fonts/iknowentitybrowsericons.ttf differ diff --git a/src/static/fonts/iknowentitybrowsericons.woff b/src/static/fonts/iknowentitybrowsericons.woff index 51f6956..ab7334c 100644 Binary files a/src/static/fonts/iknowentitybrowsericons.woff and b/src/static/fonts/iknowentitybrowsericons.woff differ diff --git a/src/static/index.html b/src/static/index.html index 831f27c..cb40d72 100644 --- a/src/static/index.html +++ b/src/static/index.html @@ -96,6 +96,7 @@ <th data-prop="entities.0.spread">Spread</th> <th data-prop="edgeType">Relation</th> <th data-prop="parent.label">Parent</th> + <th></th> </tr> </thead> <tbody id="tabular-selected"> diff --git a/src/static/js/graph/index.js b/src/static/js/graph/index.js index ff4a433..f9d07f1 100644 --- a/src/static/js/graph/index.js +++ b/src/static/js/graph/index.js @@ -221,7 +221,7 @@ export function update (g = lastGraph, reset = false) { node = nodes.selectAll(".node").data(graph.nodes, function (d) { return this._id || d.id; }); node.exit().remove(); let nodeEnter = node.enter().append("g") - .each(function (d) { this._id = d.id; }) + .each(function (d) { this._id = d.id; d.element = this; }) .attr("class", d => `node${ d.id === 0 ? " root" : "" } ${ d.type || "unknown" }`) .classed("selected", (p) => p.selected) .call(dragger) diff --git a/src/static/js/tabular/index.js b/src/static/js/tabular/index.js index aa6d6d0..c7f70eb 100644 --- a/src/static/js/tabular/index.js +++ b/src/static/js/tabular/index.js @@ -14,6 +14,16 @@ let sorter = (a, b) => { return a > b ? sorting.order : a === b ? 0 : -sorting.order; }; +/** + * this: node + */ +function switchSelected () { + if (!this.element) + return; + d3.select(this.element).classed("selected", this.selected = !this.selected); + updateSelection(); +} + function updateSelected () { let data = getSelection().filter(node => node.type === "entity").sort(sorter), table = document.querySelector("#tabular-selected"); @@ -30,6 +40,10 @@ function updateSelected () { (c = row.insertCell(5)).textContent = node.edgeType || ""; c.className = `${ node.edgeType }Item`; row.insertCell(6).textContent = (node.parent || { label: "root" }).label || "?"; + let ee = document.createElement("i"); + ee.className = "icon-close"; + ee.addEventListener("click", switchSelected.bind(node)); + row.insertCell(7).appendChild(ee); } } @@ -49,6 +63,10 @@ function updateOthers () { (c = row.insertCell(5)).textContent = node.edgeType || ""; c.className = `${ node.edgeType }Item`; row.insertCell(6).textContent = (node.parent || { label: "root" }).label || "?"; + let ee = document.createElement("i"); + ee.className = "icon-add"; + ee.addEventListener("click", switchSelected.bind(node)); + row.insertCell(7).appendChild(ee); } } @@ -96,7 +114,8 @@ export function init () { d.tabularToggled = !d.tabularToggled; d3.select(this).classed("toggled", d.tabularToggled); d3.select("#table").classed("active", d.tabularToggled); - updateSelection(); + if (d.tabularToggled) + updateAll(); }); d3.select("#exportCSV").on("click", () => { diff --git a/src/static/scss/basic.scss b/src/static/scss/basic.scss index 1a79948..2416cdb 100644 --- a/src/static/scss/basic.scss +++ b/src/static/scss/basic.scss @@ -9,7 +9,7 @@ table { box-shadow: $defaultShadow; td, th { - padding: 3px; + padding: 1px 2px; } td:not(:last-child), th:not(:last-child) { diff --git a/src/static/scss/icons.scss b/src/static/scss/icons.scss index 88477a8..c15434f 100644 --- a/src/static/scss/icons.scss +++ b/src/static/scss/icons.scss @@ -100,3 +100,6 @@ .icon-undo:before { content: "\75"; } +.icon-add:before { + content: "\62"; +} \ No newline at end of file diff --git a/src/static/scss/tabular.scss b/src/static/scss/tabular.scss index 0875231..79d2c34 100644 --- a/src/static/scss/tabular.scss +++ b/src/static/scss/tabular.scss @@ -55,6 +55,14 @@ $headerHeight: 36px; content: " ▲"; } + &:last-child { + border-left: none; + } + + &:nth-last-child(2) { + border-right: none; + } + } #tabular td { @@ -64,6 +72,46 @@ $headerHeight: 36px; text-overflow: ellipsis; } +#tabular { + + td:last-child { + + width: 15px; + border-left: none; + + } + + tr td:last-child { + overflow: visible; + text-overflow: clip; + & i { + position: relative; + top: 2px; + font-size: 13px; + height: 13px; + display: none; + @include transition(none); + } + } + + tr:hover td:last-child i { + display: inline-block; + } + + td:nth-last-child(2) { + border-right: none; + } + +} + +#tabular-selected { + + tr td:last-child { + color: red; + } + +} + #tabular-others { opacity: 0.6; @@ -72,4 +120,8 @@ $headerHeight: 36px; border-top: 1px solid black; } + tr td:last-child { + color: green; + } + } \ No newline at end of file