Merge pull request #10 from marianamarasoiu/mariana_panels

Fix UI for panels displaying the info in each data point. Issue #6
marianamarasoiu · Aug 9, 2015 · aaa5d32 · aaa5d32
2 parents 99cc3a1 + 181dc45
commit aaa5d32
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 16 deletions.
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
@@ -15,7 +15,52 @@ void main() {
   querySelector('#path-to-json').onKeyUp.listen(pathToJsonHander);
   querySelector('#path-button').onMouseUp.listen(buttonPressHandler);
 
-  panZoom = new panzoom.SvgPanZoom.selector(visSelector);
+  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();
+      });
+    });
+  });
+
+  panZoom = new panzoom.SvgPanZoom.selector('.inner-svg');
   panZoom
     ..zoomEnabled = true
     ..panEnabled = true
@@ -42,8 +87,7 @@ void _loadData() {
 void displayData(List data) {
   // Before doing anything else, reset the viewport of the visualisation.
   resetVisualisation();
-
-  svg.SvgSvgElement innerSvg = querySelector(visSelector);
+  svg.SvgSvgElement innerSvg = querySelector('.inner-svg');
   svg.GElement group = innerSvg.querySelector('#viewport');
   group.nodes.clear();
 
@@ -113,7 +157,7 @@ void displayData(List data) {
     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);
     });

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;
 }