Merge pull request #15 from CSIRO-enviro-informatics/feat-graphviz-to…

…oltips enable tooltips on graphviz
CSIRO-enviro-informatics · Feb 13, 2020 · 9080f9e · 9080f9e
2 parents 66e31b5 + e7887d0
commit 9080f9e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 35 deletions.
diff --git a/src/App.css b/src/App.css
@@ -90,20 +90,6 @@ span.logo {
   color: white;
 }
 
-.search-result-block {
-  padding-top: 5px;
-  padding-bottom: 10px;
-}
-
-.search-result-label {
-  font-style: oblique;
-
-}
-
-.search-result-label:hover  {
-  color: blue;
-  font-weight: 500;
-}
 
 
 /* D3 stuff */
@@ -116,9 +102,11 @@ span.logo {
 
 .graphtooltip {
   position: absolute;
-  background-color: blue;
+  background-color: #b6dbff;
   padding: 10px;
   z-index:10000;
+  border-radius: 5px;
+
 }
 
 .nodes circle {
@@ -193,4 +181,29 @@ circle.contain{
 
 .summaryResultTitle {
   padding-bottom: 10px;
-}
+}
+
+.search-result-block {
+  padding-top: 5px;
+  padding-bottom: 20px;
+}
+
+.search-result-label {
+  font-style: oblique;
+  font-weight: 600;
+}
+
+.search-result-view {  
+}
+
+.search-result-view:hover  {
+  color: blue;
+  font-weight: 500;
+}
+
+.search-result-links {
+  padding-top: 2px;
+}
+.search-result-links .btn-toolbar > *  {
+  margin-right: 5px;
+}
diff --git a/src/components/FindByPointGraphVisualiser.js b/src/components/FindByPointGraphVisualiser.js
@@ -50,12 +50,13 @@ export default class FindByPointGraphVisualiser extends Component {
       }))
       .on("dblclick.zoom", null);
 
-      
+
       //Creating tooltip
-      //const tooltip = d3.select('.graphcontainer')
-      //  .append('div')
-       // .attr('class', 'graphtooltip')
-       // .html('Tooltip');
+      const tooltip = d3.select('.graphcontainer')
+        .append('div')
+        .attr('class', 'graphtooltip')
+        .style('opacity', 0)
+        .html('Tooltip');
 
       const graphconsole = d3.select('.graphconsole');
 
@@ -87,9 +88,6 @@ export default class FindByPointGraphVisualiser extends Component {
         if (!d3.event.active) simulation.alphaTarget(0);
         d.fx = null;
         d.fy = null;
-
-
-
       }
 
       //Creating links
@@ -130,7 +128,7 @@ export default class FindByPointGraphVisualiser extends Component {
            .on('start', dragStart)
            .on('drag', drag)
            .on('end', dragEnd)
-        ).on('mouseover', d => {
+        ).on('mouseover', (d,i) => {
           console.log(d.label);
           console.log(d.name);
           console.log(d3.event.pageX);
@@ -142,14 +140,16 @@ export default class FindByPointGraphVisualiser extends Component {
               return d.label
             }
             );
-          //tooltip.html(d.label)
-          //  .style('left', d3.event.pageX - 1000 +'px')
-          //  .style('top', d3.event.pageY  + 'px')
-          //  .style('opacity', .9);
-        }).on('mouseout', () => {
-        //  tooltip.style('opacity', 0)
-        //    .style('left', '0px')
-        //    .style('top', '0px');
+
+          tooltip.html(d.label)
+            .style('left', (d.x + 20)  +'px')
+            .style('top', (d.y + 40 )  + 'px')
+            .style('opacity', .9);
+        }).on('mouseout', (d,i) => {
+          tooltip.style('opacity', 0)
+            .style('left', '0px')
+            .style('top', '0px');
+          //d3.select("#t" + d.x + "-" + d.y + "-" + i).remove();  // Remove text location
 
         }).on('dblclick',d => {
           d3.event.preventDefault();

diff --git a/src/components/SearchResultWidget.js b/src/components/SearchResultWidget.js
@@ -10,6 +10,7 @@ import Row from "react-bootstrap/Row";
 import InputGroup from "react-bootstrap/InputGroup";
 import FormControl from "react-bootstrap/FormControl";
 import Button from "react-bootstrap/Button";
+import ButtonToolbar from "react-bootstrap/ButtonToolbar";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -114,8 +115,13 @@ export default class SearchResultWidget extends Component {
       if(this.state.queryResults) {
         hits = this.state.queryResults.hits.hits.map((item,key) => (
                   <div className="search-result-block" key={item._source.label}> 
-                    <div className="search-result-label" onClick={() => this.run_callback(item)}>{item._source.label} </div>
-                    <div className="search-uri"> Loc-I ID: <a href={item._source.uri} target='other'>{item._source.uri}</a></div>
+                    <div className="search-result-label">{item._source.label} &nbsp; </div>
+                    <div className="search-result-links"> 
+                        <ButtonToolbar>
+                          <Button variant="outline-primary" size="sm" onClick={() => this.run_callback(item)}>View in Loc-I Explorer</Button>
+                          <Button variant="outline-primary" size="sm" href={item._source.uri} target='other'>Loc-I ID</Button>
+                        </ButtonToolbar>
+                    </div>
                   </div>
                 )
               );