Rename molecule types (#1729)

* chore: rename molecule types

* refactor: update dependencies

package.json

@@ -103,18 +103,18 @@
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@playwright/test": "^1.25.0",
+    "@playwright/test": "^1.25.1",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/d3": "^7.4.0",
-    "@types/jest": "^28.1.7",
-    "@types/node": "^18.7.8",
+    "@types/jest": "^28.1.8",
+    "@types/node": "^18.7.13",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.1",
     "@zakodium/eslint-config": "^6.0.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.22.0",
-    "jest": "^28.1.3",
+    "jest": "^29.0.1",
     "modern-normalize": "^1.1.0",
     "prettier": "^2.7.1",
     "rc-menu": "^9.6.3",
@@ -124,7 +124,7 @@
     "rimraf": "^3.0.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "serve": "^14.0.1",
-    "typescript": "~4.7.4",
+    "typescript": "~4.8.2",
     "vite": "^3.0.9"
   }
 }

src/component/elements/MoleculeSelection.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import MF from 'react-mf/lib/components/MF';
 import { MolfileSvgRenderer } from 'react-ocl/full';
 
-import { InternalMolecule } from '../../data/molecules/Molecule';
+import { StateMoleculeExtended } from '../../data/molecules/Molecule';
 
 import NextPrev from './NextPrev';
 
@@ -64,7 +64,7 @@ const moleculeContainerStyle = css`
 `;
 
 interface MoleculeSelectionProps {
-  molecules: Array<InternalMolecule>;
+  molecules: Array<StateMoleculeExtended>;
   onChange: (element: number) => void;
   index?: number;
 }

src/component/modal/MoleculeStructureEditorModal.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { StructureEditor } from 'react-ocl/full';
 
-import { InternalMolecule } from '../../data/molecules/Molecule';
+import { StateMoleculeExtended } from '../../data/molecules/Molecule';
 import { isMolFileEmpty } from '../../data/utilities/isMolFileEmpty';
 import { useDispatch } from '../context/DispatchContext';
 import ActionButtons from '../elements/ActionButtons';
@@ -14,7 +14,7 @@ import { ModalStyles } from './ModalStyle';
 
 interface MoleculeStructureEditorModalProps {
   onClose?: (element?: string) => void;
-  selectedMolecule?: InternalMolecule;
+  selectedMolecule?: StateMoleculeExtended;
 }
 
 function MoleculeStructureEditorModal(
@@ -81,10 +81,12 @@ function MoleculeStructureEditorModal(
   );
 }
 
