Merge pull request #46 from agentlab/issue-10-lazy-loading

GH-10 Lazy loading initial impl

.prettierrc.js

@@ -6,7 +6,7 @@ module.exports = {
   singleQuote: true,
   arrowParens: 'always',
   trailingComma: 'all',
-  jsxBracketSameLine: true,
+  bracketSameLine: true,
   jsxSingleQuote: true,
   endOfLine: 'lf',
   //quoteProps: 'consistent',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentlab/ldkg-ui-react",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "LDKG Forms UI Components",
   "license": "GPL-3.0",
   "author": "Alexey Ivanov <[email protected]>",
@@ -52,28 +52,28 @@
     "lint-staged": "lint-staged"
   },
   "peerDependencies": {
-    "@agentlab/sparql-jsld-client": ">=5.0.1",
+    "@agentlab/sparql-jsld-client": ">=5.0.3",
     "@ant-design/icons": ">=4.7.0",
     "@rdfjs/data-model": ">=1.3.4",
     "@tinymce/tinymce-react": ">=3.13.0",
     "antd": ">=4.16.13",
     "history": ">=5.1.0",
     "lodash-es": ">=4.17.21",
-    "mobx": ">=6.3.6",
+    "mobx": ">=6.3.7",
     "mobx-react-lite": ">=3.2.2",
-    "mobx-state-tree": ">=5.0.4",
+    "mobx-state-tree": ">=5.0.5",
     "moment": ">=2.29.1",
-    "rc-util": ">=5.14.0",
+    "rc-util": ">=5.15.0",
     "react": ">=17.0.2",
     "react-base-table": ">=1.13.0",
     "react-collapse-pane": ">=2.0.1",
     "react-dnd": ">=13.1.1",
     "react-dnd-html5-backend": ">=12.1.1",
     "react-dom": ">=17.0.2",
     "react-error-boundary": ">=3.1.4",
-    "react-horizontal-scrolling-menu": ">=2.5.1",
-    "react-router": ">=6.0.1",
-    "react-router-dom": ">=6.0.1",
+    "react-horizontal-scrolling-menu": ">=2.5.2",
+    "react-router": ">=6.0.2",
+    "react-router-dom": ">=6.0.2",
     "react-sortable-hoc": ">=2.0.0",
     "react-split-pane": ">=2.0.3",
     "react-virtualized": ">=9.22.3",
@@ -83,32 +83,32 @@
     "uuid62": ">=1.0.1"
   },
   "dependencies": {
-    "@agentlab/sparql-jsld-client": "^5.0.1",
+    "@agentlab/sparql-jsld-client": "^5.0.3",
     "@ant-design/icons": "^4.7.0",
     "@tinymce/tinymce-react": "^3.13.0",
-    "@types/react": "^17.0.34",
+    "@types/react": "^17.0.35",
     "@types/react-dom": "^17.0.11",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.2",
-    "@types/react-virtualized": "^9.21.14",
+    "@types/react-virtualized": "^9.21.15",
     "@types/styled-components": "^5.1.15",
     "@types/tinymce": "^4.6.4",
     "antd": "^4.16.13",
     "history": "^5.1.0",
     "mobx-react-lite": "^3.2.2",
-    "mst-middlewares": "^5.0.4",
+    "mst-middlewares": "^5.0.5",
     "react": "^17.0.2",
     "react-base-table": "^1.13.0",
     "react-collapse-pane": "^2.0.1",
     "react-dnd": "13.1.1",
     "react-dnd-html5-backend": "12.1.1",
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.4",
-    "react-horizontal-scrolling-menu": "^2.5.1",
+    "react-horizontal-scrolling-menu": "^2.5.2",
     "react-is": "^17.0.2",
     "react-redux": "^7.2.6",
-    "react-router": "^6.0.1",
-    "react-router-dom": "^6.0.1",
+    "react-router": "^6.0.2",
+    "react-router-dom": "^6.0.2",
     "react-sortable-hoc": "^2.0.0",
     "react-split-pane": "^2.0.3",
     "react-virtualized": "^9.22.3",
@@ -135,34 +135,34 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.2.3",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.10",
+    "cssnano": "^5.0.11",
     "cypress": "^8.7.0",
     "cypress-storybook": "^0.5.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-flowtype": "^6.1.1",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jest": "^25.2.4",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^7.0.4",
     "jest": "^27.3.1",
     "jest-watch-typeahead": "^1.0.0",
-    "lint-staged": "^11.2.6",
+    "lint-staged": "^12.0.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.11",
-    "prettier": "2.3.2",
+    "prettier": "2.4.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.59.0",
+    "rollup": "^2.60.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.1",

src/DispatchCell.tsx

@@ -36,6 +36,7 @@ export const DispatchCell: React.FC<DispatchCellProps> = React.memo(
     ...rest
   }) => {
     const { cells } = useContext(MstContext);
+    if (schema && schema.items) schema = { ...schema, ...schema.items };
     const renderer = maxBy(cells, (r) => r.tester(viewKindElement, schema));
     if (renderer === undefined || renderer.tester(viewKindElement, schema) === -1) {
       return (

src/Form.tsx

@@ -20,6 +20,7 @@ import { JsonSchema7 } from './models/jsonSchema7';
 //import ModalAntd from './antd/util/AntdModal';
 import { MstContext } from './MstContext';
 import { UnknownRenderer } from './UnknownRenderer';
+import { Actions } from './actions';
 import { RankedTester } from './testers';
 import { IViewDescr, IViewDescrElement, IViewKind, IViewKindElement } from './models/uischema';
 
@@ -59,7 +60,7 @@ export interface FormsDispatchProps {
 }
 export interface RenderProps extends FormsDispatchProps {
   viewDescrElement?: IViewDescrElement;
-
+  actions?: Actions;
   id: string;
   schema: JsonSchema7;
   readOnly?: boolean;
@@ -127,7 +128,7 @@ export const processViewKindOverride = (
 };
 
 export const FormsDispatch = observer<FormsDispatchProps>((props) => {
-  const { store, renderers } = useContext(MstContext);
+  const { store, renderers, actions } = useContext(MstContext);
   const { viewKind, viewDescr, form, enabled } = props;
 
   const [id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] = processViewKindOverride(
@@ -166,6 +167,7 @@ export const FormsDispatch = observer<FormsDispatchProps>((props) => {
           viewDescr={viewDescr}
           viewDescrElement={viewDescrElement}
           schema={schema}
+          actions={actions}
           enabled={enabled}
           form={form}
         />

src/MstContext.tsx

@@ -10,28 +10,33 @@
 import React, { createContext, PropsWithChildren } from 'react';
 import { CellRendererRegistryEntry, RendererRegistryEntry } from './renderers';
 import { registerMstViewDescrSchema, registerMstViewKindSchema } from './models/MstViewDescr';
+import { Actions } from './actions';
 
 export interface MstContextProps {
   store: any;
   renderers: RendererRegistryEntry[];
   cells: CellRendererRegistryEntry[];
+  actions: Actions;
 }
 
 export const MstContext = createContext<MstContextProps>({
   store: {},
   renderers: [],
   cells: [],
+  actions: {},
 });
 
 export const MstContextProvider = ({
   store,
   renderers,
   cells = [],
   children,
+  actions = {},
 }: PropsWithChildren<{
   store: any;
   renderers: RendererRegistryEntry[];
   cells?: CellRendererRegistryEntry[];
+  actions?: Actions;
 }>): JSX.Element => {
   renderers.forEach((r) => {
     const mstVkeType = (r as any).mstVkeType;
@@ -53,5 +58,5 @@ export const MstContextProvider = ({
       registerMstViewDescrSchema(mstVdeType, true);
     }
   });
-  return <MstContext.Provider value={{ store, renderers, cells }}>{children}</MstContext.Provider>;
+  return <MstContext.Provider value={{ store, renderers, cells, actions }}>{children}</MstContext.Provider>;
 };

src/actions/baseActions.ts

@@ -0,0 +1,32 @@
+import { ActionFunctionProps } from './types';
+import { getSnapshot, applySnapshot } from 'mobx-state-tree';
+
+export const addObjects = ({ root, coll, selection, options }: ActionFunctionProps) => {
+  console.log('SELECTION', selection);
+  //coll.testOnAddObjs([selection]);
+};
+
+export const addTreeObj = ({ root, coll, selection, options }: ActionFunctionProps) => {
+  const node = selection[0] as any;
+  const newObj = {
+    [node.titlePropName]: 'New node',
+    [node.parentKey]: node['@id'],
+  };
+  return coll.testOnAddObjs([newObj]);
+};
+export const deleteObjects = ({ root, coll, selection, options }: ActionFunctionProps) => {
+  coll.testOnDeleteObjs(selection.map((obj: any) => obj['@id']));
+};
+
+export const addConectionToTarget = ({ root, coll, selection, options }: ActionFunctionProps) => {
+  const target = options?.target;
+  if (target) {
+    const targetColl = root.getColl(target);
+    const targetData = targetColl?.data;
+    if (targetData) {
+      const snapData = getSnapshot(targetData) as any;
+      const newData = [...snapData, ...selection];
+      applySnapshot(targetData, newData);
+    }
+  }
+};

src/actions/constants.ts

@@ -0,0 +1 @@
+export const NoTitleProvided = 'No title provided';

src/actions/index.ts

@@ -0,0 +1,11 @@
+import { addObjects, deleteObjects, addConectionToTarget, addTreeObj } from './baseActions';
+import { Actions } from './types';
+export * from './types';
+export * from './utils';
+
+export const actions: Actions = {
+  'ldkg:addObjects': addObjects,
+  'ldkg:deleteObjects': deleteObjects,
+  'ldkg:addConectionToTarget': addConectionToTarget,
+  'ldkg:addTreeObj': addTreeObj,
+};

src/actions/types.ts

@@ -0,0 +1,8 @@
+export type ActionFunctionProps = {
+  root: any;
+  coll: any;
+  selection: unknown[];
+  options?: { [key: string]: unknown };
+};
+
+export type Actions = Partial<{ [key: string]: (args: ActionFunctionProps) => Promise<void> | void }>;

src/actions/utils.ts

@@ -0,0 +1,31 @@
+import { Actions } from './types';
+import { NoTitleProvided } from './constants';
+
+type MapViewKindPropsToActionsProps = {
+  actions: Actions;
+  viewKindActionProps?: { '@id': string; '@type': string; title?: string; options: { [key: string]: unknown } }[];
+  coll: unknown;
+  root: any;
+};
+
+type ReturnShape = {
+  title: string;
+  action: (selection: unknown[]) => Promise<void> | void;
+};
+export const mapViewKindPropsToActions = ({
+  actions,
+  viewKindActionProps,
+  coll,
+  root,
+}: MapViewKindPropsToActionsProps): ReturnShape[] | undefined =>
+  viewKindActionProps &&
+  viewKindActionProps.reduce((acc: ReturnShape[], props): ReturnShape[] => {
+    const actionType = props['@type'];
+    if (actionType in actions) {
+      acc.push({
+        title: props.title || NoTitleProvided,
+        action: (selection: unknown[]) => actions[actionType]?.({ coll, options: props.options, selection, root }),
+      });
+    }
+    return acc;
+  }, [] as ReturnShape[]);

src/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,42 @@
+/********************************************************************************
+ * Copyright (c) 2021 Agentlab and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the GNU General Public License v. 3.0 which is available at
+ * https://www.gnu.org/licenses/gpl-3.0.html.
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ ********************************************************************************/
+import React from 'react';
+import { JsObject } from '@agentlab/sparql-jsld-client';
+
+import './index.css';
+
+interface ContextMenuProps {
+  record: JsObject;
+  selection: any[];
+  visible: boolean;
+  x: number | string;
+  y: number | string;
+  actionsMap?: { title: string; action: (selection: unknown[]) => Promise<void> | void }[];
+  onClick: () => void;
+}
+
+export const ContextMenu: React.FC<ContextMenuProps> = ({ record, selection, visible, x, y, actionsMap, onClick }) => {
+  return (
+    (actionsMap && visible && (
+      <ul className='popup' style={{ left: `${x}px`, top: `${y}px`, position: 'fixed' }}>
+        {actionsMap.map(({ title, action }) => (
+          <li
+            onClick={() => {
+              action(selection);
+              onClick();
+            }}>
+            {title}
+          </li>
+        ))}
+      </ul>
+    )) ||
+    null
+  );
+};