visualization updates
update npm package.json file
changed name and description
updated vis version
added visualize menu, zoom affordance
zoom in and out
keyboard enabled
redraw on window resize
improve physics constants
update help files
fix ali's comments
turn authentication back on
Change-Id: I1a50552724cbda4f34f276acc1289f3c6e24839a
diff --git a/bower.json b/bower.json
index a322029..5e8f052 100644
--- a/bower.json
+++ b/bower.json
@@ -1,5 +1,5 @@
{
- "name": "veyron-browser",
+ "name": "viz-vanadium-viewer",
"dependencies": {
"polymer": "Polymer/polymer#~0.5.1",
"core-elements": "Polymer/core-elements#~0.5.1",
diff --git a/package.json b/package.json
index e27c178..4f39199 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
- "name": "veyron-browser",
- "description": "Veyron Browser is a browser for the Veyron namespace.",
+ "name": "viz-vanadium-viewer",
+ "description": "Viz is a browser for Vanadium namespaces.",
"version": "0.0.1",
"private": true,
"devDependencies": {
@@ -32,7 +32,7 @@
"mercury": "^12.0.0",
"routes": "^1.2.0",
"lodash": "~2.4.1",
- "vis": "~3.8.0",
+ "vis": "~3.9.1",
"extend": "~2.0.0"
}
}
diff --git a/public/helpimg/visualize.png b/public/helpimg/visualize.png
index a55fb44..4ef7f00 100644
--- a/public/helpimg/visualize.png
+++ b/public/helpimg/visualize.png
Binary files differ
diff --git a/src/app.js b/src/app.js
index 75a0847..29d3e06 100644
--- a/src/app.js
+++ b/src/app.js
@@ -129,7 +129,8 @@
mercury.app(document.body, state, render);
// Add additional events that mercury's delegator should listenTo.
- addDelegatedEvents(['core-overlay-open-completed', 'openchange', 'activate']);
+ addDelegatedEvents(['core-overlay-open-completed',
+ 'down', 'up', 'openchange', 'activate']);
function wireEvents() {
// TODO(aghassemi): Make these events global.
@@ -196,4 +197,4 @@
function onVanadiumCrash(crashErr) {
events.browse.error(crashErr);
}
-});
\ No newline at end of file
+});
diff --git a/src/components/browse/items/visualize-view/index.css b/src/components/browse/items/visualize-view/index.css
index aad9f06..22b5413 100644
--- a/src/components/browse/items/visualize-view/index.css
+++ b/src/components/browse/items/visualize-view/index.css
@@ -4,4 +4,20 @@
left: 0;
right: 0;
bottom: 0;
-}
\ No newline at end of file
+}
+
+.vismenu {
+ position: absolute;
+ top: 5px;
+ right: 10px;
+}
+/*paper-fab#expand,
+paper-fab.mode,*/
+paper-fab.zoom
+ {
+ background-color: white;
+ margin: 5px 3px;
+}
+paper-dropdown.dropdown {
+ top: 50%;
+}
diff --git a/src/components/browse/items/visualize-view/index.js b/src/components/browse/items/visualize-view/index.js
index 01cd82b..1fe34ec 100644
--- a/src/components/browse/items/visualize-view/index.js
+++ b/src/components/browse/items/visualize-view/index.js
@@ -4,7 +4,10 @@
var namespaceService = require('../../../../services/namespace/service');
-var log = require('../../../../lib/log')('components:browse:items:tree-view');
+// var getServiceIcon = require('../../get-service-icon');
+
+var log = require('../../../../lib/log'
+ )('components:browse:items:visualize-view');
var css = require('./index.css');
var h = mercury.h;
@@ -28,14 +31,99 @@
function render(itemsState, browseState, browseEvents, navEvents) {
insertCss(css);
+ // var open = false;
+
return [
h('h2', 'Visualize View'),
- new TreeWidget(browseState, browseEvents)
+ new TreeWidget(browseState, browseEvents),
+ h('div.vismenu', { // visualization menu
+ }, [
+ // h('paper-fab#expand', {
+ // attributes: {
+ // mini: true,
+ // icon: open ? 'expand-more' : 'chevron-right',
+ // title: open ? 'expanded' : 'collapsed',
+ // 'aria-label': 'visualization mode',
+ // 'on-tap': 'expander()'
+ // }
+ // }),
+ // h('paper-menu-button', [
+ // h('paper-fab.mode', {
+ // attributes: {
+ // mini: true,
+ // icon: 'menu',
+ // title: 'visualization mode',
+ // 'aria-label': 'visualization mode'
+ // }
+ // }),
+ // h('paper-dropdown.dropdown', {
+ // attributes: {
+ // // transition: ''
+ // }
+ // }, [
+ // h('core-menu.menu', [
+ // h('paper-item', 'Network'),
+ // h('paper-item', 'Hierarchy')
+ // ])
+ // ])
+ // ]),
+ h('paper-fab.zoom', {
+ attributes: {
+ mini: true,
+ icon: 'add',
+ title: 'zoom in',
+ 'aria-label': 'zoom in'
+ },
+ 'ev-down': zoom.bind(null, true),
+ 'ev-up': stopzoom
+ }),
+ h('paper-fab.zoom', {
+ attributes: {
+ mini: true,
+ icon: 'remove',
+ title: 'zoom out',
+ 'aria-label': 'zoom out'
+ },
+ 'ev-down': zoom.bind(null, false),
+ 'ev-up': stopzoom
+ }),
+ ])
];
}
+// The visjs visualization
+var network;
+
+var ZOOM_FACTOR = 0.01; // same as network.constants.keyboard.speed.zoom
+
+// start zooming on button press
+function zoom(zin, event) {
+ var zi = zin ? ZOOM_FACTOR : -ZOOM_FACTOR;
+ var selnodes; // selected nodes
+ if (event.shiftKey) {
+ selnodes = network.getSelection();
+ if (selnodes.nodes.length > 0) {
+ network.focusOnNode(selnodes.nodes[0], { animation: true });
+ } else {
+ network.zoomExtent(true);
+ }
+ }
+ network.zoomIncrement = zi;
+ network.start();
+}
+
+// stop zooming on button release
+function stopzoom() {
+ network.zoomIncrement = 0;
+}
+
+// redraw visualization when window resizes
+window.onresize = function redraw(e) {
+ network.redraw();
+};
+
// Maximum number of levels that are automatically shown
-var MAX_AUTO_LOAD_DEPTH = 5;
+var MAX_AUTO_LOAD_DEPTH = 3;
function TreeWidget(browseState, browseEvents) {
this.browseState = browseState;
@@ -71,6 +159,7 @@
// We keep track of previous namespace that was browsed to so we can
// know when navigating to a different namespace happens.
var previousNamespace;
+
TreeWidget.prototype.updateNetwork = function() {
if (previousNamespace === this.browseState.namespace) {
return;
@@ -101,6 +190,15 @@
hover: false,
selectable: true, // Need this or nodes won't be click-able
smoothCurves: false,
+ physics: { barnesHut: {
+ gravitationalConstant: -2200,
+ centralGravity: 0.2,
+ springLength: 64,
+ springConstant: 0.075,
+ damping: 0.12
+ }},
+ keyboard: { speed: { x: -2, y: -2, zoom: 0.01 }},
+ // configurePhysics: true,
edges: {
width: 1
},
@@ -112,7 +210,7 @@
};
// Start drawing the network.
- var network = new vis.Network(networkElem, {
+ network = new vis.Network(networkElem, {
nodes: this.nodes,
edges: this.edges
}, options);
@@ -197,4 +295,4 @@
TreeWidget.prototype.update = function(prev, networkElem) {
requestAnimationFrame(this.updateNetwork.bind(this));
-};
\ No newline at end of file
+};
diff --git a/src/components/help/content/browse.md b/src/components/help/content/browse.md
index 801b48e..e4556ea 100644
--- a/src/components/help/content/browse.md
+++ b/src/components/help/content/browse.md
@@ -58,7 +58,15 @@
-You can drag items (nodes) around to rearrange the graph,
-and can zoom in and out (if your mouse has a scroll wheel).
-As in the other views, you can click on items to show details for that item
-(in the right pane).
+You can drag individual items (nodes) around to rearrange the graph,
+and you can select items to show details for that item (in the right pane).
+You can drag the entire visualization around with your mouse,
+or using the arrow keys on your keyboard.
+You can zoom the entire visualization using the action buttons in
+the upper right, using the "Page Up" and "Page Down" keys on
+your keyboard, or using the scroll wheel on your mouse.
+
+The action buttons provide another useful function. If you hold down
+the shift key on your keyboard while pressing one of these buttons,
+it will center the visualization in the window, and then zoom in or out.
+If an item has been selected, then it will center that node.
diff --git a/src/components/help/content/main.md b/src/components/help/content/main.md
index bd503ed..97c779b 100644
--- a/src/components/help/content/main.md
+++ b/src/components/help/content/main.md
@@ -53,7 +53,8 @@
A relative name does not begin with a slash.
The meaning of a relative name depends on a root stored in your environment
-(this is similar to the concept of a "current directory").
+(this is similar to the concept of a "current directory", except it can
+be on a different device).
For example, a user can have their own mount table where they store things
they own. This mount table can contain names like "phone/messages" that
diff --git a/src/lib/web-components/tree-node/demo.html b/src/lib/web-components/tree-node/demo.html
index 1431e09..5dc06e6 100644
--- a/src/lib/web-components/tree-node/demo.html
+++ b/src/lib/web-components/tree-node/demo.html
@@ -1,4 +1,3 @@
-
<!DOCTYPE html>
<html><head>
<title>Namespace tree menu</title>
diff --git a/web-component-dependencies.html b/web-component-dependencies.html
index ab99f94..e2c2908 100644
--- a/web-component-dependencies.html
+++ b/web-component-dependencies.html
@@ -27,5 +27,8 @@
<link rel="import" href="bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
+<link rel="import" href="bower_components/paper-fab/paper-fab.html">
+<link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
+<link rel="import" href="bower_components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="src/lib/web-components/paper-autocomplete/paper-autocomplete.html">
<link rel="import" href="src/lib/web-components/tree-node/tree-node.html">