-export function useMoleculeEditor(): (molecule?: InternalMolecule) => void {
+export function useMoleculeEditor(): (
+  molecule?: StateMoleculeExtended,
+) => void {
   const modal = useModal();
   return useCallback(
-    (molecule?: InternalMolecule) => {
+    (molecule?: StateMoleculeExtended) => {
       modal.show(<MoleculeStructureEditorModal selectedMolecule={molecule} />, {
         position: positions.TOP_CENTER,
         width: 700,

src/component/panels/MoleculesPanel/MoleculeHeader.tsx

@@ -1,7 +1,7 @@
 import { useCallback, CSSProperties } from 'react';
 import { MF } from 'react-mf';
 
-import { InternalMolecule } from '../../../data/molecules/Molecule';
+import { StateMoleculeExtended } from '../../../data/molecules/Molecule';
 import {
   extractLabelsNumbers,
   extractNumber,
@@ -12,8 +12,8 @@ import { InputKeyboardEvent } from '../../elements/Input';
 import { CHANGE_MOLECULE_LABEL } from '../../reducer/types/Types';
 
 interface MoleculeHeaderProps {
-  currentMolecule: InternalMolecule;
-  molecules: InternalMolecule[];
+  currentMolecule: StateMoleculeExtended;
+  molecules: StateMoleculeExtended[];
 }
 
 const styles: Record<'toolbar' | 'labelInput', CSSProperties> = {

src/component/panels/MoleculesPanel/MoleculePanel.tsx

@@ -14,7 +14,7 @@ import OCLnmr from 'react-ocl-nmr';
 
 import {
   FloatingMolecules,
-  InternalMolecule,
+  StateMoleculeExtended,
 } from '../../../data/molecules/Molecule';
 import { Datum1D, Ranges } from '../../../data/types/data1d';
 import { Datum2D, Zones } from '../../../data/types/data2d';
@@ -68,7 +68,7 @@ const styles: Record<
 interface MoleculePanelInnerProps extends MoleculePanelProps {
   zones: Zones;
   ranges: Ranges;
-  molecules: Array<InternalMolecule>;
+  molecules: Array<StateMoleculeExtended>;
   floatingMolecules: Array<FloatingMolecules>;
   activeTab: string;
   displayerMode: DISPLAYER_MODE;
@@ -87,7 +87,7 @@ function MoleculePanelInner({
   emptyTextStyle,
 }: MoleculePanelInnerProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
-  const [molecules, setMolecules] = useState<Array<InternalMolecule>>([]);
+  const [molecules, setMolecules] = useState<Array<StateMoleculeExtended>>([]);
 
   const dispatch = useDispatch();
   const openMoleculeEditor = useMoleculeEditor();
@@ -149,7 +149,7 @@ function MoleculePanelInner({
                   defaultIndex={currentIndex}
                 >
                   {molecules && molecules.length > 0 ? (
-                    molecules.map((mol: InternalMolecule, index) => (
+                    molecules.map((mol: StateMoleculeExtended, index) => (
                       <div key={mol.id} css={styles.items}>
                         <MoleculeHeader
                           currentMolecule={mol}
@@ -216,7 +216,7 @@ const MemoizedMoleculePanel = memo(MoleculePanelInner);
 const emptyData = { ranges: {}, zones: {} };
 
 interface MoleculePanelProps {
-  onMoleculeChange?: (molecule: InternalMolecule) => void;
+  onMoleculeChange?: (molecule: StateMoleculeExtended) => void;
   children?: ReactElement;
   actionsOptions?: MoleculeHeaderActionsOptions;
   emptyTextStyle?: CSSProperties;

src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx

@@ -15,7 +15,7 @@ import { IoOpenOutline } from 'react-icons/io5';
 
 import {
   FloatingMolecules,
-  InternalMolecule,
+  StateMoleculeExtended,
 } from '../../../data/molecules/Molecule';
 import { useAssignmentData } from '../../assignment/AssignmentsContext';
 import { useDispatch } from '../../context/DispatchContext';
@@ -90,7 +90,7 @@ export interface MoleculeHeaderActionsOptions {
 }
 interface MoleculePanelHeaderProps {
   currentIndex: number;
-  molecules: Array<InternalMolecule>;
+  molecules: Array<StateMoleculeExtended>;
   floatingMolecules: Array<FloatingMolecules>;
   onMoleculeIndexChange: (index: number) => void;
   onOpenMoleculeEditor: () => void;

src/component/panels/RangesPanel/RangesPanel.tsx

@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import { xGetFromToIndex } from 'ml-spectra-processing';
 import { useCallback, useMemo, memo, useState, useRef } from 'react';
 
-import { InternalMolecule } from '../../../data/molecules/Molecule';
+import { StateMoleculeExtended } from '../../../data/molecules/Molecule';
 import { Data1D, Datum1D, Info1D, Ranges } from '../../../data/types/data1d';
 import { useAssignmentData } from '../../assignment/AssignmentsContext';
 import { useChartData } from '../../context/ChartContext';
@@ -28,7 +28,7 @@ interface RangesTablePanelInnerProps {
   info: Info1D;
   xDomain: Array<number>;
   activeTab: string;
-  molecules: Array<InternalMolecule>;
+  molecules: Array<StateMoleculeExtended>;
   showMultiplicityTrees: boolean;
   showJGraph: boolean;
   showRangesIntegrals: boolean;

src/component/panels/predictionPanel/PredictionPanel.tsx

@@ -1,7 +1,7 @@
 import { useAccordionContext } from 'analysis-ui-components';
 import { useState, useCallback } from 'react';
 
-import { InternalMolecule } from '../../../data/molecules/Molecule';
+import { StateMoleculeExtended } from '../../../data/molecules/Molecule';
 import { useChartData } from '../../context/ChartContext';
 import { useDispatch } from '../../context/DispatchContext';
 import { useAlert } from '../../elements/popup/Alert';
@@ -11,7 +11,7 @@ import MoleculePanel from '../MoleculesPanel/MoleculePanel';
 import PredictionPreferences from './PredictionOptions';
 
 export default function PredictionPane() {
-  const [molecule, setMolecule] = useState<InternalMolecule | null>();
+  const [molecule, setMolecule] = useState<StateMoleculeExtended | null>();
   const { molecules } = useChartData();
   const {
     item: spectraPanelState,

src/component/reducer/Reducer.ts

@@ -9,7 +9,7 @@ import { ApodizationOptions } from '../../data/data1d/filter1d/apodization';
 import { migrate } from '../../data/migration/MigrationManager';
 import {
   FloatingMolecules,
-  InternalMolecule,
+  StateMoleculeExtended,
 } from '../../data/molecules/Molecule';
 import { Contours } from '../../data/types/data2d/Contours';
 import { UsedColors } from '../../types/UsedColors';
@@ -239,7 +239,7 @@ export interface State {
    * molecules
    * @default []
    */
-  molecules: Array<InternalMolecule>;
+  molecules: Array<StateMoleculeExtended>;
   /**
    * View related information
    * @default { floatingMolecules: [] };

src/component/reducer/actions/LoadActions.ts

@@ -2,7 +2,7 @@ import { Draft } from 'immer';
 import { buildCorrelationData, CorrelationData } from 'nmr-correlation';
 
 import { addJcamps, addJDFs } from '../../../data/SpectraManager';
-import { InternalMolecule } from '../../../data/molecules/Molecule';
+import { StateMoleculeExtended } from '../../../data/molecules/Molecule';
 import * as MoleculeManager from '../../../data/molecules/MoleculeManager';
 import { UsedColors } from '../../../types/UsedColors';
 import { NMRiumPreferences, Spectra } from '../../NMRium';
@@ -26,7 +26,7 @@ function setData(
   draft: Draft<State>,
   data: {
     spectra: Spectra;
-    molecules: InternalMolecule[];
+    molecules: StateMoleculeExtended[];
     preferences: NMRiumPreferences;
     correlations: CorrelationData;
     usedColors: UsedColors;

src/component/tool/FloatMoleculeStructures/DraggableStructure.tsx

@@ -4,7 +4,7 @@ import OCL from 'openchemlib/full';
 import { useCallback } from 'react';
 import OCLnmr from 'react-ocl-nmr';
 
-import { InternalMolecule } from '../../../data/molecules/Molecule';
+import { StateMoleculeExtended } from '../../../data/molecules/Molecule';
 import { Ranges } from '../../../data/types/data1d';
 import { Zones } from '../../../data/types/data2d';
 import { useDispatch } from '../../context/DispatchContext';
@@ -23,7 +23,7 @@ import ActionsButton from './ActionsButton';
 interface DraggableStructureProps {
   zones: Zones;
   ranges: Ranges;
-  molecule: InternalMolecule;
+  molecule: StateMoleculeExtended;
   activeTab: string;
   displayerMode: DISPLAYER_MODE;
   index?: number;

src/component/tool/FloatMoleculeStructures/index.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 
 import {
   FloatingMolecules,
-  InternalMolecule,
+  StateMoleculeExtended,
 } from '../../../data/molecules/Molecule';
 import { Datum1D, Ranges } from '../../../data/types/data1d';
 import { Datum2D, Zones } from '../../../data/types/data2d';
@@ -15,7 +15,7 @@ import { DraggableStructure } from './DraggableStructure';
 interface FloatMoleculeStructuresProps {
   zones: Zones;
   ranges: Ranges;
-  molecules: Array<InternalMolecule>;
+  molecules: Array<StateMoleculeExtended>;
   floatingMolecules: Array<FloatingMolecules>;
   activeTab: string;
   displayerMode: DISPLAYER_MODE;
@@ -49,7 +49,7 @@ export function FloatMoleculeStructuresInner(
               displayerMode,
               molecule: molecules.find(
                 (m) => m.id === molecule.id,
-              ) as InternalMolecule,
+              ) as StateMoleculeExtended,
             }}
           />
         ))}

src/data/SpectraManager.ts

@@ -296,7 +296,7 @@ export function toJSON(
   });
 
   const preferences = getPreferences(state);
-  const molecules = mols.map((mol: Molecule.InternalMolecule) =>
+  const molecules = mols.map((mol: Molecule.StateMoleculeExtended) =>
     Molecule.toJSON(mol),
   );
 

src/data/data1d/Spectrum1D/SumManager.ts

@@ -1,7 +1,7 @@
 import { Draft } from 'immer';
 
 import { State } from '../../../component/reducer/Reducer';
-import { InternalMolecule } from '../../molecules/Molecule';
+import { StateMoleculeExtended } from '../../molecules/Molecule';
 import { Datum1D, Integrals, Ranges } from '../../types/data1d';
 import { SumOptions } from '../../types/data1d/SumOptions';
 import getAtom from '../../utilities/getAtom';
@@ -14,7 +14,7 @@ import {
 
 export interface SumParams {
   nucleus: string;
-  molecules: InternalMolecule[];
+  molecules: StateMoleculeExtended[];
 }
 
 export type SetSumOptions = Omit<SumOptions, 'isSumConstant'>;
@@ -92,7 +92,7 @@ export function getAtoms(mf: string): Record<string, number> {
 export function changeSpectraRelativeSum(
   draft: Draft<State>,
   molId: string,
-  molecule: InternalMolecule,
+  molecule: StateMoleculeExtended,
 ) {
   const keys: (keyof Datum1D)[] = ['ranges', 'integrals'];
 

src/data/molecules/Molecule.ts

@@ -3,12 +3,12 @@ import { Molecule as OCLMolecule } from 'openchemlib/full';
 
 import getAtomsFromMF from '../utilities/getAtomsFromMF';
 
-export interface Molecule {
+export interface StateMolecule {
   id: string;
   molfile: string;
   label: string;
 }
-export interface InternalMolecule extends Molecule {
+export interface StateMoleculeExtended extends StateMolecule {
   mf: string;
   em: number;
   mw: number;
@@ -26,8 +26,8 @@ export interface FloatingMolecules {
   visible: boolean;
 }
 export function initMolecule(
-  options: Partial<Molecule> = {},
-): InternalMolecule {
+  options: Partial<StateMolecule> = {},
+): StateMoleculeExtended {
   const id = options.id || v4();
   const label = options.label || 'p#';
   const molfile = options.molfile || '';
@@ -47,7 +47,7 @@ export function initMolecule(
   };
 }
 
-export function toJSON(molecule: InternalMolecule): Molecule {
+export function toJSON(molecule: StateMoleculeExtended): StateMolecule {
   const { molfile, label, id } = molecule;
   return {
     molfile,

src/data/molecules/MoleculeManager.ts

@@ -1,11 +1,11 @@
 import { Molecule as OCLMolecule } from 'openchemlib/full';
 
-import { initMolecule, InternalMolecule } from './Molecule';
+import { initMolecule, StateMoleculeExtended } from './Molecule';
 
-export function fromJSON(mols: InternalMolecule[] = []) {
+export function fromJSON(mols: StateMoleculeExtended[] = []) {
   const reservedNumbers = extractLabelsNumbers(mols);
 
-  const molecules: InternalMolecule[] = [];
+  const molecules: StateMoleculeExtended[] = [];
   for (const mol of mols) {
     const molecule = OCLMolecule.fromMolfile(mol.molfile);
     const fragments = molecule.getFragments();
@@ -43,7 +43,7 @@ export function addMolfile(molecules, molfile) {
 
 export function setMolfile(
   molecules,
-  currentMolecule: Pick<InternalMolecule, 'id' | 'molfile' | 'label'>,
+  currentMolecule: Pick<StateMoleculeExtended, 'id' | 'molfile' | 'label'>,
 ) {
   const { molfile, id, label } = currentMolecule;
   const reservedNumbers = extractLabelsNumbers(molecules);
@@ -82,7 +82,7 @@ export function extractNumber(value: string) {
   return /(?<number>\d+)/.exec(value)?.groups?.number || null;
 }
 
-export function extractLabelsNumbers(molecules: InternalMolecule[]) {
+export function extractLabelsNumbers(molecules: StateMoleculeExtended[]) {
   const values: number[] = [];
   for (const molecule of molecules) {
     const value = extractNumber(molecule.label);