2.1.2 Release (#152)

## NeoDash 2.1.2
The 2.1.2 release contains some bug fixes and minor improvements to the application.

Application changes:
- Added button to clone (duplicate) a report inside a dashboard.
- Added option to show/hide labels inside circle packing charts.
- Changed dashboard layout compaction strategy to be more natural.
- Fixed card headers not rendering correctly in read-only mode.
- Fixed rendering issues for table columns containing null values.

Operational changes:
- Added support for username/password environment variables in Docker.

Author: nielsdejong

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,25 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+## Guidelines
+Please note that GitHub issues are only meant for bug reports/feature requests. 
+
+
+Before creating a new issue, please check whether someone else has raised the same issue. You may be able to add context to that issue instead of duplicating the report. However, each issue should also only be focussed on a _single_ problem, so do not describe new problems within an existing thread - these are very hard to track and manage, and your problem may be ignored. Finally, do not append comments to closed issues; if the same problem re-occurs, open a new issue, and include a link to the old one.
+
+To help us understand your issue, please specify important details, primarily:
+
+- NeoDash version: X.Y.Z
+- Neo4j Database version: X.Y.Z (Community/Enterprise/Aura).
+
+- **Steps to reproduce**
+- Expected behavior
+- Actual behavior
+
+Additionally, include (as appropriate) screenshots, drawings, etc.

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,25 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: feature
+assignees: ''
+
+---
+
+## Guidelines
+Please note that GitHub issues are only meant for bug reports/feature requests.
+
+## Feature request template
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/master-deployment.yml

@@ -71,7 +71,7 @@ jobs:
       context: .
       file: ./Dockerfile
       push: true
-      tags: ${{ secrets.DOCKER_HUB_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_USERNAME }}/neodash:2.1
+      tags: ${{ secrets.DOCKER_HUB_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_USERNAME }}/neodash:2.1.2
  build-npm:
    needs: build-test
    runs-on: ubuntu-latest
@@ -87,6 +87,7 @@ jobs:
    - run: rm -rf docs
    - run: npm install
    - run: npm run-script build
+   - run: curl ${{ secrets.INDEX_HTML_DEPLOYMENT_URL }} > dist/index.html
    - run: npm pack
    - run: rm -rf target
    - run: mkdir target

Dockerfile

@@ -6,7 +6,7 @@ WORKDIR /usr/local/src/neodash
 
 # Pull source code if you have not cloned the repository
 #RUN apk add --no-cache git
-#RUN git clone https://github.com/nielsdejong/neodash.git /usr/local/src/neodash
+#RUN git clone https://github.com/neo4j-labs/neodash.git /usr/local/src/neodash
 
 # Copy sources and install/build
 COPY ./package.json /usr/local/src/neodash/package.json
@@ -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.1.1"
+LABEL version="2.1.2"

README.md

@@ -20,18 +20,20 @@ docker run -it --rm -p 5005:5005 nielsdejong/neodash
 
 > Windows users may need to prefix the `docker run` command with `winpty`.
 
-See the [Developer Guide](https://github.com/nielsdejong/neodash/wiki/Developer%20Guide) for more on installing, building, and running the application.
+See the [Developer Guide](https://github.com/neo4j-labs/neodash/wiki/Developer%20Guide) for more on installing, building, and running the application.
 
 ## User Guide
 NeoDash comes with built-in examples of dashboards and reports. For more details on the types of reports and how to customize them, see the [User Guide](
-https://github.com/nielsdejong/neodash/wiki/User-Guide).
+https://github.com/neo4j-labs/neodash/wiki/User-Guide).
 
 ## Publish Dashboards
-After building a dashboard, you can chose to deploy a read-only, standalone instance for users. See [Publishing](https://github.com/nielsdejong/neodash/wiki/Publishing) for more on publishing dashboards.
+After building a dashboard, you can chose to deploy a read-only, standalone instance for users. See [Publishing](https://github.com/neo4j-labs/neodash/wiki/Publishing) for more on publishing dashboards.
 
 
 ## Questions / Suggestions
-If you have any questions about NeoDash, please reach out to the maintainers. For feature requests, consider opening an issue on GitHub.
-
+If you have any questions about NeoDash, please reach out to the maintainers:
+- Create an [Issue](https://github.com/nielsdejong/neodash/issues/new) on GitHub for feature requests/bugs.
+- Connect with us on the [Neo4j Discord](https://neo4j.com/developer/discord/).
+- Create a post on the Neo4j [Community Forum](https://community.neo4j.com/).
 
 > NeoDash is a free and open-source tool developed by the Neo4j community - not an official Neo4j product. If you have a need for a commercial agreement around training, custom extensions or other services, please contact the [Neo4j Professional Services](https://neo4j.com/professional-services/) team.

changelog.md

@@ -15,8 +15,8 @@ Main updates:
 
 Other changes:
 - Added continuous integration and deployment workflows.
-- Created a new [User Guide](https://github.com/nielsdejong/neodash/wiki/User-Guide) with documentation on all report customizations is available.
-- Added a new [Developer Guide](https://github.com/nielsdejong/neodash/wiki/Developer-Guide) with info on installing, building and extending the application.
+- Created a new [User Guide](https://github.com/neo4j-labs/neodash/wiki/User-Guide) with documentation on all report customizations is available.
+- Added a new [Developer Guide](https://github.com/neo4j-labs/neodash/wiki/Developer-Guide) with info on installing, building and extending the application.
 
 
 ## NeoDash 2.0.15

cypress/integration/start_page.spec.js

@@ -166,7 +166,7 @@ describe('NeoDash E2E Tests', () => {
     })
 
     // Test load stress-test dashboard from file
-    it.only('test load dashboard from file and stress test report customizations', () => {
+    it('test load dashboard from file and stress test report customizations', () => {
         try {
             var NUMBER_OF_PAGES_IN_STRESS_TEST_DASHBOARD = 5;
             const file = cy.request(loadDashboardURL).should((response) => {

docs/Adding-Visualizations.adoc

@@ -0,0 +1,95 @@
+You can extend NeoDash with your own visualizations without diving deep
+into the core application. Likewise, adding a new customization to an
+existing report requires minimal changes.
+
+== Add a Visualization
+
+You can add a new chart to NeoDash in three steps:
+
+[arabic]
+. Make sure you have a local copy of NeoDash installed and running:
+
+....
+git clone git@github.com:nielsdejong/neodash.git
+git checkout develop
+npm install
+npm run dev
+....
+
+[arabic, start=2]
+. Create a new file `src/charts/ABCChart.tsx`. In here, add a new object
+that implements the `ChartProps` interface:
+
+....
+export interface ChartProps {
+   records: Neo4jRecord[]; // Query output, Neo4j records as returned from the driver.
+   selection?: Record<string, any>; // A dictionary with the selection made in the report footer.
+   settings?: Record<string, any>; // A dictionary with the 'advanced settings' specified through the NeoDash interface.
+   dimensions?: Number[]; // a 2D array with the dimensions of the report (likely not needed, charts automatically fill up space).
+   fullscreen?: boolean; // flag indicating whether the report is rendered in a fullscreen view.
+   queryCallback?: (query: string, parameters: Record<string, any>, records: Neo4jRecord[]) => null; // Optionally, a way for the report to read more data from Neo4j.
+   setGlobalParameter?: (name: string, value: string) => void; // Allows a chart to update a global dashboard parameter to be used in Cypher queries for other reports.
+   getGlobalParameter?: (name) => string; // Allows a chart to get a global dashboard parameter.
+}
+....
+
+Note that the only mandatory property is `records`. This contains a list
+of
+https://neo4j.com/docs/api/javascript-driver/current/class/lib6/record.js~Record.html[records]
+returned from the Cypher query specified by the user.
+
+For inspiration, below is a basic example of a component that renders
+all returned data as a list:
+
+....
+import React from 'react';
+import { ChartProps } from './Chart';
+import { renderValueByType } from '../report/ReportRecordProcessing';
+
+const NeoListReport = (props: ChartProps) => {
+   const records = props.records;
+   return records.map(r => {
+       return <div>{
+           r["_fields"].map(value => {
+               return <>{renderValueByType(value)},</>
+           })}
+       </div>
+   })
+}
+
+export default NeoListReport;
+....
+
+[arabic, start=3]
+. Make your component selectable. Now that you’ve created a new chart
+type, you need to tell the card settings window that it can be chosen by
+a user.
+
+To accomplish this, open `config/ReportConfig.tsx`. Add a new entry to
+the `REPORT_TYPES` dictionary:
+
+....
+export const REPORT_TYPES = {
+   ...
+   "list": {
+       label: "List",
+       helperText: "I'm a list",
+       component: NeoListReport,
+       maxRecords: 10,
+       settings: {}
+   },
+   ...
+}
+....
+
+Inspect the other entries for examples of the fields that each entry can
+have. Restart the application, and you should be able to select your new
+chart type. Finally, *Cypress* can be used to develop an end-to-end test
+for your component in a matter of minutes. See Testing for more on
+Cypress testing.
+
+____
+After you added a visualization or a new customization, consider
+contributing it to the NeoDash project by creating a
+https://github.com/nielsdejong/neodash/pulls[Pull Request].
+____

docs/Bar-Chart.adoc

@@ -0,0 +1,99 @@
+A bar chart will draw categories and values in a familiar bar-layout.
+The bar chart will require you to choose the following selections:
+
+* *Category*: a text field. These will be the labels on the bars.
+* *Value*: a numeric field. This will be the height of the bars.
+* *Group*: Optionally, a second textual field. When ``Grouping'' is
+enabled in the advanced settings, the group can be used to draw a
+stacked bar chart, with several groups per category.
+
+== Examples
+
+=== Simple Bar Chart
+
+[source,cypher]
+----
+MATCH (p:Person)-[e]->(m:Movie)
+RETURN m.title as Title, COUNT(p) as People
+----
+
+image::./img/bar.png[Basic Table]
+
+=== Stacked Bar Chart
+
+[source,cypher]
+----
+Match (n:Person)-[e]->(m:Movie)
+RETURN m.title, COUNT(p) as People, type(e) as Role
+----
+
+image::./img/barstacked.png[Basic Table]
+
+== Advanced Settings
+
+[width="100%",cols="19%,17%,26%,38%",options="header",]
+|===
+|Name |Type |Default Value |Description
+|Show Legend |on/off |off |If enabled, shows a legend at the top right
+of the visualization.
+
+|Grouping |on/off |off |If enabled, lets users specify a third, grouping
+field. This is used to distinguish between different groups in the
+stacked bar chart.
+
+|Value Scale |List |linear |When set to symlog, uses a Symmetric
+logarithmic scale instead of the default linear scale.
+
+|Min Value |Number |auto |If not set to ``auto'', this variable is
+minimum value for the bar chart.
+
+|Max Value |Number |auto |If not set to ``auto'', this variable is the
+maximum value for the bar chart.
+
+|Group Mode |List |stacked |This setting determines how different groups
+are visualized when grouping is enabled. If set to stacked, different
+groups of the same category are stacked on top of each other. If set to
+grouped, they are placed alongside each other.
+
+|Layout |List |vertical |Whether to use a vertical or horizontal bar
+chart layout.
+
+|Color Scheme |List | |The color scheme to use for the category groups.
+Colors are assigned automatically (consequitevely) to the different
+groups returned by the Cypher query.
+
+|Show Values on Bars |on/off |off |If enabled, shows the category value
+inside the respective bar.
+
+|Label Rotation (degrees) |number |45 |the angle at which the bar labels
+are rotated.
+
+|Margin Left (px) |number |50 |The margin in pixels on the left side of
+the visualization.
+
+|Margin Right (px) |number |24 |The margin in pixels on the right side
+of the visualization.
+
+|Margin Top (px) |number |24 |The margin in pixels on the top side of
+the visualization.
+
+|Margin Bottom (px) |number |40 |The margin in pixels on the bottom side
+of the visualization.
+
+|Legend Width (px) |number |128 |The width in pixels of each legend
+label on top of the visualization (if enabled).
+
+|Hide Selections |on/off |off |If enabled, hides the property selector
+(footer of the visualization).
+
+|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.
+|===
+
+== Rule-Based Styling
+
+Using the link:Reports#rule-based-styling[Rule-Based Styling] menu, the
+following style rules can be applied to the bar chart: 
+
+- The color of the bar.

docs/Bloom-Integration.adoc

@@ -0,0 +1,25 @@
+NeoDash can be linked to Neo4j Bloom perspectives by using
+https://neo4j.com/docs/bloom-user-guide/current/bloom-tutorial/deep-links/[Bloom
+Deep Links]. This functionality allows you to combine the power of graph
+reporting (NeoDash) with intuitive graph exploration (Bloom).
+
+== Bloom Deep-Linking
+
+To link NeoDash to a Bloom perspective, you will need to: 
+
+1. Create a Neo4j Bloom https://neo4j.com/docs/bloom-user-guide/current/bloom-perspectives/bloom-perspectives/[perspective].
+2. Define a https://neo4j.com/docs/bloom-user-guide/current/bloom-tutorial/search-phrases-advanced/[Bloom
+Search Phrase] for the perspective. 
+3. Generate a https://neo4j.com/docs/bloom-user-guide/current/bloom-tutorial/deep-links/#_server_hosted_bloom[Deep
+Link] for your perspective and respective search phrase. This requires
+that you have a
+https://neo4j.com/docs/bloom-user-guide/current/bloom-installation/installation-activation/#installing-server-plugin[Server-hosted
+Bloom installation] running. 
+
+4. Use the deep link you created in either:
+- an iFrame Report (optionally passing in the dashboard parameters into
+the search phrase). 
+- a Graph Report (Adding your deep link inside the
+`Drilldown Link' field under advanced settings):
+
+image::./img/graphdrilldown.png[Graph Drilldown]