ARGUS-23872 update dependencies

Merge in BIAP/act-frontend from ~ODINS/act-frontend:feature/ARGUS-23872-update-dependencies to master

Squashed commit of the following:

commit e759c1a74ee2c42d29324d530702aadfec155adb
Author: Odin Standal <odins@mnemonic.no>
Date:   Fri Jun 25 10:41:54 2021 +0200

    ARGUS-23872 Update dependencies

    - babel-loader is set to 8.1.0 even though storybook uses a newer version, see facebook/create-react-app#10123
    - reformat with prettier
    - bugfix: only close singleValueFilter when clicking outside
    - bugfix: fix cytoscape highlighting
    - bugfix: show WorkingHistory load progress when loading starts

.prettierignore

@@ -1,2 +1,3 @@
 *.json
-*.md
+*.md
+*.template

package.json

@@ -3,69 +3,63 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "4.11.0",
-    "@material-ui/icons": "4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.56",
-    "@mdi/svg": "5.8.55",
-    "@types/cytoscape": "3.14.8",
+    "@material-ui/core": "4.11.4",
+    "@material-ui/icons": "4.11.2",
+    "@material-ui/lab": "4.0.0-alpha.58",
+    "@mdi/svg": "5.9.55",
+    "@types/cytoscape": "3.14.15",
     "@types/d3": "5.7.2",
-    "@types/jest": "26.0.20",
-    "@types/lodash": "4.14.167",
-    "@types/node": "14.14.21",
-    "@types/react": "16.9.54",
+    "@types/jest": "26.0.23",
+    "@types/lodash": "4.14.170",
+    "@types/node": "15.12.4",
+    "@types/react": "17.0.11",
     "@types/react-autosuggest": "9.3.11",
-    "@types/react-dom": "16.9.9",
+    "@types/react-dom": "17.0.8",
     "autosuggest-highlight": "3.1.1",
     "clsx": "1.1.1",
-    "cytoscape": "3.16.0",
+    "cytoscape": "3.19.0",
     "cytoscape-cola": "2.4.0",
     "cytoscape-cose-bilkent": "4.1.0",
-    "cytoscape-dagre": "2.3.0",
+    "cytoscape-dagre": "2.3.2",
     "cytoscape-euler": "1.0.0",
-    "cytoscape-klay": "3.1.3",
+    "cytoscape-klay": "3.1.4",
     "cytoscape-spread": "3.0.0",
     "d3": "5.15.0",
     "dagre": "0.8.5",
-    "date-fns": "2.16.1",
-    "file-saver": "2.0.2",
+    "date-fns": "2.22.1",
+    "file-saver": "2.0.5",
     "immutable": "3.8.2",
     "klayjs": "0.4.1",
-    "lodash": "4.17.20",
+    "lodash": "4.17.21",
     "mobx": "5.15.7",
     "mobx-react": "6.3.1",
     "prop-types": "15.7.2",
-    "react": "17.0.1",
+    "react": "17.0.2",
     "react-autosuggest": "9.4.3",
-    "react-day-picker": "7.4.8",
-    "react-dom": "17.0.1",
+    "react-day-picker": "7.4.10",
+    "react-dom": "17.0.2",
     "react-router-dom": "5.2.0",
-    "react-scripts": "4.0.1",
+    "react-scripts": "4.0.3",
     "recompose": "0.30.0",
     "seamless-immutable": "7.1.4",
     "typeface-roboto": "0.0.75",
