Sync development from closed-source project repository

.github/workflows/develop-test.yml

@@ -31,4 +31,4 @@ jobs:
      with:
         build: yarn run build
         start: yarn run dev
-        wait-on: 'http://localhost:3000'
+        wait-on: 'http://localhost:3000'

.github/workflows/master-deployment.yml

@@ -79,7 +79,7 @@ jobs:
       context: .
       file: ./Dockerfile
       push: true
-      tags: ${{ secrets.DOCKER_HUB_LABS_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_LABS_USERNAME }}/neodash:2.2.3
+      tags: ${{ secrets.DOCKER_HUB_LABS_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_LABS_USERNAME }}/neodash:2.2.4
  build-docker-legacy:
    needs: build-test
    runs-on: ubuntu-latest
@@ -103,7 +103,7 @@ jobs:
       context: .
       file: ./Dockerfile
       push: true
-      tags: ${{ secrets.DOCKER_HUB_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_USERNAME }}/neodash:2.2.3
+      tags: ${{ secrets.DOCKER_HUB_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_USERNAME }}/neodash:2.2.4
 #  build-npm:
 #    needs: build-test
 #    runs-on: ubuntu-latest
@@ -170,4 +170,4 @@ jobs:
         with:
           token: ${{ secrets.DOCS_REFRESH_TOKEN }}
           repository: neo4j-documentation/docs-refresh
-          event-type: labs
+          event-type: labs

Dockerfile

@@ -38,4 +38,4 @@ RUN chown -R nginx:nginx /usr/share/nginx/html/
 USER nginx
 EXPOSE 5005
 HEALTHCHECK cmd curl --fail http://localhost:5005 || exit 1
-LABEL version="2.2.3"
+LABEL version="2.2.4"

LICENSE

@@ -198,4 +198,4 @@
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
-   limitations under the License.
+   limitations under the License.

cypress/integration/start_page.spec.js

