Fixed footer for graph viz cards

Author: nielsdejong

public/style.css

@@ -95,6 +95,7 @@ code {
     margin-right: 15px;
 }
 .leaflet-marker-icon {
+    margin-left: -13px !important;
     width: 25px !important;
     height: 30px !important;
 }
@@ -103,7 +104,7 @@ code {
 }
 .leaflet-marker-icon .material-icons {
     font-size: 34px;
-    margin-left: 33px;
+    margin-left: -4px;
     margin-top: -6px;
     -webkit-text-stroke-width: 1.5px;
     -webkit-text-stroke-color: #666;
@@ -159,8 +160,8 @@ code {
     margin-bottom: 150px;
 }
 .card-action {
+    clip: rect(-2000px 2000px 150px 5px);
     max-height: 150px;
-    overflow-y: scroll;
 }
 .btn-center-align :hover {
     opacity: 0.7;
@@ -348,6 +349,7 @@ nav textarea:disabled {
 
 .card-action .select-wrapper {
     width: 120px;
+
 }
 .tabs .tab a {
     padding: 0px;

src/card/NeoCard.js

@@ -402,8 +402,7 @@ export class NeoCard extends React.Component {
                 data={this.state.data}
                 stateChanged={this.stateChanged}
                 refresh={this.state.refresh}/>
-        this.state.action = emptyAction;
-            // <NeoMapFooter page={this.state.page} key={0} data={this.state.data} onChange={this.stateChanged}/>
+        this.state.action = <NeoMapFooter page={this.state.page} key={0} data={this.state.data} onChange={this.stateChanged}/>
     }
 
     /**

src/card/report/NeoMapReport.js

@@ -4,7 +4,7 @@ import {MapContainer, Polyline, Popup, TileLayer} from "react-leaflet";
 import Marker from 'react-leaflet-enhanced-marker';
 import Icon from "react-materialize/lib/Icon";
 
-class NeoTestReport extends NeoReport {
+class NeoMapReport extends NeoReport {
     // Per pixel, scaling factors for the latitude/longitude mapping function.
     widthScale = 3.35;
     heightScale = 6.7;
@@ -27,12 +27,25 @@ class NeoTestReport extends NeoReport {
         if (this.state.data) {
             this.state.data.forEach(record => {
                 Object.values(record).forEach(v => {
-                    if (v.identity && v.properties) {
-                        console.log(v)
+                    if (v.identity && v.properties && v.properties.latitude && v.properties.longitude )  {
+                        let lat = parseFloat(v.properties.latitude);
+                        let long = parseFloat(v.properties.longitude);
+                        if (!isNaN(lat) && !isNaN(long)){
+                            this.state.nodesAndPositions.push({pos: [lat, long], node: v})
+                        }
+                    }else if (v.identity && v.properties && v.properties.lat && v.properties.long )  {
+                        let lat = parseFloat(v.properties.lat);
+                        let long = parseFloat(v.properties.long);
+                        if (!isNaN(lat) && !isNaN(long)){
+                            this.state.nodesAndPositions.push({pos: [lat, long], node: v})
+                        }
+                    }else if (v.identity && v.properties) {
                         Object.values(v.properties).forEach(p => {
+                            // We found a property that holds a Neo4j point object
                             if (p.srid && p.x && p.y) {
-                                console.log([p.x, p.y])
-                                this.state.nodesAndPositions.push({pos: [p.y, p.x], node: v.properties})
+                                if (!isNaN(p.x) && !isNaN(p.y)) {
+                                    this.state.nodesAndPositions.push({pos: [p.y, p.x], node: v})
+                                }
                             }
                         })
                     }
@@ -80,8 +93,8 @@ class NeoTestReport extends NeoReport {
             this.state.nodesAndPositions.map(i =>
                 <Marker position={i.pos}
                         icon={<div style={{color: colors[0]}}><Icon className="close">place</Icon></div>}>
-                    <Popup><code>{Object.keys(i.node).map(key =>
-                        <pre>{key + ": " + i.node[key] + "\n"}</pre>)}</code></Popup>
+                    <Popup><h6>{i.node.labels.map(b => b + " ")}</h6><code>{Object.keys(i.node.properties).map(key =>
+                        <pre>{key + ": " + i.node.properties[key] + "\n"}</pre>)}</code></Popup>
                 </Marker>) : <div></div>
         let lines = <div></div>// [<Polyline key={0} positions={[this.state.pos1, this.state.pos2]} color={colors[0]}/>];
 
@@ -116,4 +129,4 @@ class NeoTestReport extends NeoReport {
     }
 }
 
-export default (NeoTestReport);
+export default (NeoMapReport);