-    "typescript": "4.0.5",
-    "universal-router": "9.0.1",
-    "wretch": "1.7.2"
+    "typescript": "4.3.4",
+    "universal-router": "9.1.0",
+    "wretch": "1.7.4"
   },
   "devDependencies": {
-    "@storybook/react": "6.1.14",
+    "@storybook/react": "6.3.0",
     "@types/recompose": "0.30.7",
-    "eslint-config-prettier": "6.15.0",
-    "husky": "4.3.8",
-    "jest-junit": "12.0.0",
-    "prettier": "2.2.1",
-    "pretty-quick": "3.1.0",
-    "source-map-explorer": "2.5.0"
+    "eslint-config-prettier": "8.3.0",
+    "jest-junit": "12.2.0",
+    "prettier": "2.3.1",
+    "source-map-explorer": "2.5.2"
   },
   "resolutions": {
     "**/**/acorn": "^7.1.1",
+    "**/**/babel-loader": "8.1.0",
     "**/**/kind-of": "^6.0.3",
-    "**/**/highlight.js": "^10.4.1",
-    "**/**/ini": "^1.3.7",
-    "**/**/node-forge": "^0.10.0",
-    "**/**/node-fetch": "^2.6.1",
-    "**/**/node-notifier": "^8.0.1",
-    "**/**/prismjs": "^1.21.0"
+    "**/**/node-fetch": "^2.6.1"
   },
   "scripts": {
     "analyze": "source-map-explorer build/static/js/main.*",
@@ -81,10 +75,5 @@
     "node": ">12.0.0"
   },
   "comment_browserslist": "Cleared temporarily. See https://github.com/browserslist/browserslist/issues/382",
-  "browserslist": [],
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
-  }
+  "browserslist": []
 }

src/Cytoscape/Cytoscape.tsx

@@ -130,9 +130,7 @@ const syncSelection = (cy: Cytoscape.Core, selectedNodeIds: Set<string>) => {
   });
 
   selectedNodeIds.forEach(id => {
-    cy.elements()
-      .getElementById(id)
-      .select();
+    cy.elements().getElementById(id).select();
   });
 };
 
@@ -263,12 +261,8 @@ const CytoscapeComp = (input: ICytoscapeComp) => {
       centerOnSelection(cy);
     }
 
