Skip to content

Commit 58a8262

Browse files
nielsdejongnielsdejong
committed
Finalized map view
1 parent efd63b4 commit 58a8262

File tree

6 files changed

+107
-32
lines changed

6 files changed

+107
-32
lines changed

‎public/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ code {
107107
margin-left: -4px;
108108
margin-top: -6px;
109109
-webkit-text-stroke-width: 1.5px;
110-
-webkit-text-stroke-color: #666;
110+
-webkit-text-stroke-color: #777;
111111
}
112112
.tabs .disabled {
113113
width: auto !important;

‎src/NeoDash.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -630,8 +630,7 @@ class NeoDash extends React.Component {
630630

631631
}
632632
// Special case 3: we're dealing with someone clicking the 'Get in touch' button.
633-
if (content === "If you have questions about NeoDash, or want to build a production grade Neo4j front-end: " +
634-
"reach out to Niels at [email protected].") {
633+
if (content.startsWith("If you have questions about NeoDash")) {
635634
header = "Contact"
636635
}
637636
return {content, header, style};
@@ -828,8 +827,8 @@ class NeoDash extends React.Component {
828827
* Action to take place after 'get in touch' is clicked in the connection modal.
829828
*/
830829
onGetInTouchClicked() {
831-
let value = "If you have questions about NeoDash, or want to build a production grade Neo4j front-end: " +
832-
"reach out to Niels at [email protected].";
830+
let value = "If you have questions about NeoDash, or need help building a production grade Neo4j front-end: " +
831+
"reach out to me at [email protected].";
833832
return e => this.stateChanged({
834833
label: "CreateError",
835834
value: value

‎src/card/NeoCard.js‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ export class NeoCard extends React.Component {
5454
constructor(props) {
5555
super(props);
5656
this.stateChanged = this.stateChanged.bind(this);
57-
this.updateGraphChips = this.updateGraphChips.bind(this);
57+
this.updateGraphFooter = this.updateGraphFooter.bind(this);
58+
this.updateMapFooter = this.updateMapFooter.bind(this);
5859
this.onSelectionChange = this.onSelectionChange.bind(this);
5960
this.resize = this.resize.bind(this);
6061
this.updateBarPropertySelect = this.updateBarPropertySelect.bind(this);
@@ -362,7 +363,7 @@ export class NeoCard extends React.Component {
362363
params={this.state.parsedParameters}
363364
clientWidth={(this.cardRef.current) ? this.cardRef.current.clientWidth : 0}
364365
propertiesSelected={this.state.propertiesSelected}
365-
onNodeLabelUpdate={this.updateGraphChips}
366+
onNodeLabelUpdate={this.updateGraphFooter}
366367
width={this.state.width}
367368
id={this.props.id}
368369
height={this.state.height}
@@ -396,13 +397,13 @@ export class NeoCard extends React.Component {
396397
connection={this.props.connection}
397398
query={this.state.query}
398399
width={this.state.width}
400+
onNodeLabelUpdate={this.updateMapFooter}
399401
height={this.state.height}
400402
clientWidth={(this.cardRef.current) ? this.cardRef.current.clientWidth : 0}
401403
params={this.state.parsedParameters}
402404
data={this.state.data}
403405
stateChanged={this.stateChanged}
404406
refresh={this.state.refresh}/>
405-
this.state.action = <NeoMapFooter page={this.state.page} key={0} data={this.state.data} onChange={this.stateChanged}/>
406407
}
407408

408409
/**
@@ -552,7 +553,26 @@ RETURN DISTINCT n.\`${property}\` as value LIMIT 4`;
552553
/**
553554
* For graph visualizations - update the card footer to show the new nodes.
554555
*/
555-
updateGraphChips(labels) {
556+
updateMapFooter(labels) {
557+
this.state.properties = Object.values(labels);
558+
if (this.state.labels.toString() !== Object.keys(labels).toString()) {
559+
this.state.labels = Object.keys(labels);
560+
this.stateChanged({label: "Refresh"})
561+
}
562+
563+
564+
this.state.action = <NeoMapFooter key={0} nodeLabels={Object.keys(labels)}
565+
width={this.props.width}
566+
params={this.state.parsedParameters}
567+
568+
onChange={this.stateChanged}/>;
569+
570+
}
571+
572+
/**
573+
* For graph visualizations - update the card footer to show the new nodes.
574+
*/
575+
updateGraphFooter(labels) {
556576
this.state.properties = Object.values(labels);
557577
if (this.state.labels.toString() !== Object.keys(labels).toString()) {
558578
this.state.propertiesSelected = Object.keys(labels).map(l => {

‎src/card/footer/NeoMapFooter.js‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,60 @@
11
import React from "react";
2+
import Chip from "react-materialize/lib/Chip";
3+
import Icon from "react-materialize/lib/Icon";
4+
import NeoButton from "../../component/NeoButton";
5+
import NeoOptionSelect from "../../component/NeoOptionSelect";
26
import NeoFooter from "./NeoFooter";
37

8+
/**
9+
* A graph visualization footer displays the node labels present in the visualization.
10+
* When clicking on a label, the rendered property name on the node can be changed.
11+
*/
412
class NeoMapFooter extends NeoFooter {
13+
/**
14+
* Set default state of the footer.
15+
*/
516
constructor(props) {
617
super(props);
18+
this.state = {}
719
}
820

21+
22+
/**
23+
* Draw the footer (with chips) based on selected values.
24+
*/
925
render() {
10-
return (<p>I'm a footer</p>);
26+
let colors = ["#588c7e", "#f2e394", "#f2ae72", "#d96459", "#5b9aa0", "#d6d4e0",
27+
"#b8a9c9", "#622569", "#ddd5af", "#d9ad7c", "#a2836e", "#674d3c", "grey"]
28+
let parsedParameters = this.props.params;
29+
if (parsedParameters && parsedParameters.nodeColors) {
30+
if (typeof (parsedParameters.nodeColors) === 'string') {
31+
colors = [parsedParameters.nodeColors]
32+
} else {
33+
colors = parsedParameters.nodeColors
34+
}
35+
}
36+
return (
37+
<div style={{marginLeft: '10px'}}>
38+
{this.props.nodeLabels.map((label, index) => {
39+
return <Chip
40+
key={index}
41+
close={false}
42+
closeIcon={<Icon className="close">close</Icon>}
43+
options={null}
44+
style={{
45+
backgroundColor: colors[index % colors.length],
46+
color: 'white'
47+
}}
48+
>
49+
{label}
50+
</Chip>
51+
52+
})}
53+
54+
</div>
55+
);
1156
}
57+
1258
}
1359

1460
export default (NeoMapFooter);

‎src/card/report/NeoMapReport.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ class NeoMapReport extends NeoReport {
131131
});
132132

133133
this.state.nodeLabels = Object.keys(nodeLabels)
134+
this.props.onNodeLabelUpdate(nodeLabels)
134135
}
135136

136137
extractGeocoordsFromNode(recordField, nodeLabels) {
@@ -184,6 +185,16 @@ class NeoMapReport extends NeoReport {
184185
*/
185186
createMapVisualization() {
186187
let colors = ["#588c7e", "#f2e394", "#f2ae72", "#d96459", "#5b9aa0", "#d6d4e0", "#b8a9c9", "#622569", "#ddd5af", "#d9ad7c", "#a2836e", "#674d3c", "grey"]
188+
let parsedParameters = this.props.params;
189+
if (parsedParameters && parsedParameters.nodeColors) {
190+
if (typeof (parsedParameters.nodeColors) === 'string') {
191+
colors = [parsedParameters.nodeColors]
192+
} else {
193+
colors = parsedParameters.nodeColors
194+
}
195+
}
196+
197+
187198
let nodesAndPositionsValues = Object.values(this.state.nodesAndPositions);
188199
let relationshipsAndPositionsValues = Object.values(this.state.relationshipsAndPositions);
189200
let markers = nodesAndPositionsValues ?
@@ -196,7 +207,7 @@ class NeoMapReport extends NeoReport {
196207
</Marker>) : <div></div>
197208
let lines = (relationshipsAndPositionsValues) ?
198209
relationshipsAndPositionsValues.map(i =>
199-
<Polyline width="5" key={0} positions={[i.start, i.end]} color={"grey"}>
210+
<Polyline width="5" key={0} positions={[i.start, i.end]} color={"#999"}>
200211
{this.createPopupFromRelProperties(i)}
201212
</Polyline>
202213
) : <div></div>

‎src/data/beer_dashboard.json‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -39,52 +39,51 @@
3939
"refresh": 0
4040
},
4141
{
42-
"title": "Beers",
42+
"title": "Breweries and beers in selected country",
4343
"width": 8,
4444
"height": 4,
4545
"type": "table",
46-
"query": "MATCH p=(bb:Beer)--(b:Brewery)\nWHERE b.country = $neodash_brewery_country\nRETURN b.name as Brewery, p as Relationship, collect(bb.name) as Beer",
47-
"page": 1,
48-
"properties": [],
49-
"parameters": "",
50-
"refresh": 0
51-
},
52-
{
53-
"title": "Breweries",
54-
"width": 8,
55-
"height": 4,
56-
"type": "map",
57-
"query": "MATCH p=(b:Brewery)--(x)\nWHERE b.country = $neodash_brewery_country\nRETURN p",
58-
"page": 1,
46+
"query": "MATCH p=(bb:Beer)--(b:Brewery)\nWHERE b.country = $neodash_brewery_country\nRETURN b.name as Brewery, p as Relationship, collect(bb.name) as Beer\n",
47+
"page": 2,
5948
"properties": [],
60-
"parameters": "",
49+
"parameters": "{\"nodeColor\":\"steelblue\"}",
6150
"refresh": 0
6251
},
6352
{
6453
"title": "Graph View",
6554
"width": 4,
6655
"height": 4,
6756
"type": "graph",
68-
"query": "MATCH p=(b:Brewery)--(x)\nWHERE b.country = $neodash_brewery_country\nRETURN p",
69-
"page": 8,
57+
"query": "MATCH p=(b:Brewery)--(x)\nWHERE (x:Beer or x:Brewery) AND b.country = $neodash_brewery_country\nRETURN p\n",
58+
"page": 206,
7059
"properties": [
7160
"name",
7261
"name",
73-
"country",
7462
"name"
7563
],
76-
"parameters": "",
64+
"parameters": " {\"nodeColors\":[ \"#f2e394\",\"#588c7e\", \"#f2ae72\"]}",
7765
"refresh": 0
7866
},
7967
{
80-
"title": "Beer Strengths",
68+
"title": "Beers by Strength",
8169
"width": 4,
8270
"height": 4,
8371
"type": "bar",
8472
"query": "MATCH (b:Brewery)--(bb:Beer)\nWHERE b.country = $neodash_brewery_country\nRETURN bb.name as Beer, bb.abv as Strength\nORDER By Strength ASC SKIP 1 LIMIT 10 ",
8573
"page": 204,
8674
"properties": [],
87-
"parameters": "{\"color\":\"#f2e394\"}",
75+
"parameters": "",
76+
"refresh": 0
77+
},
78+
{
79+
"title": "Breweries Map",
80+
"width": 4,
81+
"height": 4,
82+
"type": "map",
83+
"query": "MATCH p=(b:Brewery)--(x)\nWHERE b.country = $neodash_brewery_country\nRETURN p \n",
84+
"page": 32,
85+
"properties": [],
86+
"parameters": " {\"nodeColors\":[ \"#f2e394\", \"#f2ae72\"]}",
8887
"refresh": 0
8988
},
9089
{}

0 commit comments

Comments
 (0)