@@ -23,13 +23,17 @@ describe('NeoDash E2E Tests', () => {
     // Navigate to index
     cy.visit('/');
     cy.wait(1000);
-    cy.get('#form-dialog-title').should('contain', 'NeoDash - Neo4j Dashboard Builder');
-    cy.wait(300);
 
-    // Create new dashboard
-    cy.contains('New Dashboard').click();
-    cy.wait(300);
+    cy.get('#form-dialog-title').then(($div) => {
+      const text = $div.text();
+      if (text == 'NeoDash - Neo4j Dashboard Builder⚡') {
+        cy.wait(300);
+        // Create new dashboard
+        cy.contains('New Dashboard').click();
+      }
+    });
 
+    cy.wait(300);
     // If an old dashboard exists in cache, do a check to make sure we clear it.
     // if (cy.contains("Create new dashboard")) {
     //     cy.contains('Yes').click()

docs/modules/ROOT/nav.adoc

@@ -11,11 +11,12 @@
 *** xref:user-guide/reports/line-chart.adoc[Line Chart]
 *** xref:user-guide/reports/sunburst.adoc[Sunburst]
 *** xref:user-guide/reports/circle-packing.adoc[Circle Packing]
+*** xref:user-guide/reports/choropleth.adoc[Choropleth]
+*** xref:user-guide/reports/areamap.adoc[Area Map]
 *** xref:user-guide/reports/treemap.adoc[Treemap]
 *** xref:user-guide/reports/radar.adoc[Radar Chart]
 *** xref:user-guide/reports/sankey.adoc[Sankey Chart]
 *** xref:user-guide/reports/map.adoc[Map]
-*** xref:user-guide/reports/choropleth.adoc[Choropleth]
 *** xref:user-guide/reports/single-value.adoc[Single Value]
 *** xref:user-guide/reports/gauge-chart.adoc[Gauge Chart]
 *** xref:user-guide/reports/raw-json.adoc[Raw JSON]

docs/modules/ROOT/pages/developer-guide/deploy-a-build.adoc

@@ -34,7 +34,7 @@ Depending on the webserver type and version, this could be different directory.
 As an example - to copy the files to an nginx webserver using `scp`:
 
 ```bash
-scp neodash-2.2.3 username@host:/usr/share/nginx/html
+scp neodash-2.2.4 username@host:/usr/share/nginx/html
 ```
 
 NeoDash should now be visible by visiting your (sub)domain in the browser.

docs/modules/ROOT/pages/user-guide/extensions/advanced-visualizations.adoc

@@ -9,7 +9,8 @@ The following visualizations are part of this extension:
 - A link:../../reports/sankey[Sankey Chart] to visualize flows.
 - Three charts to plot hierarchical data (link:../../reports/sunburst[Sunburst], link:../../reports/circle-packing[Circle Packing], link:../../reports/treemap[Treemap])
 - A link:../../reports/gauge-chart[Gauge Chart] to show percentages 
-- A link:../../reports/choropleth[Choropleth Map] to visualize numeric, country-data.
+- An link:../../reports/choropleth[Choropleth] to visualize numeric, country-data.
+- An link:../../reports/areamap[Area Map] to show an interactive world map, annotated with numeric country / region values.
 - A link:../../reports/radar[Radar Chart] to create a radial view of multiple categoric values.
 
 image::advanced-visualizations.png[Advanced Visualizations]

docs/modules/ROOT/pages/user-guide/reports/areamap.adoc

@@ -0,0 +1,60 @@
+= Area Map
+
+link:../../extensions/advanced-visualizations[label:Advanced Visualization[]]
+
+The Area Map charts can be used to render geographical based information on geoJson polygons. It's possible to click a polygon to visualize its regions and their related data.
+It takes two fields: 
+
+- *code*: String. This represents the country code or regional code that must be binded to the visualization. The map supports Alpha-3 and Alpha-2 country codes (by default Alpha-2). Instead the supported format for the region polygons is ISO 3166.
+- *value*:  Number. Cardinal data to be used on the chart.
+
+== Examples
+
+=== Basic Area Map
+
+
+[source,cypher]
+----
+MATCH (:Company{name:'NeoDash'})-[:HAS_DEPARTMENT]->(:Department)<-[:IN_DEPARTMENT]-(e:Employee),
+(e)-[:LIVES]->(city:City)-[:IN_COUNTRY]->(country:Country)
+WITH city, country
+CALL {
+    WITH country
+    RETURN country.countryCode as code, count(*) as value
+    UNION
+    WITH city
+    RETURN city.countryCode as code, count(*) as value
+}
+WITH code, sum(value) as totalCount
+RETURN code,totalCount
+----
+image::areamap-countries.png[Country Level Visualization]
+image::areamap-regions.png[Example of Drill Down inside a Country]
+
+== Advanced Settings
+
+[width="100%",cols="15%,2%,26%,57%",options="header",]
+|===
+|Name |Type |Default Value |Description
+|Map Provider URL|Text|https://\{s}.tile.openstreetmap.org/\{z}/\{x}/\{y}.png| When specified, overrides Open Street map provider with a custom map tiles provider.
+
+|Color Scheme |List | |The color scheme to use for the area map. Country colors
+will vary according their min to max ratio.
+
+|Country Code Format |List |Alpha-2 |Type of the country code (two/three letters).
+
+|Color Legend|on/off |on |Option to show color legend.
+
+|Drilldown Enabled |on/off |off |Enable map drilldown to visualize regional data.
+
+|Refreshable |on/off |off |Enables a refresh button for the report.
+
+|Fullscreen enabled |on/off |off |Enables a fullscreen view button for the report.
+
+|Download image enabled |on/off |off |Enables an image download button for the report.
+
+|Auto-run query |on/off |on |When activated, automatically runs the
+query when the report is displayed. When set to `off', the query is
+displayed and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
+|===

docs/modules/ROOT/pages/user-guide/reports/choropleth.adoc

@@ -66,4 +66,4 @@ the visualization on the y axis
 query when the report is displayed. When set to `off', the query is
 displayed and will need to be executed manually.
 |Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
-|===
+|===

docs/modules/ROOT/pages/user-guide/reports/graph.adoc

@@ -99,6 +99,10 @@ the main (force-directed) layout to one of the two experimental layouts
 (tree/radial). For the experimental layouts, make sure your graph is a
 DAG (directed acyclic graph).
 
+|Enable graph exploration |on/off |on |Enables basic exploration functionality for the graph. Exploration can be done by right clicking on a node, and choosing 'Expand' to choose a type to traverse. Data is retrieved real-time and not cached in the visualization.
+
+|Enable graph editing |on/off |off |Enables editing of nodes and relationships in the graph from the right-click context menu. In addition, lets users create new relationships with existing types/property keys as present in the database.
+
 |Show pop-up on Hover |on/off |on |if enabled, shows a pop-up when a
 user hovers over one of the nodes/relationships in the visualization.
 The pop-up contains the label and properties of the node/relationship.

docs/modules/ROOT/pages/user-guide/reports/index.adoc

@@ -99,6 +99,7 @@ pages:
 - link:radar[Radar Chart] 
 - link:map[Map]
 - link:choropleth[Choropleth Chart] 
+- link:areamap[Area Map] 
 - link:single-value[Single Value] 
 - link:sankey[Sankey Chart] 
 - link:gauge[Gauge Chart]

docs/modules/ROOT/pages/user-guide/reports/parameter-select.adoc

@@ -8,16 +8,17 @@ parameter (e.g. *$neodash_person_name*) dynamically. This means that
 your reports can be created to show different data depending on the
 value of a parameter.
 
-There are three types of parameter select reports: 
+There are four types of parameter select reports: 
 
 - Node property-based selections 
 - Relationship property-based selections 
 - Free text selections
+- Date picker selections
 
 The first two are straightforward for users to understand, as the list
 of choices is auto-populated from Neo4j. The third is a bit more
 complex, as it allows users to enter any text value, but, it gives them
-the complete freedom to enter any value they want.
+the complete freedom to enter any value they want. The final option lets users specify any date, which is then set as a Neo4j date object to be used in Cypher queries.
 
 == Examples
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "neodash",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "NeoDash - Neo4j Dashboard Builder",
   "neo4jDesktop": {
     "apiVersion": "^1.2.0"
@@ -28,7 +28,6 @@
     "format": "prettier --write \"**/*.{ts,tsx}\"",
     "lint": "eslint --ext .ts --ext .tsx .",
     "lint-staged": "lint-staged --config .lintstagedrc.json",
-    "prepare": "husky install",
     "test": "yarn cypress open",
     "test-headless": "yarn cypress run"
   },
@@ -64,6 +63,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "material-ui-color-picker": "^3.5.1",
+    "mui-nested-menu": "^3.2.0",
     "neo4j-client-sso": "^1.2.2",
     "react": "^17.0.2",
     "react-cool-dimensions": "^2.0.7",

src/application/ApplicationReducer.ts

@@ -2,6 +2,7 @@
  * Reducers define changes to the application state when a given action is taken.
  */
 
+import { DEFAULT_NEO4J_URL } from '../config/ApplicationConfig';
 import {
   CLEAR_DESKTOP_CONNECTION_PROPERTIES,
   CLEAR_NOTIFICATION,
@@ -36,7 +37,7 @@ const initialState = {
   aboutModalOpen: false,
   connection: {
     protocol: 'neo4j',
-    url: 'localhost',
+    url: DEFAULT_NEO4J_URL,
     port: '7687',
     database: '',
     username: 'neo4j',

src/application/ApplicationSelectors.ts

@@ -29,6 +29,10 @@ export const applicationGetConnection = (state: any) => {
   return state.application.connection;
 };
 
+export const applicationGetConnectionDatabase = (state: any) => {
+  return state.application.connection.database;
+};
+
 export const applicationGetShareDetails = (state: any) => {
   return state.application.shareDetails;
 };

src/application/ApplicationThunks.ts

@@ -1,5 +1,6 @@
 import { createDriver } from 'use-neo4j';
 import { initializeSSO } from '../component/sso/SSOUtils';
+import { DEFAULT_SCREEN, Screens } from '../config/ApplicationConfig';
 import { setDashboard } from '../dashboard/DashboardActions';
 import { NEODASH_VERSION } from '../dashboard/DashboardReducer';
 import {
@@ -491,7 +492,13 @@ export const initializeApplicationAsEditorThunk = (_, paramsToSetAfterConnecting
     dispatch(setParametersToLoadAfterConnecting(null));
   }
 
-  dispatch(setWelcomeScreenOpen(true));
+  // Check config to determine which screen is shown by default.
+  if (DEFAULT_SCREEN == Screens.CONNECTION_MODAL) {
+    dispatch(setWelcomeScreenOpen(false));
+    dispatch(setConnectionModalOpen(true));
+  } else if (DEFAULT_SCREEN == Screens.WELCOME_SCREEN) {
+    dispatch(setWelcomeScreenOpen(true));
+  }
 
   if (clearNotificationAfterLoad) {
     dispatch(clearNotification());

src/card/Card.tsx

@@ -30,6 +30,7 @@ import { loadDatabaseListFromNeo4jThunk } from '../dashboard/DashboardThunks';
 import { Neo4jContext, Neo4jContextState } from 'use-neo4j/dist/neo4j.context';
 import { getDashboardExtensions } from '../dashboard/DashboardSelectors';
 import { downloadComponentAsImage } from '../chart/ChartUtils';
+import { createNotificationThunk } from '../page/PageThunks';
 
 const NeoCard = ({
   index, // index of the card.
@@ -53,6 +54,7 @@ const NeoCard = ({
   onToggleReportSettings, // action to take when the report settings (advanced settings) button is clicked.
   onDatabaseChanged, // action to take when the user changes the database related to the card
   loadDatabaseListFromNeo4j, // Thunk to get the list of databases
+  createNotification, // Thunk to create a global notification pop-up.
 }) => {
   // Will be used to fetch the list of current databases
   const { driver } = useContext<Neo4jContextState>(Neo4jContext);
@@ -129,6 +131,7 @@ const NeoCard = ({
             extensions={extensions}
             settings={report.settings ? report.settings : {}}
             updateReportSetting={(name, value) => onReportSettingUpdate(index, name, value)}
+            createNotification={(title, message) => createNotification(title, message)}
             type={report.type}
             database={database}
             active={active}
@@ -260,6 +263,9 @@ const mapDispatchToProps = (dispatch) => ({
   onDatabaseChanged: (index: any, database: any) => {
     dispatch(updateReportDatabaseThunk(index, database));
   },
+  createNotification: (title: any, message: any) => {
+    dispatch(createNotificationThunk(title, message));
+  },
   loadDatabaseListFromNeo4j: (driver, callback) => dispatch(loadDatabaseListFromNeo4jThunk(driver, callback)),
 });
 

src/card/CardReducer.ts

@@ -98,7 +98,6 @@ export const cardReducer = (state = CARD_INITIAL_STATE, action: { type: any; pay
     case UPDATE_REPORT_SETTING: {
       const { setting, value } = payload;
       const settings = state.settings ? state.settings : {};
-
       // Javascript is amazing, so "" == 0. Instead we check if the string length is zero...
       if (value == undefined || value.toString().length == 0) {
         delete settings[setting];

src/card/CardThunks.ts

@@ -12,10 +12,10 @@ import {
   updateReportDatabase,
 } from './CardActions';
 import { createNotificationThunk } from '../page/PageThunks';
-import { DEFAULT_NODE_LABELS } from '../config/ReportConfig';
 import { getReportTypes } from '../extensions/ExtensionUtils';
 import isEqual from 'lodash.isequal';
 import { SELECTION_TYPES } from '../config/CardConfig';
+import { getSelectionBasedOnFields } from '../chart/ChartUtils';
 
 export const updateReportTitleThunk = (index, title) => (dispatch: any, getState: any) => {
   try {
@@ -113,24 +113,7 @@ export const updateFieldsThunk = (index, fields) => (dispatch: any, getState: an
             }
           } else if (selectableFields[selection].type == SELECTION_TYPES.NODE_PROPERTIES) {
             // For node property selections, select the most obvious properties of the node to display.
-            const selection = {};
-            fields.forEach((nodeLabelAndProperties) => {
-              const label = nodeLabelAndProperties[0];
-              const properties = nodeLabelAndProperties.slice(1);
-              let selectedProp = oldSelection[label] ? oldSelection[label] : undefined;
-              if (autoAssignSelectedProperties) {
-                DEFAULT_NODE_LABELS.forEach((prop) => {
-                  if (properties.indexOf(prop) !== -1) {
-                    if (selectedProp == undefined) {
-                      selectedProp = prop;
-                    }
-                  }
-                });
-                selection[label] = selectedProp ? selectedProp : '(label)';
-              } else {
-                selection[label] = selectedProp ? selectedProp : '(no label)';
-              }
-            });
+            const selection = getSelectionBasedOnFields(fields, oldSelection, autoAssignSelectedProperties);
             dispatch(updateAllSelections(pagenumber, index, selection));
           } else {
             // Else, default the selection to the Nth item of the result set fields.