From 9c6917b02dcb0bbab901625a6ea6529c59d9f023 Mon Sep 17 00:00:00 2001 From: ZitRos Date: Mon, 23 Jan 2017 17:22:19 +0200 Subject: [PATCH] Select/deselect children from tabular view --- package.json | 2 +- src/static/js/graph/index.js | 1 - src/static/js/selection.js | 10 +++--- src/static/js/tabular/index.js | 66 +++++++++++++++++++++------------- src/static/scss/graph.scss | 4 +++ src/static/scss/tabular.scss | 6 ++-- 6 files changed, 55 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index a1754dd..c67ce86 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iknow-entity-browser", - "version": "0.6.0", + "version": "0.6.1", "description": "Visualizer for iKnow entities", "main": "gulpfile.babel.js", "scripts": { diff --git a/src/static/js/graph/index.js b/src/static/js/graph/index.js index f9d07f1..b5bcd7b 100644 --- a/src/static/js/graph/index.js +++ b/src/static/js/graph/index.js @@ -245,7 +245,6 @@ export function update (g = lastGraph, reset = false) { deselectAll(d); else selectAll(d); - updateSelected(); } else { d3.select(this).classed("selected", d.selected = !d.selected); // (!prevSel) } diff --git a/src/static/js/selection.js b/src/static/js/selection.js index cbf151c..9f9839f 100644 --- a/src/static/js/selection.js +++ b/src/static/js/selection.js @@ -32,20 +32,22 @@ export function getOthers () { return others; } -export function selectAll (node) { +export function selectAll (node, nodeItself = true) { if (!node) return; if (node.children) node.children.forEach(c => selectAll(c)); - node.selected = true; + if (nodeItself) + d3.select(node.element).classed("selected", node.selected = true); } -export function deselectAll (node) { +export function deselectAll (node, nodeItself = true) { if (!node) return; if (node.children) node.children.forEach(c => deselectAll(c)); - node.selected = false; + if (nodeItself) + d3.select(node.element).classed("selected", node.selected = false); } /** diff --git a/src/static/js/tabular/index.js b/src/static/js/tabular/index.js index c7f70eb..d843860 100644 --- a/src/static/js/tabular/index.js +++ b/src/static/js/tabular/index.js @@ -1,6 +1,8 @@ import { csv } from "./export"; import * as model from "../model"; -import { onSelectionUpdate, updateSelection, getSelection, getOthers } from "../selection"; +import { + onSelectionUpdate, updateSelection, getSelection, getOthers, selectAll, deselectAll +} from "../selection"; let sorting = { properties: ["entities", "0", "score"], @@ -20,14 +22,28 @@ let sorter = (a, b) => { function switchSelected () { if (!this.element) return; + this.element.classList.remove("highlighted"); 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"); - table.textContent = ""; +/** + * this: node + */ +function toggleChildrenSelected (e) { + let sel = false, + el = e.target || e.srcElement; + for (let o of this.children) { if (o.selected) { sel = true; break; } } + if (sel) + deselectAll(this, false); + else + selectAll(this, false); + el.className = `icon-${ !sel ? "filled" : "outline" }`; + this.element.classList.remove("highlighted"); + updateSelection(); +} + +function insertRows (data, table, selected) { for (let i = 0; i < data.length; i++) { let row = table.insertRow(i), node = data[i], @@ -40,34 +56,34 @@ 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"; + let ee = document.createElement("i"), + ei = document.createElement("i"), + sel = false, + cell = row.insertCell(7); + for (let o of node.children) { if (o.selected) { sel = true; break; } } + ei.className = `icon-${ sel ? "filled" : "outline" }`; + ei.addEventListener("click", toggleChildrenSelected.bind(node)); + ee.className = `icon-${ selected ? "close" : "add" }`; ee.addEventListener("click", switchSelected.bind(node)); - row.insertCell(7).appendChild(ee); + cell.appendChild(ei); + cell.appendChild(ee); + row.addEventListener("mouseover", () => { node.element.classList.add("highlighted"); }); + row.addEventListener("mouseout", () => { node.element.classList.remove("highlighted"); }); } } +function updateSelected () { + let data = getSelection().filter(node => node.type === "entity").sort(sorter), + table = document.querySelector("#tabular-selected"); + table.textContent = ""; + insertRows(data, table, true); +} + function updateOthers () { let data = getOthers().filter(node => node.type === "entity").sort(sorter), table = document.querySelector("#tabular-others"); table.textContent = ""; - for (let i = 0; i < data.length; i++) { - let row = table.insertRow(i), - node = data[i], - c; - row.insertCell(0).textContent = node.id; - row.insertCell(1).textContent = node.label; - row.insertCell(2).textContent = node.entities[0].score; - row.insertCell(3).textContent = node.entities[0].frequency; - row.insertCell(4).textContent = node.entities[0].spread; - (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); - } + insertRows(data, table, false); } function updateAll () { diff --git a/src/static/scss/graph.scss b/src/static/scss/graph.scss index 2418ec2..7abdd2d 100644 --- a/src/static/scss/graph.scss +++ b/src/static/scss/graph.scss @@ -53,6 +53,10 @@ fill: black; } + &.highlighted circle { + fill: rgb(255, 245, 161); + } + } } diff --git a/src/static/scss/tabular.scss b/src/static/scss/tabular.scss index 79d2c34..dc2bcca 100644 --- a/src/static/scss/tabular.scss +++ b/src/static/scss/tabular.scss @@ -76,7 +76,7 @@ $headerHeight: 36px; td:last-child { - width: 15px; + width: 30px; border-left: none; } @@ -106,7 +106,7 @@ $headerHeight: 36px; #tabular-selected { - tr td:last-child { + tr td:last-child .icon-close { color: red; } @@ -120,7 +120,7 @@ $headerHeight: 36px; border-top: 1px solid black; } - tr td:last-child { + tr td:last-child .icon-add { color: green; }