Dependency update and linting

applications/conceptual-model-editor/eslint.config.js

@@ -3,6 +3,7 @@ import globals from "globals";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
+import stylisticJs from "@stylistic/eslint-plugin-js";
 
 export default tseslint.config({
   ignores: ["dist"],
@@ -20,13 +21,51 @@ export default tseslint.config({
     "react-hooks": reactHooks,
     // Validate that your components can safely be updated with fast refresh.
     "react-refresh": reactRefresh,
+    // Styles extracted from ESLint core.
+    "@stylistic/js": stylisticJs,
   },
   rules: {
     ...reactHooks.configs.recommended.rules,
+    // For now only a warning.
+    "@typescript-eslint/no-explicit-any": ["warn"],
+    // Use const where possible.
+    "prefer-const": ["error", {
+      destructuring: "any",
+      ignoreReadBeforeAssign: false
+    }],
+    // No alert or other.
+    "no-alert": ["error"],
+    // Use === and !==.
+    "eqeqeq": ["error"],
+    // Comments must start with a capital.
+    "capitalized-comments": [
+      "error",
+      "always",
+      { ignoreConsecutiveComments: true },
+    ],
+    // Using two spaces, we may consider using tabs instead.
+    "indent": ["error", 2],
+    // Prevent multiple empty lines.
+    "no-multiple-empty-lines": [
+      "error",
+      { "max": 1 }
+    ],
+    // Files should not be too big.
+    "max-lines": [
+      "warn",
+      { "max": 666, "skipBlankLines": true }
+    ],
     // Ignore unused variables and arguments starting with underscore.
     "@typescript-eslint/no-unused-vars": [
       "error",
       { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
     ],
+    // Line length, we allow 120 as a compromise.
+    "@stylistic/js/max-len": [
+      "warn",
+      { "code": 120 },
+    ],
+    // Double quotes.
+    "@stylistic/js/quotes": ["error", "double"],
   },
 });

applications/conceptual-model-editor/package.json

@@ -14,7 +14,7 @@
     "@dataspecer/core": "*",
     "@dataspecer/core-v2": "^0.0.0",
     "@dataspecer/layout": "0.0.0",
-    "@xyflow/react": "^12.3.4",
+    "@xyflow/react": "^12.3.6",
     "clsx": "^2.1.1",
     "html-to-image": "^1.11.11",
     "iri": "^1.3.1",
@@ -23,23 +23,24 @@
     "tsx": "^4.19.2"
   },
   "devDependencies": {
-    "@eslint/config-array": "^0.18.0",
-    "@eslint/js": "^9.13.0",
-    "@eslint/plugin-kit": "^0.2.2",
+    "@eslint/config-array": "^0.19.1",
+    "@eslint/js": "^9.17.0",
+    "@eslint/plugin-kit": "^0.2.4",
+    "@stylistic/eslint-plugin-js": "^2.12.1",
     "@types/iri": "^1.3.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.13.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "globals": "^15.11.0",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.5"
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.19.0",
+    "vite": "^6.0.7",
+    "vitest": "^2.1.8"
   }
 }

applications/conceptual-model-editor/src/action/actions-react-binding.tsx

@@ -1,18 +1,18 @@
 import React, { useContext, useMemo } from "react";
 
 import { InMemorySemanticModel } from "@dataspecer/core-v2/semantic-model/in-memory";
-import { isVisualProfileRelationship, isVisualRelationship, isWritableVisualModel, Waypoint, WritableVisualModel } from "@dataspecer/core-v2/visual-model";
+import { Waypoint, WritableVisualModel, isVisualProfileRelationship, isVisualRelationship, isWritableVisualModel } from "@dataspecer/core-v2/visual-model";
 
 import { type DialogApiContextType } from "../dialog/dialog-service";
 import { DialogApiContext } from "../dialog/dialog-context";