-    // @ts-ignore
-    if (previousProps.style !== style) {
-      cy.style()
-        // @ts-ignore
-        .fromJson(style)
-        .update();
+    if (!_.isEqual(previousProps?.style, style)) {
+      cy.style(style);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [elements, selectedNodeIds, style, resizeEvent]);

src/Cytoscape/betterGrid.js

@@ -4,15 +4,15 @@ function BetterGrid(options = {}) {
   this.options = options;
 }
 
-BetterGrid.prototype.run = function() {
+BetterGrid.prototype.run = function () {
   var self = this,
     nodes = this.options.eles,
     bb = nodes.boundingBox(),
     len = nodes.length,
     x = bb.x1,
     y = bb.y1,
     linebreak = Math.round(Math.sqrt(len * (this.spaceY / this.spaceX))) * this.spaceX,
-    getPos = function(i, node) {
+    getPos = function (i, node) {
       if (x - bb.x1 > linebreak) {
         x = bb.x1;
         y += self.spaceY;

src/backend/ActApi.ts

@@ -1,6 +1,7 @@
 import {
   ActFact,
-  ActObject, FactComment,
+  ActObject,
+  FactComment,
   FactType,
   ObjectFactsSearch,
   ObjectTraverseSearch,
@@ -9,51 +10,53 @@ import {
 } from '../core/types';
 
 export interface ActApi {
-
   autoResolveDataLoader(
     args: { facts: { [id: string]: ActFact }; objects: { [id: string]: ActObject } },
     config: TConfig
-  ): Promise<{ facts: Record<string, ActFact>, objects: Record<string, ActObject> }>
+  ): Promise<{ facts: Record<string, ActFact>; objects: Record<string, ActObject> }>;
 
-  checkObjectStats(search: ObjectFactsSearch, maxCount: number): Promise<boolean>
+  checkObjectStats(search: ObjectFactsSearch, maxCount: number): Promise<boolean>;
 
-  createFact(request: any): Promise<any>
+  createFact(request: any): Promise<any>;
 
-  factByIdDataLoader(args: { id: string }): Promise<ActFact>
+  factByIdDataLoader(args: { id: string }): Promise<ActFact>;
 
-  factCommentsDataLoader(args: { id: string }): Promise<Array<FactComment>>
+  factCommentsDataLoader(args: { id: string }): Promise<Array<FactComment>>;
 
-  factDataLoader(objectId: string, factTypes: Array<string>): Promise<Array<ActFact>>
+  factDataLoader(objectId: string, factTypes: Array<string>): Promise<Array<ActFact>>;
 
-  factKeywordSearch(
-    args: { keywords: string; factTypes: Array<string>; objectTypes: Array<string>; limit: number; }
-  ): Promise<Array<ActFact>>
+  factKeywordSearch(args: {
+    keywords: string;
+    factTypes: Array<string>;
+    objectTypes: Array<string>;
+    limit: number;
+  }): Promise<Array<ActFact>>;
 
-  factTypesDataLoader(): Promise<Array<FactType>>
+  factTypesDataLoader(): Promise<Array<FactType>>;
 
   factTypesToResolveByObjectId(
     objectTypeToFactTypes: { [id: string]: Array<string> },
     objects: Array<ActObject>
-  ): Array<{ objectIds: Array<string>; factTypes: Array<string> }>
+  ): Array<{ objectIds: Array<string>; factTypes: Array<string> }>;
 
-  metaFactsDataLoader(props: { id: string }): Promise<Array<ActFact>>
+  metaFactsDataLoader(props: { id: string }): Promise<Array<ActFact>>;
 
   multiObjectTraverseDataLoader(
-    args: { objectIds: Array<string>; query: string; },
+    args: { objectIds: Array<string>; query: string },
     abortController?: AbortController
-  ): Promise<SearchResult>
+  ): Promise<SearchResult>;
 
-  objectDataLoader(objectTypeName: string, objectValue: string): Promise<any>
+  objectDataLoader(objectTypeName: string, objectValue: string): Promise<any>;
 
-  objectFactsDataLoader(search: ObjectFactsSearch, abortController?: AbortController): Promise<SearchResult>
+  objectFactsDataLoader(search: ObjectFactsSearch, abortController?: AbortController): Promise<SearchResult>;
 
-  objectKeywordSearch(args: { keywords: string; objectTypes: Array<string>; limit: number; }): Promise<Array<ActObject>>
+  objectKeywordSearch(args: { keywords: string; objectTypes: Array<string>; limit: number }): Promise<Array<ActObject>>;
 
-  objectTraverseDataLoader(search: ObjectTraverseSearch, abortController?: AbortController): Promise<SearchResult>
+  objectTraverseDataLoader(search: ObjectTraverseSearch, abortController?: AbortController): Promise<SearchResult>;
 
-  objectTypesDataLoader(): Promise<{ objectTypes: any }>
+  objectTypesDataLoader(): Promise<{ objectTypes: any }>;
 
-  postJson(url: string, jsonRequest: any): Promise<any>
+  postJson(url: string, jsonRequest: any): Promise<any>;
 
-  retractFact(fact: ActFact, comment: string, accessMode: string): Promise<any>
+  retractFact(fact: ActFact, comment: string, accessMode: string): Promise<any>;
 }

src/backend/DefaultActApi.ts

@@ -28,11 +28,11 @@ import {
   factTypesDataLoader,
   factTypesToResolveByObjectId,
   postJson,
-  retractFact } from './dataLoaders';
+  retractFact
+} from './dataLoaders';
 import wretch, { Wretcher } from 'wretch';
 
 export class DefaultActApi implements ActApi {
-
   wretcher: Wretcher;
 
   constructor(config: TConfig) {
@@ -46,7 +46,10 @@ export class DefaultActApi implements ActApi {
       .errorType('json');
   }
 
-  autoResolveDataLoader(args: { facts: { [p: string]: ActFact }; objects: { [p: string]: ActObject } }, config: TConfig): Promise<{ facts: Record<string, ActFact>; objects: Record<string, ActObject> }> {
+  autoResolveDataLoader(
+    args: { facts: { [p: string]: ActFact }; objects: { [p: string]: ActObject } },
+    config: TConfig
+  ): Promise<{ facts: Record<string, ActFact>; objects: Record<string, ActObject> }> {
     return autoResolveDataLoader(this.wretcher, args, config);
   }
 
@@ -67,15 +70,20 @@ export class DefaultActApi implements ActApi {
   }
 
   factDataLoader(objectId: string, factTypes: Array<string>): Promise<Array<ActFact>> {
-    return factDataLoader(this.wretcher, objectId, factTypes)
+    return factDataLoader(this.wretcher, objectId, factTypes);
   }
 
-  factKeywordSearch(args: { keywords: string; factTypes: Array<string>; objectTypes: Array<string>; limit: number }): Promise<Array<ActFact>> {
+  factKeywordSearch(args: {
+    keywords: string;
+    factTypes: Array<string>;
+    objectTypes: Array<string>;
+    limit: number;
+  }): Promise<Array<ActFact>> {
     return factKeywordSearch(this.wretcher, args);
   }
 
   factTypesDataLoader(): Promise<Array<FactType>> {
-    return factTypesDataLoader(this.wretcher)
+    return factTypesDataLoader(this.wretcher);
   }
 
   factTypesToResolveByObjectId(
@@ -86,14 +94,14 @@ export class DefaultActApi implements ActApi {
   }
 
   metaFactsDataLoader(props: { id: string }): Promise<Array<ActFact>> {
-    return metaFactsDataLoader(this.wretcher, props)
+    return metaFactsDataLoader(this.wretcher, props);
   }
 
   multiObjectTraverseDataLoader(
     args: { objectIds: Array<string>; query: string },
     abortController?: AbortController
   ): Promise<SearchResult> {
-    return multiObjectTraverseDataLoader(this.wretcher, args, abortController)
+    return multiObjectTraverseDataLoader(this.wretcher, args, abortController);
   }
 
   objectDataLoader(objectTypeName: string, objectValue: string): Promise<any> {
@@ -104,7 +112,11 @@ export class DefaultActApi implements ActApi {
     return objectFactsDataLoader(this.wretcher, search, abortController);
   }
 
-  objectKeywordSearch(args: { keywords: string; objectTypes: Array<string>; limit: number }): Promise<Array<ActObject>> {
+  objectKeywordSearch(args: {
+    keywords: string;
+    objectTypes: Array<string>;
+    limit: number;
+  }): Promise<Array<ActObject>> {
     return objectKeywordSearch(this.wretcher, args);
   }
 
@@ -121,6 +133,6 @@ export class DefaultActApi implements ActApi {
   }
 
   retractFact(fact: ActFact, comment: string, accessMode: string): Promise<any> {
-    return retractFact(this.wretcher, fact, comment, accessMode)
+    return retractFact(this.wretcher, fact, comment, accessMode);
   }
 }

src/backend/ObjectFactsBackendStore.ts

@@ -44,9 +44,9 @@ class ObjectFactsBackendStore {
     this.cache[q.id] = q;
 
     try {
-      const { facts, objects } = await this.actApi.objectFactsDataLoader(request, abortController).then(value =>
-        this.actApi.autoResolveDataLoader(value, this.config)
-      );
+      const { facts, objects } = await this.actApi
+        .objectFactsDataLoader(request, abortController)
+        .then(value => this.actApi.autoResolveDataLoader(value, this.config));
 
       this.cache[q.id] = {
         ...q,

src/backend/ObjectTraverseBackendStore.ts

@@ -44,9 +44,9 @@ class ObjectTraverseBackendStore {
     this.cache[q.id] = q;
 
     try {
-      const { facts, objects } = await this.actApi.objectTraverseDataLoader(request, abortController).then(value =>
-        this.actApi.autoResolveDataLoader(value, this.config)
-      );
+      const { facts, objects } = await this.actApi
+        .objectTraverseDataLoader(request, abortController)
+        .then(value => this.actApi.autoResolveDataLoader(value, this.config));
 
       this.cache[q.id] = {
         ...q,

src/backend/SimpleSearchBackendStore.ts

@@ -13,12 +13,7 @@ export type SimpleSearch = TRequestLoadable<
 >;
 
 const simpleSearchId = ({ searchString, objectTypeFilter }: SimpleSearchArgs) =>
-  searchString +
-  ':' +
-  objectTypeFilter
-    .slice()
-    .sort()
-    .join(',');
+  searchString + ':' + objectTypeFilter.slice().sort().join(',');
 
 class SimpleSearchBackendStore {
   config: TConfig;
@@ -49,7 +44,11 @@ class SimpleSearchBackendStore {
 
     try {
       const [objectsByValue, factsByNameResult] = await Promise.all([
-        this.actApi.objectKeywordSearch({ keywords: searchString, objectTypes: objectTypeFilter, limit: this.resultLimit }),
+        this.actApi.objectKeywordSearch({
+          keywords: searchString,
+          objectTypes: objectTypeFilter,
+          limit: this.resultLimit
+        }),
         this.config.objectLabelFromFactType
           ? this.actApi.factKeywordSearch({
               keywords: searchString,