2 | 
3 |
10 |
11 | A Neo4J Desktop (React-based) application to visualize nodes with geographical attributes on a map.
12 |
13 |
14 | ## This project is not maintained anymore
15 | Looking for map with Neo4j? Check out the [neodash](https://github.com/neo4j-labs/neodash) project.
16 |
17 | ## Installation
18 |
19 | ### Add the app to Neo4jDesktop
20 |
21 | #### From NPM package URL (Recommended)
22 |
23 | 1. Open neo4j desktop and go to "Graph Applications" view:
24 |
25 | 
26 |
27 | 2. Paste the following link in the text input:
28 |
29 | https://registry.npmjs.org/neomap
30 |
31 | #### From tarball
32 |
33 | 1. Go to the repository [releases](https://github.com/stellasia/neomap/releases)
34 | 2. Download the `neomap-
3 | neomap
4 |
5 | 
6 | 
7 | 
8 |
103 |
112 |
116 | );
117 | });
118 |
--------------------------------------------------------------------------------
/src/components/ColorPicker.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import reactCSS from "reactcss";
3 | import { SketchPicker } from "react-color";
4 |
5 | export const ColorPicker = React.memo(({ color, handleColorChange }) => {
6 | const [displayColorPicker, setDisplayColorPicker] = React.useState(false);
7 |
8 | const handleClick = () => {
9 | setDisplayColorPicker(!displayColorPicker);
10 | };
11 |
12 | const handleClose = () => {
13 | setDisplayColorPicker(false);
14 | };
15 |
16 | const selectColor = (proposedColor) => {
17 | handleColorChange(proposedColor.rgb);
18 | };
19 |
20 | const selectedColor = color || { r: 0, g: 0, b: 255, a: 1 };
21 | let rgba_color = `rgba(${selectedColor.r}, ${selectedColor.g}, ${selectedColor.b}, ${selectedColor.a})`;
22 |
23 | const styles = reactCSS({
24 | default: {
25 | color: {
26 | padding: "5px",
27 | width: "50px",
28 | height: "20px",
29 | background: rgba_color,
30 | },
31 | swatch: {
32 | marginLeft: "10px",
33 | display: "inline-block",
34 | cursor: "pointer",
35 | },
36 | popover: {
37 | position: "absolute",
38 | zIndex: "2",
39 | bottom: "110px",
40 | left: "100px",
41 | },
42 | cover: {
43 | position: "fixed",
44 | bottom: "10px",
45 | left: "0px",
46 | },
47 | },
48 | });
49 |
50 | return (
51 |
113 |
114 |
115 |
52 |
62 | );
63 | });
64 |
--------------------------------------------------------------------------------
/src/components/ColorPicker.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render, cleanup } from "@testing-library/react";
3 | import { ColorPicker } from "./ColorPicker";
4 |
5 | describe("ColorPicker tests", () => {
6 | it("renders the color picker", () => {
7 | const picker = render(
53 |
54 |
55 | {displayColorPicker ? (
56 |
57 |
58 |
60 | ) : null}
61 |
534 |
535 | Spatial layer
536 |
544 |
545 |
550 | Tooltip property
551 |
559 |
560 |
561 | );
562 | }
563 |
564 | renderConfigCypher() {
565 | /*If layerType==cypher, then we display the CypherEditor
566 | */
567 | if (this.state.layerType !== LAYER_TYPE_CYPHER) return "";
568 | return (
569 | 573 | Checkout{" "} 574 | 575 | the documentation 576 | {" "} 577 | (Ctrl+SPACE for autocomplete) 578 |
579 |580 | Be careful, the browser can only display a limited number of nodes (less than a few 10000) 581 |
582 |
592 |
593 | Node label(s)
594 |
602 |
603 |
604 |
605 | Point property
606 |
614 |
615 |
616 |
621 | Tooltip property
622 |
630 |
631 |
632 |
633 | Max. nodes
634 |
643 |
644 | );
645 | }
646 |
647 | getDefaultLatProperty() {
648 | const propName = localStorage.getItem("default_lat") || "lat";
649 | return { value: propName, label: propName };
650 | }
651 |
652 | getDefaultLonProperty() {
653 | const propName = localStorage.getItem("default_lon") || "lon";
654 | return { value: propName, label: propName };
655 | }
656 |
657 | renderConfigDefault() {
658 | /*If layerType==latlon, then we display the elements to choose
659 | node labels and properties to be used.
660 | */
661 | const { rendering, layerType, relationshipLabels, relationshipLabel, propertyNames, relationshipTooltipProperty } =
662 | this.state;
663 | if (layerType !== LAYER_TYPE_LATLON) return "";
664 |
665 | return (
666 |
667 |
668 | Node label(s)
669 |
677 |
678 |
679 | Relationship type(s)
680 |
688 |
689 |
690 | Latitude property
691 |
699 |
700 |
701 |
702 | Longitude property
703 |
711 |
712 |
713 |
718 | Tooltip property
719 |
727 |
728 |
733 | Relationship Tooltip property
734 |
742 |
743 |
744 |
745 | Max. nodes
746 |
755 |
756 | );
757 | }
758 |
759 | render() {
760 | const { rendering, layerType, color, relationshipColor } = this.state;
761 | const colorString = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
762 | const relColorString = `rgba(${relationshipColor.r}, ${relationshipColor.g}, ${relationshipColor.b}, ${relationshipColor.a})`;
763 |
764 | return (
765 | 768 | {this.state.name} 769 | ({this.state.ukey}) 770 | 779 |
780 |{layer.name}
,
19 | };
20 | });
21 |
22 | // TODO: Define specs and add unit tests
23 | describe("SideBar tests", () => {
24 | it("always renders one create new layer", () => {
25 | const { container: sidebar, getByText } = render(
26 |