Feature/gantt chart (#684)

* Added forms skeleton * Completed form skeleton * WIP on forms interface * Form framework (data entry, running, success, error) added * Added comments * Adding fields specification interface * UI for specifying individual parameter in a form * changing Dockerfile to enable args during build * fixing typo on argument in dockerfile * reverting dockerfile to older version * Rendering parameters inside the form component * Added docs for forms. Improved stability on form * Fixed warnings in console * Finished IT test for forms report * Added package * added new field to disable a parameter selector (in this way it works only with actions) * Gantt Chart Visualization * Fixed issue where parameter values were not updated on external changes * Fixed styling on freetext spinner * Workaround for clipping menu selectors in Needle * fix(rule based styling): js doing is magic with parseFloat (some strings were casted to floats event if they were just strings starting with 0 * Added save button to form create UI * removing console logs * Fix for needle dropdowns not showing on modals * Sortable list for form parameters * Improving the drag 'n drop * Iterating on form interface * Final version of forms * Disabling test * Gantt chart with live data * Improved robustness of form / parameter select component * Improve Gantt chart customizability. Added report action for Gantt charts * Added wait-logic for form submission, so that all fields are debounced and set correctly * Added multiline support for freetext parameter selector * Added support for drilled-down parameters used in the forms component * Fixed issues with parameter selector/forms, improve usability * Added default advanced settings to form * hanging if orders to prevent wrong casting to number for certain edge cases (EX: string with numbers and E : 00E1304) * adding more options to gantt chart and adding variable calendar type * Prototype of Frappe Gantt implementation * Improved version of frappe gantt * work in progress on new gantt chart * Clean up code structure * Clean up and documenting Gantt chart * Gantt chart stability & arrow directions * Handling task dependency directions in Gantt chart * Improved styling * More optimization & style fixes. * Added docs for Gantt Chart * Added rule-based styling and actions to Gantt chart * Finalized Gantt chart docs, examples, and fallback date parsing * removing code smells * trying to plug quarter date format and cleaning code * cleaning code accordingly to SonarCloud * Fixed UI not populating correctly for rule-based styling and actions * Gantt - fixed default width/height for bars. Visible labels. Handling quarters * Updated label positions * Fixed inspect modal for Gantt chart, fixed arrow spacing between tasks * Fixed linting issues --------- Co-authored-by: Niels de Jong <niels-121@hotmail.com> Co-authored-by: Alfred Rubin <alfredo.rubin@neo4j.com>
neo4j-labs · nielsdejong · Nov 16, 2023 · Oct 10, 2023 · Oct 27, 2023 · Oct 27, 2023
commit fceb5f30cd8aa820771eb77cb1aa6bf500c3985f
diff --git a/cypress/e2e/start_page.cy.js b/cypress/e2e/start_page.cy.js
@@ -8,6 +8,7 @@ import {
   loadDashboardURL,
   sankeyChartCypherQuery,
   gaugeChartCypherQuery,
+  formCypherQuery,
 } from '../fixtures/cypher_queries';
 
 const WAITING_TIME = 20000;
@@ -244,13 +245,28 @@ describe('NeoDash E2E Tests', () => {
     cy.get('main .react-grid-item:eq(2) .MuiCardContent-root h1', { timeout: 45000 }).should('have.text', 'Hello');
   });
 
-  // it('creates a radar report', () => {
-  //     // TODO - create a test for radar.
-  // })
+  it.skip('creates a form report', () => {
+    enableFormsExtension();
+    checkInitialState();
+    createReportOfType('Form', formCypherQuery, true, false);
+    cy.get('main .react-grid-item:eq(2) .form-add-parameter').click();
+    cy.wait(200);
+    cy.get('#autocomplete-label-type').type('Movie');
+    cy.get('#autocomplete-label-type-option-0').click();
+    cy.wait(200);
+    cy.get('#autocomplete-property').type('title');
+    cy.get('#autocomplete-property-option-0').click();
 
-  // it('creates a sankey report', () => {
-  //     // TODO - create a test for sankey charts.
-  // })
+    cy.get('.ndl-dialog-close').click();
+
+    cy.get('main .react-grid-item:eq(2) button[aria-label="run"]').scrollIntoView().should('be.visible').click();
+    cy.wait(500);
+    cy.get('#autocomplete').type('The Matrix');
+    cy.get('#autocomplete-option-0').click();
+    cy.get('#form-submit').click();
+    cy.wait(500);
+    cy.get('.form-submitted-message').should('have.text', 'Form Submitted.Reset Form');
+  });
 
   // Test load stress-test dashboard from file
   // TODO - this test is flaky, especially in GitHub actions environment.
@@ -285,6 +301,14 @@ function enableAdvancedVisualizations() {
   cy.wait(200);
 }
 
+function enableFormsExtension() {
+  cy.get('main button[aria-label="Extensions').should('be.visible').click();
+  cy.get('#checkbox-forms').scrollIntoView();
+  cy.get('#checkbox-forms').should('be.visible').click();
+  cy.get('.ndl-dialog-close').scrollIntoView().should('be.visible').click();
+  cy.wait(200);
+}
+
 function selectReportOfType(type) {
   cy.get('main .react-grid-item button[aria-label="add report"]').should('be.visible').click();
   cy.get('main .react-grid-item')
@@ -298,7 +322,7 @@ function selectReportOfType(type) {
   cy.wait(100);
 }
 
-function createReportOfType(type, query, fast = false) {
+function createReportOfType(type, query, fast = false, run = true) {
   selectReportOfType(type);
   if (fast) {
     cy.get('main .react-grid-item:eq(2) .ReactCodeMirror').type(query, { delay: 1, parseSpecialCharSequences: false });
@@ -308,8 +332,9 @@ function createReportOfType(type, query, fast = false) {
   cy.wait(400);
 
   cy.get('main .react-grid-item:eq(2)').contains('Advanced settings').click();
-
-  cy.get('main .react-grid-item:eq(2) button[aria-label="run"]').click();
+  if (run) {
+    cy.get('main .react-grid-item:eq(2) button[aria-label="run"]').click();
+  }
 }
 
 function checkInitialState() {

diff --git a/cypress/fixtures/cypher_queries.js b/cypress/fixtures/cypher_queries.js
diff --git a/docs/modules/ROOT/images/createform.png b/docs/modules/ROOT/images/createform.png
diff --git a/docs/modules/ROOT/images/formbutton.png b/docs/modules/ROOT/images/formbutton.png
diff --git a/docs/modules/ROOT/images/forms.png b/docs/modules/ROOT/images/forms.png
diff --git a/docs/modules/ROOT/images/formselector.png b/docs/modules/ROOT/images/formselector.png
diff --git a/docs/modules/ROOT/images/formsimple.png b/docs/modules/ROOT/images/formsimple.png
diff --git a/docs/modules/ROOT/images/gantt.png b/docs/modules/ROOT/images/gantt.png
diff --git a/docs/modules/ROOT/nav.adoc b/docs/modules/ROOT/nav.adoc
@@ -16,11 +16,13 @@
 *** 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/gantt.adoc[Gantt Chart]
 *** xref:user-guide/reports/map.adoc[Map]
 *** 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]
 *** xref:user-guide/reports/parameter-select.adoc[Parameter Select]
+*** xref:user-guide/reports/form.adoc[Form]
 *** xref:user-guide/reports/iframe.adoc[iFrame]
 *** xref:user-guide/reports/markdown.adoc[Markdown]
 ** xref:user-guide/publishing.adoc[Publishing]
@@ -30,6 +32,7 @@
 *** xref:user-guide/extensions/rule-based-styling.adoc[Rule-Based Styling]
 *** xref:user-guide/extensions/report-actions.adoc[Report Actions]
 *** xref:user-guide/extensions/natural-language-queries.adoc[Natural Language Queries]
+*** xref:user-guide/extensions/forms.adoc[Forms]
 ** xref:user-guide/faq.adoc[FAQ]
 * xref:developer-guide/index.adoc[Developer Guide]
 ** xref:developer-guide/build-and-run.adoc[Build & Run]

diff --git a/docs/modules/ROOT/pages/user-guide/extensions/advanced-visualizations.adoc b/docs/modules/ROOT/pages/user-guide/extensions/advanced-visualizations.adoc
@@ -8,9 +8,10 @@ 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/gauge-chart[Gauge Chart] to show percentages.
 - 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/gantt[Gantt] chart to visualize dependencies between tasks. 
 - A link:../../reports/radar[Radar Chart] to create a radial view of multiple categoric values.
 
 image::advanced-visualizations.png[Advanced Visualizations]
diff --git a/docs/modules/ROOT/pages/user-guide/extensions/forms.adoc b/docs/modules/ROOT/pages/user-guide/extensions/forms.adoc
@@ -0,0 +1,13 @@
+= Forms
+
+The 'forms' extension lets you combine different parameter selectors to update / modify your graph data.
+Update queries are predefined by the dashboard builder, and the user is limited to specifying the parameters for the query only.
+
+See link:../../reports/form[Form] on how to create, configure, and use forms.
+
+> Keep in mind that data-altering forms require your Neo4j user to have **write-access** to the graph. Make sure you give access to a select group of power-users only.
+
+
+
+
+image::forms.png[Forms]
diff --git a/docs/modules/ROOT/pages/user-guide/extensions/index.adoc b/docs/modules/ROOT/pages/user-guide/extensions/index.adoc
@@ -18,6 +18,7 @@ The currently available extensions in NeoDash are:
 - link:rule-based-styling[Rule-based Styling]
 - link:report-actions[Report Actions]
 - link:natural-language-queries[Natural Language Queries]
+- link:forms[Forms]
 
 == Types of Extensions
 

diff --git a/docs/modules/ROOT/pages/user-guide/reports/form.adoc b/docs/modules/ROOT/pages/user-guide/reports/form.adoc
@@ -0,0 +1,73 @@
+= Form
+
+A form is a special type of report that lets users run predefined, parameterized queries.
+A single form can consist of:
+
+- Zero or more link:../parameter-select[parameter selectors].
+- A button that triggers submitting the form.
+
+When creating a form, you write the Cypher query that is called when the submit button is clicked.
+This query can then use the parameters specified as input. The image below provides an example of a form. On the left, the settings used to define the form, on the right, the final form as visible to the user.
+
+image::createform.png[Complex Form]
+
+
+== Examples
+
+=== Simple Button
+
+A form without parameters is a button that runs a specified query. 
+One or more buttons can be used to perform simple operations in the graph. 
+Below is an example of a simple button form. On submitting, the following query is executed:
+
+[source,cypher]
+----
+MERGE (c:Counter)
+SET c.count = c.count+1
+----
+
+image::formbutton.png[Button Form]
+
+=== A Parameter and a Button
+To create a form with dynamic input, use both a parameter and a button. 
+Below is an example of a form that deletes nodes from the graph. On submit, the following query is executed:
+
+[source,cypher]
+----
+MATCH (p:Person)
+WHERE p.name = $neodash_person_name
+DETACH DELETE p
+----
+
+image::formsimple.png[Simple Form]
+
+=== Parameters Only
+
+By hiding the submit button, a form can also be used as a space-efficient way to embed multiple parameter selectors.
+Disable `Has Submit Button` in the report's advanced settings, and add two or more parameter selectors to the form.
+
+image::formselector.png[Parameter-only Form]
+
+
+== Advanced Settings
+
+[width="100%",cols="19%,17%,26%,38%",options="header",]
+|===
+|Name |Type |Default Value |Description
+
+|Form Button Text |text |Submit |Text displayed on the button that submits the form.
+
+|Reset Button Text | text |Reset Form |Text displayed on the button that resets the form to data entry mode.
+
+|Confirmation Message | multiline text |Form submitted. |Text displayed to the user after the form is submitted successfully.
+
+|Has Submit Button |on/off |on | When enabled, lets the user submit the form with a button. Disabling turns the form into parameters-only mode.
+
+|Has Reset Button |on/off |on |When enabled, lets the user reset the form to enter more data. 
+
+|Has Submit Message |on/off |on |When enabled, the user to a seperate screen after submitting the form. Else, always stay in data-entry mode.
+
+|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. 
+
+
+|===
diff --git a/docs/modules/ROOT/pages/user-guide/reports/gantt.adoc b/docs/modules/ROOT/pages/user-guide/reports/gantt.adoc
@@ -0,0 +1,81 @@
+= Gantt Chart
+
+link:../../extensions/advanced-visualizations[label:Advanced&nbsp;Visualization[]]
+
+A Gantt chart can be used to visualize tasks on a timeline, as well as their dependencies.
+The NeoDash Gantt chart views your tasks are nodes in the graph, and your relationships are dependencies between them.
+
+To use the Sankey chart, nodes must have at least three properties on them:
+
+- A `startDate`
+- An `endDate`
+- A `title`
+
+In addition, different types of task dependencies can be visualized. The dependency must be stored as a property on a relationship, and can be one of four values:
+
+- `**SE**`: The dependency is from the **S**tart of the origin task, to the **E**nd of the next task.
+- `**SS**`: The dependency is from the **S**tart of the origin task, to the **S**start of the next task.
+- `**ES**`: The dependency is from the **E**nd of the origin task, to the **S**start of the next task.
+- `**EE**`: The dependency is from the **E**nd of the origin task, to the **E**nd of the next task.
+
+== Examples
+
+=== Gantt Chart
+Return nodes and relationships to be visualized in the chart.
+It is mandatory to specify the three node properties (start date, end date and title) in the report's advanced settings.
+
+[source,cypher]
+----
+MATCH (a:Activity)-[r:FOLLOWS]->(a2:Activity)
+RETURN a, r, a2
+----
+
+image::gantt.png[Gantt Chart]
+
+
+== Advanced Settings
+
+[width="100%",cols="15%,2%,6%,77%",options="header",]
+|===
+|Name |Type |Default Value |Description
+
+| Bar Color  | string  | '#a3a3ff' | Default color for the task bars (with no style rules applied.)
+
+| Task Label Property  | string  | 'activityName' | Node property to display on the task bar.
+
+| Task Start Date Property  | string  | 'startDate' | Node property to use as a start date for the task.
+
+| Task End Date Property  | string  | 'endDate' | Node property to use as an end date for the task.
+
+| Task Ordering Property  | string  | (auto) | Custom ordering of the tasks. Defaults to use the start date property.
+
+| Dependency Type Property  | string  | 'rel_type' | The relationship property that stores the dependency type. Property values must be one of `['SS', 'SE', 'ES', 'EE']`
+
+| View mode  | string  | 'auto' | Zoom level of the chart. one of `['auto', 'Half Day', 'Day', 'Week', 'Month', 'Year']`.
+
+|Margin Left (px) |number |24 |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.
+
+|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. 
+|===
+
+
+== Rule-Based Styling
+
+Using the link:../#_rule_based_styling[Rule-Based Styling] menu, the
+following style rules can be applied to the Gantt chart: 
+
+- The color of a task bar.
diff --git a/docs/modules/ROOT/pages/user-guide/reports/index.adoc b/docs/modules/ROOT/pages/user-guide/reports/index.adoc
@@ -102,8 +102,10 @@ pages:
 - link:areamap[Area Map] 
 - link:single-value[Single Value] 
 - link:sankey[Sankey Chart] 
+- link:gantt[Gantt Chart] 
 - link:gauge[Gauge Chart]
 - link:raw-json[Raw JSON] 
 - link:parameter-select[Parameter Select] 
+- link:form[Form] 
 - link:iframe[iFrame]
 - link:markdown[Markdown]
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "d3-scale-chromatic": "^3.0.0",
     "dayjs": "^1.11.7",
     "dom-to-image": "^2.6.0",
+    "gantt-task-react": "^0.3.9",
     "leaflet": "^1.7.1",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
@@ -117,6 +118,7 @@
     "@typescript-eslint/parser": "^5.42.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-istanbul": "^6.1.1",
+    "circular-dependency-plugin": "^5.2.2",
     "css-loader": "^3.6.0",
     "cypress": "^12.17.4",
     "eslint": "^8.26.0",
@@ -136,7 +138,6 @@
     "typescript": "^4.8.4",
     "webpack": "^5.77.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.3",
-    "circular-dependency-plugin": "^5.2.2"
+    "webpack-dev-server": "^4.7.3"
   }
 }
diff --git a/public/style.css b/public/style.css
@@ -239,4 +239,14 @@
   z-index: 99 !important;
   position: absolute;
 }
-/* End workaround */
+
+/* End workaround */
+
+/* Workaround for cleaning the Gantt chart UI */
+.gantt-wrapper > div > div:first-child > div:first-child > div:first-child > div> div:not(:first-child) {
+  display: none;
+}
+.gantt-wrapper > div > div > div > div> div>  div> div:not(:first-child)  {
+  display: none;
+}
+/* End Gantt chart workaround */
diff --git a/src/card/settings/CardSettingsFooter.tsx b/src/card/settings/CardSettingsFooter.tsx
@@ -17,11 +17,11 @@ const update = (state, mutations) => Object.assign({}, state, mutations);
 
 const NeoCardSettingsFooter = ({
   type,
-  fields,
-  schema,
+  fields = [],
+  schema = [],
   reportSettings,
   reportSettingsOpen,
-  extensions,
+  extensions = {},
   onToggleReportSettings,
   onReportSettingUpdate,
 }) => {

diff --git a/src/card/view/CardView.tsx b/src/card/view/CardView.tsx
@@ -62,7 +62,7 @@ const NeoCardView = ({
   // e.g. Change of query, type, some advanced settings...
   const [selectorChange, setSelectorChange] = useState(false);
 
-  const getLocalParameters = (parse_string): any => {
+  const getLocalParameters = (parse_string, drilldown = true): any => {
     if (!parse_string || !globalParameters) {
       return {};
     }
@@ -74,7 +74,18 @@ const NeoCardView = ({
     const styleRules = settings.styleRules ? settings.styleRules : [];
     const styleParams = extensionEnabled(extensions, 'styling') ? identifyStyleRuleParameters(styleRules) : [];
 
-    let localQueryVariables: string[] = [...styleParams];
+    // Similarly, if the forms extension is enabled, extract nested parameters used by parameter selectors inside the form.
+    const formFields = settings.formFields ? settings.formFields : [];
+    const formsParams =
+      drilldown && extensionEnabled(extensions, 'forms')
+        ? formFields
+            .map((f) => {
+              return Object.keys(getLocalParameters(f.query, false));
+            })
+            .flat()
+        : [];
+
+    let localQueryVariables: string[] = [...styleParams, ...formsParams];
     while ((match = re.exec(parse_string))) {
       localQueryVariables.push(match[1]);
     }