-import { configuration, createLogger } from "../application";
-import { type ClassesContextType, ClassesContext, useClassesContext, UseClassesContextType } from "../context/classes-context";
+import { createLogger } from "../application";
+import { ClassesContext, type ClassesContextType, UseClassesContextType, useClassesContext } from "../context/classes-context";
 import { useNotificationServiceWriter } from "../notification";
 import { type UseNotificationServiceWriterType } from "../notification/notification-service-context";
 import { ModelGraphContext, type ModelGraphContextType } from "../context/model-context";
-import { Edge, Position, useDiagram, type DiagramCallbacks, type Waypoint as DiagramWaypoint } from "../diagram/";
+import { type DiagramCallbacks, type Waypoint as DiagramWaypoint, Edge, Position, useDiagram } from "../diagram/";
 import type { UseDiagramType } from "../diagram/diagram-hook";
-import { useOptions, type Options } from "../application/options";
+import { type Options, useOptions } from "../application/options";
 import { centerViewportToVisualEntityAction } from "./center-viewport-to-visual-entity";
 import { openDetailDialogAction } from "./open-detail-dialog";
 import { openModifyDialogAction } from "./open-modify-dialog";
@@ -25,7 +25,7 @@ import { addSemanticClassProfileToVisualModelAction } from "./add-class-profile-
 import { addSemanticGeneralizationToVisualModelAction } from "./add-generalization-to-visual-model";
 import { addSemanticRelationshipToVisualModelAction } from "./add-relationship-to-visual-model";
 import { addSemanticRelationshipProfileToVisualModelAction } from "./add-relationship-profile-to-visual-model";
-import { convertToEntitiesToDeleteType, EntityToDelete, getSelections, getViewportCenterForClassPlacement, setSelectionsInDiagram } from "./utilities";
+import { EntityToDelete, convertToEntitiesToDeleteType, getSelections, getViewportCenterForClassPlacement, setSelectionsInDiagram } from "./utilities";
 import { removeFromVisualModelAction } from "./remove-from-visual-model";
 import { removeFromSemanticModelsAction } from "./remove-from-semantic-model";
 import { openCreateAttributeDialogAction } from "./open-create-attribute-dialog";
@@ -35,15 +35,15 @@ import { createNewVisualModelFromSelectionAction } from "./create-new-visual-mod
 import { addClassNeighborhoodToVisualModelAction } from "./add-class-neighborhood-to-visual-model";
 import { createDefaultProfilesAction } from "./create-default-profiles";
 import { openCreateClassDialogWithModelDerivedFromClassAction } from "./open-create-class-dialog-with-derived-model";
-import { addSemanticEntitiesToVisualModelAction, EntityToAddToVisualModel } from "./add-semantic-entities-to-visual-model";
+import { EntityToAddToVisualModel, addSemanticEntitiesToVisualModelAction } from "./add-semantic-entities-to-visual-model";
 import { LayoutedVisualEntities, UserGivenConstraintsVersion4 } from "@dataspecer/layout";
 import { layoutActiveVisualModelAction } from "./layout-visual-model";
 import { toggleAnchorAction } from "./toggle-anchor";
 import { SelectionFilterState } from "../dialog/selection/filter-selection-dialog-controller";
-import { filterSelectionAction, SelectionFilter, Selections, SelectionsWithIdInfo } from "./filter-selection-action";
+import { SelectionFilter, Selections, SelectionsWithIdInfo, filterSelectionAction } from "./filter-selection-action";
 import { createExtendSelectionDialog } from "../dialog/selection/extend-selection-dialog";
 import { ExtendSelectionState } from "../dialog/selection/extend-selection-dialog-controller";
-import { extendSelectionAction, ExtensionType, getSelectionForWholeSemanticModel, NodeSelection, VisibilityFilter } from "./extend-selection-action";
+import { ExtensionType, NodeSelection, VisibilityFilter, extendSelectionAction, getSelectionForWholeSemanticModel } from "./extend-selection-action";
 import { createFilterSelectionDialog } from "../dialog/selection/filter-selection-dialog";
 import { EntityModel } from "@dataspecer/core-v2";
 
