Fix UI for panels displaying the info in each data point. #6

marianamarasoiu · Jul 23, 2015 · 6e4654e · 6e4654e
1 parent 0666841
commit 6e4654e
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 25 deletions.
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -6,4 +6,6 @@ environment:
   sdk: '>=1.0.0 <2.0.0'
 dependencies:
   browser: '>=0.10.0 <0.11.0'
-  svg_pan_zoom: '>=0.0.0 <0.1.0'
+  svg_pan_zoom:
+    git:
+      url: git://github.com/marianamarasoiu/svg_pan_zoom.git
diff --git a/web/index.html b/web/index.html
@@ -17,17 +17,32 @@
     <button id="path-button" type="button">Get data</button>
 </div>
 
-<div class='visualisation-container' style='width:1000px; height:500px'>
-    <svg class='outer' width='1000' height='500'>
-        <svg class='inner' width='100%' height='100%' viewport="0 0 1000 500">
+<div id='visualisation-container' style='width:1000px; height:500px'>
+    <svg class='outer-svg' width='1000' height='500'>
+        <svg class='inner-svg' width='100%' height='100%' viewport="0 0 1000 500">
             <g id="viewport">
                 <rect class='background' x='0' y='0' width='1000' height='500'></rect>
             </g>
         </svg>
     </svg>
 </div>
-<div class="tooltip" style='width:1000px; height:300px'>
-    <pre></pre>
+
+<div id="info-container">
+    <div class="row" style='height:300px; min-height: 200px;'>
+        <div class="column left" style="width: 600px; min-width: 100px;">
+            <div id="info-left"><pre></pre></div>
+        </div>
+        <div class="splitter vertical">
+            <div class="inner"></div>
+        </div>
+        <div class="column right" style="width: 380px; min-width: 100px;">
+            <div id="info-right"><pre></pre></div>
+        </div>
+    </div>
+
+    <div class="row splitter horizontal">
+        <div class="inner"></div>
+    </div>
 </div>
 
 <script type="application/dart" src="main.dart"></script>

