From 33ee61fdfe5e4c96af9817a8c3b75186fe9955c7 Mon Sep 17 00:00:00 2001
From: luigser <luigser@gmail.com>
Date: Mon, 16 Nov 2015 16:19:45 +0100
Subject: [PATCH] graph updates

---
 datalets/graph-datalet/graph-datalet.html        |  36 ++++++++++++++++++++++++++++++++++--
 datalets/graph-datalet/static/css/graphStyle.css | 136 +++-------------------------------------------------------------------------------------------------------------------------------------
 2 files changed, 37 insertions(+), 135 deletions(-)

diff --git a/datalets/graph-datalet/graph-datalet.html b/datalets/graph-datalet/graph-datalet.html
index 09b7625..593eb61 100644
--- a/datalets/graph-datalet/graph-datalet.html
+++ b/datalets/graph-datalet/graph-datalet.html
@@ -31,6 +31,7 @@
 
 <link rel="import" href="../base-datalet/base-datalet.html">
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
 
 <!--
 `preview-datalet` is a datalet that allow user to preview the content of a web page. It creates a thumbnail of the site using the data-url attribute passed as input.
@@ -54,12 +55,23 @@ Example:
 
         <style is="custom-style">
 
+            #dialog{
+                position: absolute;
+                padding: 20px;
+            }
+
         </style>
 
         <div style="align-content: center;" id="graph_content">
             <svg id="sbiricuda"></svg>
         </div>
 
+        <paper-dialog id="dialog">
+            <h2 id="dialog_title"></h2>
+            <paper-dialog-scrollable id="dialog_content">
+            </paper-dialog-scrollable>
+        </paper-dialog>
+
     </template>
 
     <script src="static/js/d3.v3.js"></script>
@@ -73,6 +85,7 @@ Example:
         height = undefined;
         svg    = undefined;
         _this  = null;
+        prev_selected_node = null;
 
         Polymer({
             is : 'graph-datalet',
@@ -137,6 +150,9 @@ Example:
                                                                                               .on("mouseout", this.mouseout)
                                                                                               .on("click", this.active)
                                                                                             .append("circle")
+                                                                                                .attr("id", function(t){
+                                                                                                   return t.id;
+                                                                                                })
                                                                                                 .attr("class", function (t) {
                                                                                                     return t.fixed ? "" : "drag"
                                                                                                 }).attr("r", function (t) {
@@ -200,9 +216,10 @@ Example:
             },
             mouseover : function (t) {
                 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
+                    //return 1 == t.fixed ? 1.4 * t.r : 15
                     return 1 == t.fixed ? 1.4 * t.r : 15
                 });
-                //$("#sbiricuda").html($("." + t.name.split(" ").join("_").toLowerCase()).html())
+
             },
 
             mouseout : function () {
@@ -212,8 +229,23 @@ Example:
             },
 
             active : function (t) {
-               /*t.fixed && openModal(t.name)*/
                _this.fire('graph-datalet_node-clicked', {node : t});
+
+                if(prev_selected_node != null){
+                    prev_selected_node.style.stroke = prev_selected_node.style.fill;
+                    prev_selected_node.style.fill = "";
+                }
+
+                prev_selected_node = document.getElementById("" + t.id);
+                prev_selected_node.style.fill   = prev_selected_node.style.stroke;
+                prev_selected_node.style.stroke = "#000000";
+
+               /* _this.$.dialog_title.innerHTML   = "Comment";
+                _this.$.dialog_content.innerHTML = t.name;
+                _this.$.dialog.style.top         = t.y + "px";
+                _this.$.dialog.style.left        = t.x + "px";
+
+               _this.$.dialog.open();*/
             },
 
             openModal : function(t) {
diff --git a/datalets/graph-datalet/static/css/graphStyle.css b/datalets/graph-datalet/static/css/graphStyle.css
index a84cecc..dd0faf0 100644
--- a/datalets/graph-datalet/static/css/graphStyle.css
+++ b/datalets/graph-datalet/static/css/graphStyle.css
@@ -37,10 +37,11 @@ g foreignObject {
 }
 
 g foreignObject div {
+    font-family: 'Roboto', sans-serif;
     display: inline-block;
-    font-size: 16px;
+    font-size: 12px;
     text-decoration: none;
-    padding: 4px
+    padding: 0px
 }
 
 g foreignObject a:hover {
@@ -48,37 +49,6 @@ g foreignObject a:hover {
     text-decoration: none
 }
 
-.modal-content {
-    border-radius: 0
-}
-
-#modal {
-    text-align: justify
-}
-
-#modal .modal-header {
-    text-align: center;
-    font-size: 25px;
-    color: #fff;
-    font-weight: 300;
-    background: #efefef
-}
-
-#modal .modal-title {
-    font-size: 25px;
-    color: #fff
-}
-
-.modal-body {
-    text-align: justify;
-    padding: 30px
-}
-
-#modal .close {
-    color: #fff;
-    opacity: .8
-}
-
 .r {
     color: #c82528
 }
@@ -125,104 +95,4 @@ span.n4 {
     font-size: .8em;
     padding-top: 10px;
     line-height: 1.3
-}
-
-.howto {
-    font-family: arial;
-    font-size: 19px;
-    background: #595a5a;
-    color: #fff;
-    width: 25px;
-    height: 25px;
-    display: block;
-    text-align: center;
-    border-radius: 50%
-}
-
-.howto_tooltip {
-    visibility: hidden;
-    color: #696969;
-    border: 1px solid #696969;
-    background: #fff;
-    display: inline-block;
-    width: 150px;
-    padding: 10px
-}
-
-.modal-footer {
-    display: none
-}
-
-.modal.fade:not(.in).bottom .modal-dialog {
-    -webkit-transform: translate3d(0, 25%, 0);
-    transform: translate3d(0, 25%, 0)
-}
-
-.modal-backdrop {
-    background-color: #fff
-}
-
-#credits {
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
-    font-size: 10px
-}
-
-#modal .modal-content.overview .modal-header {
-    background: #519c76
-}
-
-#modal .modal-content.cfp .modal-header {
-    background: #f69a43
-}
-
-#modal .modal-content.submission .modal-header {
-    background: #c82528
-}
-
-#modal .modal-content.organisation .modal-header {
-    background: #662d91
-}
-
-.deadlineext {
-    text-align: center;
-    width: 100%;
-    margin-top: -1em;
-    font-size: 120%;
-    border: 0 solid #f69a43;
-    padding: 0
-}
-
-.deadlineext hr {
-    border-width: 0;
-    border-top: 1px solid #f69a43;
-    margin: 3px
-}
-
-@media print {
-    #modal.fade {
-        display: block !important;
-        opacity: 1;
-        page-break-before: always
-    }
-
-    .modal {
-        position: static
-    }
-
-    .modal-footer, .modal-header .close {
-        display: none
-    }
-
-    .modal-content {
-        display: block !important;
-        border: 0;
-        box-shadow: none;
-        page-break-inside: avoid
-    }
-
-    .modal h4, .modal-header {
-        padding: 0
-    }
 }
\ No newline at end of file
--
libgit2 0.21.4