Optimizations and Upgrades

.travis.yml

@@ -0,0 +1,42 @@
+language: node_js
+node_js:
+- '6'
+
+before_install:
+  - "echo 'before install'"
+
+install:
+- "echo 'install'"
+- npm install --production
+
+script:
+- "echo 'All is Good!'"
+
+after_success:
+- "echo 'install success'"
+
+before_deploy:
+- "echo 'ready?'"
+- sudo dpkg --add-architecture i386
+- wget -nc https://dl.winehq.org/wine-builds/Release.key
+- sudo apt-key add Release.key
+- sudo apt-add-repository https://dl.winehq.org/wine-builds/ubuntu/
+- sudo apt-get -qq update
+- sudo apt install -y wine-stable winehq-stable
+- npm install
+- npm run everything
+
+deploy:
+  provider: releases
+  api_key:
+    secure: PTg+2qVbrA+3/PQfiLA7YC0QvSeLRqaM+OAodH3LkLw7o1kc/BjgdAcAqySlWLPe1BbxdcdRNwfDF/IjGaM6P7RNlHKrlIvPCxBwHEuwxKVkX0cX2cIXiGnhIE7yJ3zLKVThBbxvjsaMuwi8StD7L9N0liN8lMwMV1VV6Ul4GnhXeoccAuhDO/y7vU4wjZDdYK4BOkHxKHFs9b0+ASGiNbjGPyy0w3TVBnmALk/6fxd9Xi4iqXvapxj3Zcp8X5tK7K2j40BAjI3u7UPbbzvzR1LtknMcvF88xKYUNG4s69tU+V/v8pP8MrDtRqwRq6bg4rPbpcE/56z8DV9GryZLHQy2M8+aLYXeUekedEPtXDHZXCas4i4GkO5nHdVfnMB0ld0d8ov94jhA0EYyGoi4m5HWi2y9nZMVJrGh+1twX8pv/UJ5rjM38aeN7hd1JIe0e4tKY/nAlUtDSC4ZAjzYr6FZZmCI2k3cWfUFqTLumFX+vo2viWbVaBpplmQZ8FzBtKE7Bl+Qtlk2FfAT01084DRwbFNaMGxlaabWMZ9I1+QsKCKbvPT6IgNCbGUZiuzutmlweQQlIyk0vh6TTtMEfsAPZgLvfaXbl7lN7ksInPupFxKNRPrESyAWX/hjgGyV1cByxA/9GffTmFZJQxq38+NkGGlonyU4erjhKnbaerc=
+  file_glob: true
+  file: builds/*
+  skip_cleanup: true
+  on:
+    repo: zz85/space-radar
+    tags: true
+    all_branches: true
+
+after_deploy:
+- "echo 'builds relased!'"

README.md

@@ -1,29 +1,31 @@
 Space Radar Electron
 ====
-Space Radar Electron is a space visualizer that allows interactive Sunburst and Treemap charting of your disk space and memory.
-
-This project started as quick prototype for me to test drive [atom electron](http://electron.atom.io) (& some es6 syntax), [d3.js](https://d3js.org) and for me to explore the question of "what's taking up my disk space". Turns out writing a disk visualization app isn't that simple as I dwell into figuring out how to make disk scanning not block the ui thread, ipc calls go faster, smoother rendering, lesser memory usage, more sensible interactions...
-
-Screenshots
-==
-![space-radar-4](https://cloud.githubusercontent.com/assets/314997/11022585/5c847364-869d-11e5-8079-0a16e7d747e4.gif)
-
-![screenshot 2015-11-09 04 45 27](https://cloud.githubusercontent.com/assets/314997/11022582/3cc0bc90-869d-11e5-85c2-e79a0bf7c27f.png)
-
-![screenshot 2015-11-09 04 45 36](https://cloud.githubusercontent.com/assets/314997/11022581/33822b50-869d-11e5-9fe6-2db6b7a81505.png)
+SpaceRadar allows interactive visualization of disk space and memory. It currently supports Sunburst, Treemap, and Flamegraph charts.
 
 Downloads
 ==
 Download Mac and Windows at the [releases page](https://github.com/zz85/space-radar-electron/releases)
 
 Features
 ==
+- space visualizations using sunburst and treemap charts
 - previews visualization as disk is being scanned
+- fast (completes disk scanner faster than du)
 - cross platform (at least on Mac OS X and Windows)
 - allow drilldown of directories
 - breadcrumbs and navigation
+- opens files and directories
 - analyze disk contents from a remote server (see section [Reading from a file](#reading-file))
 
+Screenshots
+==
+![space-radar-4](https://cloud.githubusercontent.com/assets/314997/11022585/5c847364-869d-11e5-8079-0a16e7d747e4.gif)
+
+![screenshot 2015-11-09 04 45 27](https://cloud.githubusercontent.com/assets/314997/11022582/3cc0bc90-869d-11e5-85c2-e79a0bf7c27f.png)
+
+![screenshot 2015-11-09 04 45 36](https://cloud.githubusercontent.com/assets/314997/11022581/33822b50-869d-11e5-9fe6-2db6b7a81505.png)
+
+
 Reading from a file <a id="reading-file"></a>
 ==
 To create a file to be read from use `du -ak`, for example:
@@ -46,11 +48,20 @@ Futher Explorations
 - More efficient scanning process
 - 3D visualization
 
+History
+==
+
+This project started as quick prototype for me to test drive [atom electron](http://electron.atom.io) (& some es6 syntax), [d3.js](https://d3js.org) and for me to explore the question of "what's taking up my disk space". Turns out writing a disk visualization app isn't that simple as I dwell into figuring out how to make disk scanning not block the ui thread, ipc calls go faster, smoother rendering, lesser memory usage, more sensible interactions...
+
+
 Whats New
 ==
 V5
 - Import from DU file
--
+- Upgrade electron
+- Flamegraphs (BETA)
+- Directory Listview
+- Update libs - Electron, D3
 
 V4
 - Treemap view
@@ -89,7 +100,7 @@ Development
 Run
 
 ```
-DEBUG=true electron .
+npm run debug
 ```
 
 or
@@ -98,10 +109,10 @@ or
 npm run app
 ```
 
-Check that you have depdencies installed, otherwise run (this may take awhile for electron binaries)
+Check that dependencies are installed, otherwise run (this may take awhile for electron binaries)
 
 ```
-npm install
+npm run install
 ```
 
 Thanks

app/css/breadcrumb.css

@@ -0,0 +1,117 @@
+/* from http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation*/
+
+.breadcrumb {
+  /*centering*/
+  display: inline-block;
+  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  border-radius: 5px;
+  /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
+  counter-reset: flag;
+}
+
+.breadcrumb a {
+  text-decoration: none;
+  outline: none;
+  display: block;
+  float: left;
+  font-size: 12px;
+  line-height: 28px;
+  color: white;
+  /*need more margin on the left of links to accomodate the numbers*/
+  padding: 0 10px 0 30px;
+  background: #666;
+  background: linear-gradient(#666, #333);
+  position: relative;
+}
+/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
+.breadcrumb a:first-child {
+  padding-left: 46px;
+  border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
+}
+.breadcrumb a:first-child:before {
+  left: 14px;
+}
+.breadcrumb a:last-child {
+  border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
+  padding-right: 20px;
+}
+
+/*hover/active styles*/
+.breadcrumb a.active,
+.breadcrumb a:hover {
+  /*background: #333;
+	background: linear-gradient(#333, #000);*/
+  opacity: 0.8;
+}
+.breadcrumb a.active:after,
+.breadcrumb a:hover:after {
+  /*background: #333;
+	background: linear-gradient(135deg, #333, #000);*/
+  opacity: 0.8;
+}
+
+/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
+.breadcrumb a:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -18px; /*half of square's length*/
+  /*same dimension as the line-height of .breadcrumb a */
+  width: 36px;
+  height: 36px;
+  /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
+	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
+	if diagonal required = 1; length = 1/1.414 = 0.707*/
+  transform: scale(0.707) rotate(45deg);
+  /*we need to prevent the arrows from getting buried under the next link*/
+  z-index: 1;
+  /*background same as links but the gradient will be rotated to compensate with the transform applied*/
+  background: #666;
+  background: linear-gradient(135deg, #666, #333);
+  /*stylish arrow design using box shadow*/
+  box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
+  /*
+		5px - for rounded arrows and
+		50px - to prevent hover glitches on the border created using shadows*/
+  border-radius: 0 5px 0 50px;
+}
+/*we dont need an arrow after the last link*/
+.breadcrumb a:last-child:after {
+  content: none;
+}
+/*we will use the :before element to show numbers*/
+.breadcrumb a:before {
+  /*	content: counter(flag);
+	counter-increment: flag;
+*/ /*some styles now*/
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  margin: 8px 0;
+  position: absolute;
+  top: 0;
+  left: 30px;
+  background: #444;
+  background: linear-gradient(#444, #222);
+  font-weight: bold;
+}
+
+.flat a,
+.flat a:after {
+  /*background: white;*/
+  background: inherit;
+  color: black;
+  transition: all 0.5s;
+}
+.flat a:before {
+  background: white;
+  box-shadow: 0 0 0 1px #ccc;
+}
+.flat a:hover,
+.flat a.active,
+.flat a:hover:after,
+.flat a.active:after {
+  /*background: #9EEB62;*/
+}