Consistently sort and group all TS imports

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
     project: "tsconfig.eslint.json",
     sourceType: "module",
   },
-  plugins: ["@typescript-eslint"],
+  plugins: ["@typescript-eslint", "import"],
   rules: {
     "@typescript-eslint/naming-convention": [
       "error",
@@ -32,8 +32,24 @@ module.exports = {
       "single",
       { avoidEscape: true, allowTemplateLiterals: false },
     ],
-    curly: ["error", "all"],
-    eqeqeq: "error",
+    "curly": ["error", "all"],
+    "eqeqeq": "error",
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {"order": "asc"},
+        "groups": [
+          "external",
+          "builtin",
+          ["internal", "sibling", "parent", "index"]
+        ],
+        "distinctGroup": false,
+        "pathGroups": [
+          {pattern: "@/**", group: "internal", position: "before"}
+        ],
+        "newlines-between": "always"
+      }
+    ],
     "prefer-arrow-callback": "error",
     "no-duplicate-imports": "error",
   },

package.json

@@ -64,6 +64,7 @@
     "copy-webpack-plugin": "^10.0.0",
     "eslint": "^8.36.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.0.1",
     "lerna": "^8.1.9",
     "npm-run-all": "^4.1.5",

packages/base/src/annotations/components/Annotation.tsx

@@ -8,8 +8,9 @@ import { IAnnotationModel, IJupyterGISModel } from '@jupytergis/schema';
 import { showDialog, Dialog } from '@jupyterlab/apputils';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useMemo, useState } from 'react';
-import { Message } from './Message';
+
 import { IControlPanelModel } from '@/src/types';