diff --git a/web/main.dart b/web/main.dart
@@ -9,7 +9,52 @@ void main() {
   querySelector('#path-to-json').onKeyUp.listen(pathToJsonHander);
   querySelector('#path-button').onMouseUp.listen(buttonPressHandler);
 
-  var panZoom = new panzoom.SvgPanZoom.selector('.inner');
+  querySelectorAll('.splitter').forEach((Element element) {
+    bool vertical = element.classes.contains('vertical');
+    bool horizontal = element.classes.contains('horizontal');
+
+    element.onMouseDown.listen((MouseEvent e) {
+      if (e.which != 1) {
+        return;
+      }
+
+      e.preventDefault();
+      Point offset = e.offset;
+
+      StreamSubscription moveSubscription, upSubscription;
+      Function cancel = () {
+        if (moveSubscription != null) {
+          moveSubscription.cancel();
+        }
+        if (upSubscription != null) {
+          upSubscription.cancel();
+        }
+      };
+
+      moveSubscription = document.onMouseMove.listen((e) {
+        List neighbors = element.parent.children;
+        Element target = neighbors[neighbors.indexOf(element) - 1];
+
+        if (e.which != 1) {
+          cancel();
+        } else {
+          Point current = e.client - element.parent.client.topLeft - offset;
+          current -= target.marginEdge.topLeft;
+          if (vertical) {
+            target.style.width = '${current.x}px';
+          } else if (horizontal) {
+            target.style.height = '${current.y}px';
+          }
+        }
+      });
+
+      upSubscription = document.onMouseUp.listen((e) {
+        cancel();
+      });
+    });
+  });
+
+  var panZoom = new panzoom.SvgPanZoom.selector('.inner-svg');
   panZoom
     ..zoomEnabled = true
     ..panEnabled = true
@@ -34,7 +79,7 @@ void _loadData() {
 }
 
 void displayData(List data) {
-  svg.SvgSvgElement innerSvg = querySelector('.inner');
+  svg.SvgSvgElement innerSvg = querySelector('.inner-svg');
   svg.GElement group = innerSvg.querySelector('#viewport');
   group.nodes.clear();
 
@@ -64,7 +109,8 @@ void displayData(List data) {
     maxY = dataPoint['point'][1] > maxY ? dataPoint['point'][1] : maxY;
   }
 
-  svg.CircleElement _createDataCircle(Map dataPoint, num radius, String colour, [num opacityOverride]) {
+  svg.CircleElement _createDataCircle(Map dataPoint, num radius, String colour,
+      [num opacityOverride]) {
     svg.CircleElement point = new svg.CircleElement();
     point.attributes = {
       'cx': '${dataPoint['point'][0] - minX.toInt()}',
@@ -79,7 +125,6 @@ void displayData(List data) {
     return point;
   }
 
-
   for (Map dataPoint in data) {
     // Color can be an int (the format of the image package for Dart)
     // or a (hex) string.
@@ -100,23 +145,19 @@ void displayData(List data) {
     aura.style.pointerEvents = "None";
     group.append(aura);
 
-
     // Create the circle element
     var point = _createDataCircle(dataPoint, 1, color);
 
     point.onMouseOver.listen((MouseEvent event) {
-      DivElement tooltip = querySelector('.tooltip');
+      DivElement tooltip = querySelector('#info-left');
       PreElement preElement = tooltip.querySelector('pre');
       prettyString(dataPoint).then((String text) => preElement.text = text);
     });
 
     group.append(point);
   }
 
-
-
-
-// Create a background rect and insert it before the points.
+  // Create a background rect and insert it before the points.
   svg.RectElement rect = new svg.RectElement();
   rect.attributes = {
     'x': '0',
@@ -127,15 +168,15 @@ void displayData(List data) {
   rect.classes.add('background');
   group.nodes.insert(0, rect);
 
-// Adjust the viewport on the parent svg element.
+  // Adjust the viewport on the parent svg element.
   innerSvg.viewport.width = (maxX - minX).toInt();
   innerSvg.viewport.height = (maxY - minY).toInt();
 }
 
 Future prettyString(Map map) async {
   StringBuffer result = new StringBuffer();
   for (String key in map.keys) {
-      result.writeln('$key : ${map[key]}');
+    result.writeln('$key : ${map[key]}');
   }
   if (map.containsKey('uri')) {
     String response = await HttpRequest.getString(map['uri']);

diff --git a/web/styles/main.css b/web/styles/main.css
@@ -8,18 +8,92 @@ html, body {
   font-family: 'Roboto', sans-serif;
 }
 
-.visualisation-container,
-.tooltip {
+#path-selector,
+#visualisation-container,
+#info-container {
   margin: 10px auto 10px auto;
-  border: 1px solid #999;
+  width: 1000px;
 }
 
-#path-selector {
-  margin: 10px auto 10px auto;
-  width: 1000px;
+#visualisation-container {
+  border: 1px solid #999999;
+}
+
+#info-container {
+  display: flex;
+  flex-direction: column;
+}
+
+#info-container .row {
+  display: flex;
+  flex-direction: row;
+}
+
+#info-container .column {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #999999;
+  box-shadow: inset 0 0 7px #999999;
+}
+
+#info-container .column.right {
+  flex: 2;
+}
+
+#info-left {
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+
+#info-left pre {
+  margin: 1em;
+}
+
+.splitter {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.splitter.vertical {
+  width: 20px;
+  cursor: col-resize;
+}
+
+.splitter.horizontal {
+  height: 20px;
+  cursor: row-resize;
+}
+
+.splitter .inner {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.splitter.vertical .inner {
+  width: 2px;
+  height: 20px;
+  border-left: 1px solid #999999;
+  border-right: 1px solid #999999;
+}
+
+.splitter.horizontal .inner {
+  width: 20px;
+  height: 2px;
+  border-top: 1px solid #999999;
+  border-bottom: 1px solid #999999;
+}
+
+.inner {
+  position: absolute;
+  pointer-events: none;
 }
 
 .background {
-  fill: #FFF;
+  fill: #FFFFFF;
 }