Mercurial > moztree-vis

annotate moztree.js @ 11:dc89fb1726b4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fixed fade bug
author Atul Varma <varmaa@toolness.com>
date Sun, 13 Dec 2009 00:42:21 -0800
parents c4f96938c259
children 279bee726817
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
1 const SVG_NS = "http://www.w3.org/2000/svg";
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
2
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
3 function getJSON(filename, cb) {
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
4 var xhr = new XMLHttpRequest();
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
5 xhr.open('GET', filename);
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
6 xhr.overrideMimeType('text/plain');
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
7 xhr.addEventListener("load",
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
8 function() { cb(JSON.parse(xhr.responseText)); },
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
9 false);
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
10 xhr.send(null);
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
11 }
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
12
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
13 function SVGElement(name, attribs, options) {
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
14 var element = document.createElementNS(SVG_NS, name);
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
15 for (name in attribs)
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
16 element.setAttribute(name, attribs[name]);
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
17 if (options) {
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
18 if (options.content)
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
19 element.textContent = options.content;
6
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
20 if (options.className)
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
21 element.setAttribute("class", options.className);
0
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
22 }
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
23 return element;
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
24 }
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
25
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
26 function drawDir(svg, dir, depth, options) {
4
1e54d2e9664b slimmed down size of json file
Atul Varma <varmaa@toolness.com>
parents: 1
diff changeset
27 if (depth == 0 || !dir.subdirs)
0
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
28 return;
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
29
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
30 var currY = options.y + options.height;
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
31 dir.subdirs.forEach(
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
32 function(subdir) {
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
33 var heightScale = subdir.size / dir.size;
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
34 var height = options.height * heightScale;
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
35 var y = currY - height;
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
36
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
37 if (height < options.minHeight)
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
38 return;
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
39
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
40 svg.appendChild(SVGElement("rect", {x: options.x,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
41 y: y,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
42 width: options.width,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
43 height: height}));
6
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
44
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
45 var text = SVGElement("text",
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
46 {x: options.x + options.textPadding,
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
47 y: y + height - options.textPadding});
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
48 text.appendChild(SVGElement("tspan", {},
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
49 {content: subdir.name}));
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
50 text.appendChild(SVGElement("tspan",
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
51 {x: (options.x + options.width -
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
52 options.textPadding)},
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
53 {content: subdir.changes,
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
54 className: "changes"}));
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
55 svg.appendChild(text);
d8b262428a1c Added display of # of files changed in past year to svg visualization.
Atul Varma <varmaa@toolness.com>
parents: 4
diff changeset
56
0
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
57 drawDir(svg, subdir, depth - 1, {x: options.x + options.width,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
58 y: y,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
59 width: options.width,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
60 height: height,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
61 minHeight: options.minHeight,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
62 textPadding: options.textPadding});
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
63 currY = y;
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
64 });
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
65 }
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
66
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
67 function makeTree(tree, options) {
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
68 var svg = document.createElementNS(SVG_NS, "svg");
1
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
69 var group = document.createElementNS(SVG_NS, "g");
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
70 var svgHeight = options.height;
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
71 var svgWidth = options.dirWidth * options.dirDepth;
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
72
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
73 if (options.landscape) {
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
74 var temp = svgWidth;
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
75 group.setAttribute("transform",
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
76 "translate(" + svgHeight + ", 0) rotate(90)");
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
77 svgWidth = svgHeight;
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
78 svgHeight = temp;
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
79 }
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
80
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
81 svg.setAttribute("width", svgWidth);
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
82 svg.setAttribute("height", svgHeight);
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
83 svg.appendChild(group);
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
84
ef88131dbd73 Added a 'landscape' option, though it's disabled for now.
Atul Varma <varmaa@toolness.com>
parents: 0
diff changeset
85 drawDir(group, tree, options.dirDepth,
0
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
86 {x: 0,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
87 y: 0,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
88 width: options.dirWidth,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
89 height: options.height,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
90 textPadding: options.textPadding,
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
91 minHeight: options.minHeight});
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
92 return svg;
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
93 }
100c148d285c Origination.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
94
10
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
95 function getTreePath(tree, path) {
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
96 var pathParts = path.split("/");
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
97 pathParts.reverse();
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
98 while (pathParts.length > 0) {
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
99 var dirName = pathParts.pop();
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
100 tree.subdirs.forEach(
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
101 function(subdir) {
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
102 if (subdir.name == dirName)
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
103 tree = subdir;
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
104 });
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
105 }
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
106 return tree;
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
107 }
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
108
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
109 var App = {
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
110 tree: null,
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
111 lastHash: null,
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
112 onIdle: function onIdle() {
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
113 if (window.location.hash != this.lastHash)
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
114 this.updateTree();
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
115 },
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
116 updateTree: function updateTree() {
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
117 var dir = this.tree;
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
118 if (window.location.hash && window.location.hash.length > 1)
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
119 dir = getTreePath(dir, window.location.hash.slice(1));
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
120 this.lastHash = window.location.hash;
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
121
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
122 var svg = makeTree(dir,
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
123 {height: 2800,
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
124 dirWidth: 120,
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
125 dirDepth: 6,
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
126 landscape: false,
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
127 textPadding: 4,
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
128 minHeight: 16});
11
dc89fb1726b4 fixed fade bug
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
129 $("#tree").empty().append(svg).hide().fadeIn("fast");
10
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
130 },
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
131 start: function start() {
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
132 var self = this;
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
133 getJSON(
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
134 'moztree.json',
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
135 function(tree) {
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
136 self.tree = tree;
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
137 self.updateTree();
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
138 window.setInterval(function() { self.onIdle(); }, 500);
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
139 });
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
140 }
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
141 };
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
142
c4f96938c259 url hash can now be used to show a part of the source code tree.
Atul Varma <varmaa@toolness.com>
parents: 6
diff changeset
143 $(window).ready(function() { App.start(); });