@@ -94,31 +94,27 @@ interface DialogActions {
    */
   openCreateProfileDialog: (identifier: string) => void;
 
-
   /**
    * Open dialog to extend current selection.
    * @param selections are the visual identifiers of the selection.
    */
   openExtendSelectionDialog: (selections: Selections) => void;
 
-
   /**
    * Open dialog to filter current selection.
    */
   openFilterSelectionDialog: (selections: SelectionsWithIdInfo) => void;
 
 }
 
-
 /**
  * Contains actions used for manipulation with visual model .
  */
 interface VisualModelActions {
-// TODO PRQuestion: How should we document these action methods? Since their implementation is usually
-//                  within the .*Action methods defined in different files in this directory.
-//                  So should the actual documentation look like: For further information about the action see {@link ...Action} method.
-//                  Can be seen on the centerViewportToVisualEntity method, where the Action method is already documented
-
+  // TODO PRQuestion: How should we document these action methods? Since their implementation is usually
+  //                  within the .*Action methods defined in different files in this directory.
+  //                  So should the actual documentation look like: For further information about the action see {@link ...Action} method.
+  //                  Can be seen on the centerViewportToVisualEntity method, where the Action method is already documented
 
   /**
    * Adds semantic entities identified by identifier to currently active visual model at optional position.
@@ -228,7 +224,6 @@ export interface ActionsContextType extends DialogActions, VisualModelActions {
     semanticModelFilter: Record<string, boolean> | null
   ) => Promise<Selections>;
 
-
   filterSelection: (
     selections: SelectionsWithIdInfo,
     filters: SelectionFilter[],
@@ -275,8 +270,8 @@ const noOperationActionsContext = {
   openExtendSelectionDialog: noOperation,
   openFilterSelectionDialog: noOperation,
   // TODO PRQuestion: How to define this - Should actions return values?, shouldn't it be just function defined in utils?
-  extendSelection: async () => ({nodeSelection: [], edgeSelection: []}),
-  filterSelection: () => ({nodeSelection: [], edgeSelection: []}),
+  extendSelection: async () => ({ nodeSelection: [], edgeSelection: [] }),
+  filterSelection: () => ({ nodeSelection: [], edgeSelection: [] }),
   highlightNodeInExplorationModeFromCatalog: noOperation,
   diagram: null,
 };
@@ -336,7 +331,7 @@ function createActionsContext(
 ): ActionsContextType {
 
   if (options === null || dialogs === null || classes === null ||
-    useClasses == null || notifications === null || graph === null ||
+    useClasses === null || notifications === null || graph === null ||
     !diagram.areActionsReady) {
     // We need to return the diagram object so it can be consumed by
     // the Diagram component and initialized.
@@ -618,15 +613,14 @@ function createActionsContext(
     dialogs?.openDialog(createExtendSelectionDialog(onConfirm, onClose, true, selections, setSelections));
   };
 
-
   const openFilterSelectionDialog = (selections: SelectionsWithIdInfo) => {
     const onConfirm = (state: SelectionFilterState) => {
       const relevantSelectionFilters = state.selectionFilters.map(selectionFilter => {
-        if(selectionFilter.checked) {
-            return selectionFilter.selectionFilter;
+        if (selectionFilter.checked) {
+          return selectionFilter.selectionFilter;
         }
         return null;
-    }).filter(selectionFilter => selectionFilter !== null);
+      }).filter(selectionFilter => selectionFilter !== null);
 
       const filteredSelection = filterSelection(state.selections, relevantSelectionFilters, VisibilityFilter.ONLY_VISIBLE, null);
       setSelectionsInDiagram(filteredSelection, diagram);
@@ -638,7 +632,6 @@ function createActionsContext(
     dialogs?.openDialog(createFilterSelectionDialog(onConfirm, selections, setSelections));
   };
 
-
   const extendSelection = async (
     nodeSelection: NodeSelection,
     extensionTypes: ExtensionType[],
@@ -649,7 +642,6 @@ function createActionsContext(
     return selectionExtension.selectionExtension;
   };
 
-
   const filterSelection = (
     selections: SelectionsWithIdInfo,
     allowedClasses: SelectionFilter[],
@@ -663,7 +655,7 @@ function createActionsContext(
     withVisualModel(notifications, graph, (visualModel) => {
       const nodeIdentifier = visualModel.getVisualEntityForRepresented(classIdentifier)?.identifier;
       const isClassInVisualModel = nodeIdentifier !== undefined;
-      if(!isClassInVisualModel) {
+      if (!isClassInVisualModel) {
         return;
       }
 
@@ -737,31 +729,31 @@ function createActionsContext(
     },
     onShowFilterSelection: () => {
       const selectionToFilter = getSelections(diagram, false, true);
-      openFilterSelectionDialog({nodeSelection: selectionToFilter.nodeSelection, edgeSelection: selectionToFilter.edgeSelection, areVisualModelIdentifiers: true});
+      openFilterSelectionDialog({ nodeSelection: selectionToFilter.nodeSelection, edgeSelection: selectionToFilter.edgeSelection, areVisualModelIdentifiers: true });
     },
     onCanvasOpenCreateClassDialog: (sourceClassNode, positionToPlaceClassOn) => {
       withVisualModel(notifications, graph, (visualModel) => {
         openCreateClassDialogWithModelDerivedFromClassAction(notifications, graph, dialogs, classes, options, diagram, visualModel, sourceClassNode, positionToPlaceClassOn);
       });
     },
     onCreateNewViewFromSelection: () => {
-      const {nodeSelection, edgeSelection} = getSelections(diagram, true, false);
+      const { nodeSelection, edgeSelection } = getSelections(diagram, true, false);
       createNewVisualModelFromSelection(nodeSelection.concat(edgeSelection));
     },
     onProfileSelection: () => {
-      const {nodeSelection, edgeSelection} = getSelections(diagram, true, false);
+      const { nodeSelection, edgeSelection } = getSelections(diagram, true, false);
       withVisualModel(notifications, graph, (visualModel) => {
         createDefaultProfilesAction(notifications, graph, diagram, options, classes, visualModel, nodeSelection, edgeSelection, true);
       });
     },
     onHideSelection: () => {
-      const {nodeSelection, edgeSelection} = getSelections(diagram, true, false);
-      console.info("Hiding selection from view: ", {nodeSelection, edgeSelection});
+      const { nodeSelection, edgeSelection } = getSelections(diagram, true, false);
+      console.info("Hiding selection from view: ", { nodeSelection, edgeSelection });
       removeFromVisualModel(nodeSelection.concat(edgeSelection));
     },
     onDeleteSelection: () => {
-      const {nodeSelection, edgeSelection} = getSelections(diagram, true, false);
-      console.info("Removing selection from semantic model: ", {nodeSelection, edgeSelection});
+      const { nodeSelection, edgeSelection } = getSelections(diagram, true, false);
+      console.info("Removing selection from semantic model: ", { nodeSelection, edgeSelection });
       const selectionIdentifiers = nodeSelection.concat(edgeSelection);
       deleteVisualElements(selectionIdentifiers);
     },

applications/conceptual-model-editor/src/action/add-class-neighborhood-to-visual-model.ts

@@ -3,28 +3,28 @@ import { ClassesContextType } from "../context/classes-context";
 import { ModelGraphContextType } from "../context/model-context";
 import { UseDiagramType } from "../diagram/diagram-hook";
 import { UseNotificationServiceWriterType } from "../notification/notification-service-context";
-import { addSemanticEntitiesToVisualModelAction, EntityToAddToVisualModel } from "./add-semantic-entities-to-visual-model";
-import { extendSelectionAction, ExtensionType, NodeSelection, VisibilityFilter } from "./extend-selection-action";
+import { EntityToAddToVisualModel, addSemanticEntitiesToVisualModelAction } from "./add-semantic-entities-to-visual-model";
+import { ExtensionType, NodeSelection, VisibilityFilter, extendSelectionAction } from "./extend-selection-action";
 
 export const addClassNeighborhoodToVisualModelAction = (
-    notifications: UseNotificationServiceWriterType,
-    classes: ClassesContextType,
-    graph: ModelGraphContextType,
-    diagram: UseDiagramType,
-    visualModel: WritableVisualModel,
-    identifier: string
+  notifications: UseNotificationServiceWriterType,
+  classes: ClassesContextType,
+  graph: ModelGraphContextType,
+  diagram: UseDiagramType,
+  visualModel: WritableVisualModel,
+  identifier: string
 ): void => {
-    const inputForExtension: NodeSelection = {
-        identifiers: [identifier],
-        areIdentifiersFromVisualModel: false
-    };
-    const neighborhoodPromise = extendSelectionAction(notifications, graph, classes, inputForExtension,
-        [ExtensionType.ASSOCIATION, ExtensionType.GENERALIZATION], VisibilityFilter.ALL, false, null);
-    neighborhoodPromise.then(neighborhood => {
-        const classesOrClassProfilesToAdd: EntityToAddToVisualModel[] = [{identifier, position: null}];
+  const inputForExtension: NodeSelection = {
+    identifiers: [identifier],
+    areIdentifiersFromVisualModel: false
+  };
+  const neighborhoodPromise = extendSelectionAction(notifications, graph, classes, inputForExtension,
+    [ExtensionType.ASSOCIATION, ExtensionType.GENERALIZATION], VisibilityFilter.ALL, false, null);
+  neighborhoodPromise.then(neighborhood => {
+    const classesOrClassProfilesToAdd: EntityToAddToVisualModel[] = [{identifier, position: null}];
 
-        // We have to filter the source class, whose neighborhood we are adding, from the extension
-        classesOrClassProfilesToAdd.push(...neighborhood.selectionExtension.nodeSelection.filter(node => node !== identifier).map(node => ({identifier: node, position: null})));
-        addSemanticEntitiesToVisualModelAction(notifications, classes, graph, visualModel, diagram, classesOrClassProfilesToAdd);
-    })
+    // We have to filter the source class, whose neighborhood we are adding, from the extension
+    classesOrClassProfilesToAdd.push(...neighborhood.selectionExtension.nodeSelection.filter(node => node !== identifier).map(node => ({identifier: node, position: null})));
+    addSemanticEntitiesToVisualModelAction(notifications, classes, graph, visualModel, diagram, classesOrClassProfilesToAdd);
+  })
 };

applications/conceptual-model-editor/src/action/add-class-profile-to-visual-model.ts

@@ -1,10 +1,10 @@
 import { WritableVisualModel } from "@dataspecer/core-v2/visual-model";
-import { isSemanticModelClassUsage, SemanticModelClassUsage } from "@dataspecer/core-v2/semantic-model/usage/concepts";
+import { SemanticModelClassUsage, isSemanticModelClassUsage } from "@dataspecer/core-v2/semantic-model/usage/concepts";
 
 import { UseNotificationServiceWriterType } from "../notification/notification-service-context";
 import { ModelGraphContextType } from "../context/model-context";
 import { UseDiagramType } from "../diagram/diagram-hook";
-import { getViewportCenterForClassPlacement, withAggregatedEntity } from "./utilities";
+import { withAggregatedEntity } from "./utilities";
 import { addRelatedEntitiesAction } from "./add-related-entities-to-visual-model";
 import { ClassesContextType } from "../context/classes-context";
 import { findPositionForNewNodesUsingLayouting } from "./layout-visual-model";

applications/conceptual-model-editor/src/action/add-class-to-visual-model.ts

@@ -1,7 +1,7 @@
 import { WritableVisualModel } from "@dataspecer/core-v2/visual-model";
-import { isSemanticModelClass, SemanticModelClass } from "@dataspecer/core-v2/semantic-model/concepts";
+import { SemanticModelClass, isSemanticModelClass } from "@dataspecer/core-v2/semantic-model/concepts";
 
-import { getViewportCenterForClassPlacement, withAggregatedEntity } from "./utilities";
+import { withAggregatedEntity } from "./utilities";
 import { UseNotificationServiceWriterType } from "../notification/notification-service-context";
 import { ModelGraphContextType } from "../context/model-context";
 import { UseDiagramType } from "../diagram/diagram-hook";