+import { Message } from './Message';
 
 export interface IAnnotationProps {
   itemId: string;

packages/base/src/annotations/components/AnnotationFloater.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
 import { faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useState } from 'react';
+
 import Annotation, { IAnnotationProps } from './Annotation';
 
 const AnnotationFloater = ({

packages/base/src/classificationModes.ts

@@ -1,6 +1,7 @@
 // Adapted from https://github.com/qgis/QGIS/blob/master/src/core/classification/
 
 import { Pool, fromUrl, TypedArray } from 'geotiff';
+
 import { InterpolationType } from './dialogs/symbology/tiff_layer/types/SingleBandPseudoColor';
 
 export namespace VectorClassifications {

packages/base/src/commands.ts

@@ -17,23 +17,24 @@ import { IStateDB } from '@jupyterlab/statedb';
 import { ITranslator } from '@jupyterlab/translation';
 import { CommandRegistry } from '@lumino/commands';
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
+import { Coordinate } from 'ol/coordinate';
+import { fromLonLat } from 'ol/proj';
+
 import { CommandIDs, icons } from './constants';
-import { LayerCreationFormDialog } from './dialogs/layerCreationFormDialog';
+import { ProcessingFormDialog } from './dialogs/ProcessingFormDialog';
 import { LayerBrowserWidget } from './dialogs/layerBrowserDialog';
+import { LayerCreationFormDialog } from './dialogs/layerCreationFormDialog';
 import { SymbologyWidget } from './dialogs/symbology/symbologyDialog';
+import { targetWithCenterIcon } from './icons';
 import keybindings from './keybindings.json';
-import { JupyterGISTracker } from './types';
-import { JupyterGISDocumentWidget } from './widget';
-import { getGeoJSONDataFromLayerSource, downloadFile } from './tools';
-import { ProcessingFormDialog } from './dialogs/ProcessingFormDialog';
 import {
   getSingleSelectedLayer,
   selectedLayerIsOfType,
   processSelectedLayer
 } from './processing';
-import { fromLonLat } from 'ol/proj';
-import { Coordinate } from 'ol/coordinate';
-import { targetWithCenterIcon } from './icons';
+import { getGeoJSONDataFromLayerSource, downloadFile } from './tools';
+import { JupyterGISTracker } from './types';
+import { JupyterGISDocumentWidget } from './widget';
 
 interface ICreateEntry {
   tracker: JupyterGISTracker;

packages/base/src/console/consoleview.ts

@@ -1,16 +1,17 @@
+import { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
 import { ConsolePanel } from '@jupyterlab/console';
-import { ServiceManager } from '@jupyterlab/services';
-import { BoxPanel, Widget } from '@lumino/widgets';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
-import { debounce } from '@/src/tools';
+import { ServiceManager } from '@jupyterlab/services';
 import {
   closeIcon,
   CommandToolbarButton,
   expandIcon,
   Toolbar
 } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
+import { BoxPanel, Widget } from '@lumino/widgets';
+
+import { debounce } from '@/src/tools';
 
 export class ConsoleView extends BoxPanel {
   constructor(options: ConsoleView.IOptions) {

packages/base/src/constants.ts

@@ -1,4 +1,5 @@
 import { LabIcon, redoIcon, undoIcon } from '@jupyterlab/ui-components';
+
 import {
   bookOpenIcon,
   clockIcon,

packages/base/src/dialogs/ProcessingFormDialog.tsx

@@ -1,13 +1,14 @@
 import { IDict, IJupyterGISModel } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
 import * as React from 'react';
+
 import {
   BaseForm,
   IBaseFormProps
 } from '@/src/formbuilder/objectform/baseform';
 import { DissolveForm } from '@/src/formbuilder/objectform/process';
-import { Signal } from '@lumino/signaling';
-import { PromiseDelegate } from '@lumino/coreutils';
 
 export interface IProcessingFormDialogOptions extends IBaseFormProps {
   formContext: 'update' | 'create';

packages/base/src/dialogs/layerBrowserDialog.tsx

@@ -14,8 +14,8 @@ import { PromiseDelegate, UUID } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import React, { ChangeEvent, MouseEvent, useEffect, useState } from 'react';
 
-import CUSTOM_RASTER_IMAGE from '../../rasterlayer_gallery/custom_raster.png';
 import { CreationFormWrapper } from './layerCreationFormDialog';
+import CUSTOM_RASTER_IMAGE from '../../rasterlayer_gallery/custom_raster.png';
 
 interface ILayerBrowserDialogProps {
   model: IJupyterGISModel;

packages/base/src/dialogs/layerCreationFormDialog.tsx

@@ -1,10 +1,10 @@
 import { IDict } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
 import * as React from 'react';
 
 import { CreationForm, ICreationFormProps } from '@/src/formbuilder';
-import { Signal } from '@lumino/signaling';
-import { PromiseDelegate } from '@lumino/coreutils';
 
 export interface ICreationFormWrapperProps extends ICreationFormProps {
   /**

packages/base/src/dialogs/symbology/classificationModes.ts

@@ -1,6 +1,7 @@
 // Adapted from https://github.com/qgis/QGIS/blob/master/src/core/classification/
 
 import { Pool, fromUrl, TypedArray } from 'geotiff';
+
 import { InterpolationType } from './tiff_layer/types/SingleBandPseudoColor';
 
 export namespace VectorClassifications {

packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@jupyterlab/ui-components';
 import colormap from 'colormap';
 import React, { useEffect, useRef, useState } from 'react';
+
 import ColorRampEntry from './ColorRampEntry';
 
 export interface IColorMap {

packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx

@@ -1,10 +1,11 @@
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IDict } from '@jupytergis/schema';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
+
 import CanvasSelectComponent from './CanvasSelectComponent';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ModeSelectRow from './ModeSelectRow';
-import { IDict } from '@jupytergis/schema';
 
 interface IColorRampProps {
   modeOptions: string[];

packages/base/src/dialogs/symbology/components/color_ramp/ColorRampEntry.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+
 import { IColorMap } from './CanvasSelectComponent';
 
 interface IColorRampEntryProps {

packages/base/src/dialogs/symbology/components/color_stops/StopContainer.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
 import { Button } from '@jupyterlab/ui-components';
+import React from 'react';
+
 import { IStopRow } from '@/src/dialogs/symbology/symbologyDialog';
 import StopRow from './StopRow';
 

packages/base/src/dialogs/symbology/components/color_stops/StopRow.tsx

@@ -2,6 +2,7 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef } from 'react';
+
 import { IStopRow } from '@/src/dialogs/symbology/symbologyDialog';
 
 const StopRow = ({

packages/base/src/dialogs/symbology/hooks/useGetBandInfo.ts

@@ -1,6 +1,7 @@
 import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
-import { useEffect, useState } from 'react';
 import { fromUrl, fromBlob } from 'geotiff';
+import { useEffect, useState } from 'react';
+
 import { loadFile } from '@/src/tools';
 
 export interface IBandHistogram {

packages/base/src/dialogs/symbology/hooks/useGetProperties.ts

@@ -2,6 +2,7 @@
 
 import { GeoJSONFeature1, IJupyterGISModel } from '@jupytergis/schema';
 import { useEffect, useState } from 'react';
+
 import { loadFile } from '@/src/tools';
 
 interface IUseGetPropertiesProps {

packages/base/src/dialogs/symbology/symbologyDialog.tsx

@@ -4,6 +4,7 @@ import { IStateDB } from '@jupyterlab/statedb';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
+
 import TiffRendering from './tiff_layer/TiffRendering';
 import VectorRendering from './vector_layer/VectorRendering';
 

packages/base/src/dialogs/symbology/symbologyUtils.ts

@@ -1,7 +1,8 @@
 import { IJGISLayer } from '@jupytergis/schema';
-import { IStopRow } from './symbologyDialog';
 import colormap from 'colormap';
 
+import { IStopRow } from './symbologyDialog';
+
 export namespace VectorUtils {
   export const buildColorInfo = (layer: IJGISLayer) => {
     // This it to parse a color object on the layer

packages/base/src/dialogs/symbology/tiff_layer/TiffRendering.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
+
 import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
-import SingleBandPseudoColor from './types/SingleBandPseudoColor';
 import MultibandColor from './types/MultibandColor';
+import SingleBandPseudoColor from './types/SingleBandPseudoColor';
 
 const TiffRendering = ({
   model,

packages/base/src/dialogs/symbology/tiff_layer/components/BandRow.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import { IBandRow } from '@/src/dialogs/symbology/hooks/useGetBandInfo';
 
 interface IBandRowProps {

packages/base/src/dialogs/symbology/tiff_layer/types/MultibandColor.tsx

@@ -1,10 +1,11 @@
 import { IWebGlLayer } from '@jupytergis/schema';
 import { ExpressionValue } from 'ol/expr/expression';
 import React, { useEffect, useRef, useState } from 'react';
-import { Spinner } from '@/src/mainview/spinner';
+
 import useGetBandInfo from '@/src/dialogs/symbology/hooks/useGetBandInfo';
 import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
 import BandRow from '@/src/dialogs/symbology/tiff_layer/components/BandRow';
+import { Spinner } from '@/src/mainview/spinner';
 
 interface ISelectedBands {
   red: number;

packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx

@@ -3,8 +3,7 @@ import { Button } from '@jupyterlab/ui-components';
 import { ReadonlyJSONObject } from '@lumino/coreutils';
 import { ExpressionValue } from 'ol/expr/expression';
 import React, { useEffect, useRef, useState } from 'react';
-import { Spinner } from '@/src/mainview/spinner';
-import { GlobalStateDbManager } from '@/src/store';
+
 import { GeoTiffClassifications } from '@/src/dialogs/symbology/classificationModes';
 import ColorRamp, {
   ColorRampOptions
@@ -19,6 +18,8 @@ import {
 } from '@/src/dialogs/symbology/symbologyDialog';
 import { Utils } from '@/src/dialogs/symbology/symbologyUtils';
 import BandRow from '@/src/dialogs/symbology/tiff_layer/components/BandRow';
+import { Spinner } from '@/src/mainview/spinner';
+import { GlobalStateDbManager } from '@/src/store';
 
 export type InterpolationType = 'discrete' | 'linear' | 'exact';
 

packages/base/src/dialogs/symbology/vector_layer/VectorRendering.tsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from 'react';
+
+import { useGetProperties } from '@/src/dialogs/symbology/hooks/useGetProperties';
 import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
+import {
+  getColorCodeFeatureAttributes,
+  getNumericFeatureAttributes
+} from '@/src/tools';
 import Canonical from './types/Canonical';
 import Categorized from './types/Categorized';
 import Graduated from './types/Graduated';
 import Heatmap from './types/Heatmap';
 import SimpleSymbol from './types/SimpleSymbol';
-import { useGetProperties } from '@/src/dialogs/symbology/hooks/useGetProperties';
-import {
-  getColorCodeFeatureAttributes,
-  getNumericFeatureAttributes
-} from '@/src/tools';
 
 const VectorRendering = ({
   model,

packages/base/src/dialogs/symbology/vector_layer/types/Canonical.tsx

@@ -1,10 +1,11 @@
 import { IVectorLayer } from '@jupytergis/schema';
 import { ExpressionValue } from 'ol/expr/expression';
 import React, { useEffect, useRef, useState } from 'react';
-import { getColorCodeFeatureAttributes } from '@/src/tools';
+
 import { useGetProperties } from '@/src/dialogs/symbology/hooks/useGetProperties';
 import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
 import ValueSelect from '@/src/dialogs/symbology/vector_layer/components/ValueSelect';
+import { getColorCodeFeatureAttributes } from '@/src/tools';
 
 const Canonical = ({
   model,

packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx

@@ -2,7 +2,7 @@ import { IVectorLayer } from '@jupytergis/schema';
 import { ReadonlyJSONObject } from '@lumino/coreutils';
 import { ExpressionValue } from 'ol/expr/expression';
 import React, { useEffect, useRef, useState } from 'react';
-import { getNumericFeatureAttributes } from '@/src/tools';
+
 import ColorRamp from '@/src/dialogs/symbology/components/color_ramp/ColorRamp';
 import StopContainer from '@/src/dialogs/symbology/components/color_stops/StopContainer';
 import { useGetProperties } from '@/src/dialogs/symbology/hooks/useGetProperties';
@@ -12,6 +12,7 @@ import {
 } from '@/src/dialogs/symbology/symbologyDialog';
 import { Utils, VectorUtils } from '@/src/dialogs/symbology/symbologyUtils';
 import ValueSelect from '@/src/dialogs/symbology/vector_layer/components/ValueSelect';
+import { getNumericFeatureAttributes } from '@/src/tools';
 
 const Categorized = ({
   model,

packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx

@@ -1,7 +1,7 @@
 import { IVectorLayer } from '@jupytergis/schema';
 import { ExpressionValue } from 'ol/expr/expression';
 import React, { useEffect, useRef, useState } from 'react';
-import { getNumericFeatureAttributes } from '@/src/tools';
+
 import { VectorClassifications } from '@/src/dialogs/symbology/classificationModes';
 import ColorRamp, {
   ColorRampOptions
@@ -14,6 +14,7 @@ import {
 } from '@/src/dialogs/symbology/symbologyDialog';
 import { Utils, VectorUtils } from '@/src/dialogs/symbology/symbologyUtils';
 import ValueSelect from '@/src/dialogs/symbology/vector_layer/components/ValueSelect';
+import { getNumericFeatureAttributes } from '@/src/tools';
 
 const Graduated = ({
   model,

packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx

@@ -1,5 +1,6 @@
 import colormap from 'colormap';
 import React, { useEffect, useRef, useState } from 'react';
+
 import CanvasSelectComponent from '@/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent';
 import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
 

packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx

@@ -1,7 +1,8 @@
 import { FlatStyle } from 'ol/style/flat';
 import React, { useEffect, useRef, useState } from 'react';
-import { IParsedStyle, parseColor } from '@/src/tools';
+
 import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
+import { IParsedStyle, parseColor } from '@/src/tools';
 
 const SimpleSymbol = ({
   model,