Merge pull request #5 from neo-technology/feature/graph-editing-inter…

…face

Improved graph visualization with editing and exploration

package.json

@@ -63,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/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/view/CardView.tsx

@@ -30,6 +30,7 @@ const NeoCardView = ({
   dashboardSettings,
   settings,
   updateReportSetting,
+  createNotification,
   settingsOpen,
   editable,
   onGlobalParameterUpdate,
@@ -169,6 +170,7 @@ const NeoCardView = ({
           setGlobalParameter={onGlobalParameterUpdate}
           getGlobalParameter={getGlobalParameter}
           updateReportSetting={updateReportSetting}
+          createNotification={createNotification}
           queryTimeLimit={dashboardSettings.queryTimeLimit ? dashboardSettings.queryTimeLimit : 20}
           setFields={onFieldsUpdate}
         />

src/chart/Chart.ts

@@ -1,7 +1,9 @@
 import { Record as Neo4jRecord } from 'neo4j-driver';
 
-// Interface for all charts that NeoDash can render.
-// When you extend NeoDash, make sure that your component implements this interface.
+/**
+ * Interface for all charts that NeoDash can render.
+ * When you extend NeoDash, make sure that your component implements this interface.
+ */
 export interface ChartProps {
   records: Neo4jRecord[]; // Query output, Neo4j records as returned from the driver.
   extensions?: Record<string, any>; // A dictionary of enabled extensions.
@@ -10,8 +12,19 @@ export interface ChartProps {
   dimensions?: Record<string, number>; // a dictionary 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.
   parameters?: Record<string, any>; // A dictionary with the global dashboard parameters.
-  queryCallback: (query: string | undefined, parameters: Record<string, any>, setRecords: any) => void; // Callback to query the database with a given set of parameters. Calls 'setReccords' upon completion.
+  queryCallback?: (query: string | undefined, parameters: Record<string, any>, setRecords: any) => void; // Callback to query the database with a given set of parameters. Calls 'setReccords' upon completion.
+  createNotification?: (title: string, message: string) => void; // Callback to create a notification that overlays the entire application.
   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.
   updateReportSetting?: (name, value) => void; // Callback to update a setting for this report.
+  fields: (fields) => string[]; // List of fields (return values) available for the report.
+  setFields?: (fields) => void; // Update the list of fields for this report.
+}
+
+/**
+ * A simplified schema of the Neo4j database.
+ */
+export interface Neo4jSchema {
+  nodeLabels: string[]; // list of node labels.
+  relationshipTypes: string[]; // list of relationship types.
 }

src/chart/SettingsUtils.ts

@@ -0,0 +1,35 @@
+import { extensionEnabled, getReportTypes } from '../extensions/ExtensionUtils';
+import { useStyleRules } from '../extensions/styling/StyleRuleEvaluator';
+
+/**
+ * Gets the user specified settings and merges it with the defaults from ReportConfig.tsx.
+ * @param userSettings the user specified settings for the report.
+ * @param extensions the extensions enabled for the dashboard.
+ * @param getGlobalParameter a callback to get global parameters for the dashboard.
+ * @returns  a merged list of user settings and defaults as provided in the configuration.
+ */
+export const getSettings = (
+  userSettings: Record<string, any> | undefined,
+  extensions: Record<string, any> | undefined,
+  getGlobalParameter: any
+) => {
+  const settings: Record<string, any> = {};
+  const config: Record<string, any> = getReportTypes(extensions).graph.settings;
+
+  if (userSettings == undefined) {
+    return {};
+  }
+
+  Object.keys(config).map((key) => {
+    settings[key] = userSettings[key] !== undefined ? userSettings[key] : config[key].default;
+  });
+
+  settings.styleRules = useStyleRules(
+    extensionEnabled(extensions, 'styling'),
+    userSettings && userSettings.styleRules,
+    getGlobalParameter
+  );
+  settings.actionsRules =
+    extensionEnabled(extensions, 'actions') && settings && userSettings.actionsRules ? userSettings.actionsRules : [];
+  return settings;
+};