Add layer in the layers tree from the GIS model (#22)

* Add layer in the layers tree from the GIS model * Docstring and lint * Rename layersTree to layerTree and layersGroup to layerGroup * lint * Fix test after rebase * Correction after rebase
geojupyter · Jul 2, 2024 · 6de01e0 · 6de01e0
1 parent 1bd72af
commit 6de01e0
Show file tree

Hide file tree

Showing 14 changed files with 309 additions and 153 deletions.
diff --git a/examples/test.jGIS b/examples/test.jGIS
@@ -1,40 +1,31 @@
 {
   "layers": {
-    "a5ac7671-74bb-4c99-a494-916348397d01": {
-      "name": "Open Street Map 2",
+    "a0044fd7-f167-445f-b3d1-620a8f94b498": {
+      "name": "Open Topo Map",
       "type": "RasterLayer",
-      "visible": true,
       "parameters": {
-        "source": "f22850a8-bfd5-4dfb-ba1e-c3f2c3ccf93b"
-      }
+        "source": "5fd42e3b-4681-4607-b15d-65c3a3e89b32"
+      },
+      "visible": true
     },
-    "a0044fd7-f167-445f-b3d1-620a8f94b498": {
+    "a5ac7671-74bb-4c99-a494-916348397d01": {
+      "name": "Open Street Map 2",
       "parameters": {
-        "source": "5fd42e3b-4681-4607-b15d-65c3a3e89b32"
+        "source": "f22850a8-bfd5-4dfb-ba1e-c3f2c3ccf93b"
       },
       "type": "RasterLayer",
-      "name": "Open Topo Map",
       "visible": true
     },
     "2467576f-b527-4cb7-998d-fa1d056fb8a1": {
       "parameters": {
         "source": "699facc9-e7c4-4f38-acf1-1fd7f02d9f36"
       },
-      "type": "RasterLayer",
+      "visible": true,
       "name": "Open Street Map",
-      "visible": true
+      "type": "RasterLayer"
     }
   },
   "sources": {
-    "5fd42e3b-4681-4607-b15d-65c3a3e89b32": {
-      "type": "RasterSource",
-      "parameters": {
-        "minZoom": 0.0,
-        "maxZoom": 24.0,
-        "url": "https://tile.opentopomap.org/{z}/{x}/{y}.png "
-      },
-      "name": "Open Topo Map"
-    },
     "f22850a8-bfd5-4dfb-ba1e-c3f2c3ccf93b": {
       "parameters": {
         "maxZoom": 24.0,
@@ -44,21 +35,29 @@
       "type": "RasterSource",
       "name": "Open Street Map 2"
     },
+    "5fd42e3b-4681-4607-b15d-65c3a3e89b32": {
+      "parameters": {
+        "url": "https://tile.opentopomap.org/{z}/{x}/{y}.png ",
+        "maxZoom": 24.0,
+        "minZoom": 0.0
+      },
+      "name": "Open Topo Map",
+      "type": "RasterSource"
+    },
     "699facc9-e7c4-4f38-acf1-1fd7f02d9f36": {
+      "type": "RasterSource",
       "name": "Open Street Map",
       "parameters": {
-        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
         "minZoom": 0.0,
-        "maxZoom": 24.0
-      },
-      "type": "RasterSource"
+        "maxZoom": 24.0,
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+      }
     }
   },
   "options": {},
-  "layersTree": [
+  "layerTree": [
     "2467576f-b527-4cb7-998d-fa1d056fb8a1",
     {
-      "name": "level 1 group",
       "layers": [
         "a0044fd7-f167-445f-b3d1-620a8f94b498",
         {
@@ -67,7 +66,8 @@
             "a5ac7671-74bb-4c99-a494-916348397d01"
           ]
         }
-      ]
+      ],
+      "name": "level 1 group"
     }
   ]
 }
diff --git a/packages/base/src/commands.ts b/packages/base/src/commands.ts
@@ -181,7 +181,7 @@ namespace Private {
           };
 
           sharedModel.addSource(sourceId, sourceModel);
-          sharedModel.addLayer(UUID.uuid4(), layerModel);
+          current.context.model.addLayer(UUID.uuid4(), layerModel);
         },
         cancelButton: () => {
           current.context.model.syncFormData(undefined);

diff --git a/packages/base/src/mainview/mainview.tsx b/packages/base/src/mainview/mainview.tsx
@@ -2,7 +2,7 @@ import { MapChange } from '@jupyter/ydoc';
 import {
   IJGISLayer,
   IJGISLayerDocChange,
-  IJGISLayersTreeDocChange,
+  IJGISLayerTreeDocChange,
   IJGISSource,
   IJGISSourceDocChange,
   IJupyterGISClientState,
@@ -55,7 +55,7 @@ export class MainView extends React.Component<IProps, IStates> {
     );
 
     this._model.sharedLayersChanged.connect(this._onLayersChanged, this);
-    this._model.sharedLayersTreeChanged.connect(this._onLayerTreeChange, this);
+    this._model.sharedLayerTreeChanged.connect(this._onLayerTreeChange, this);
     this._model.sharedSourcesChanged.connect(this._onSourcesChange, this);
 
     this.state = {
@@ -380,7 +380,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
   private _onLayerTreeChange(
     sender: IJupyterGISDoc,
-    change: IJGISLayersTreeDocChange
+    change: IJGISLayerTreeDocChange
   ): void {
     // We can't properly use the change, because of the nested groups in the the shared
     // document which is flattened for the map tool.

diff --git a/packages/base/src/panelview/components/layers.tsx b/packages/base/src/panelview/components/layers.tsx
@@ -1,6 +1,6 @@
 import {
-  IJGISLayersGroup,
-  IJGISLayersTree,
+  IJGISLayerGroup,
+  IJGISLayerTree,
   IJupyterGISClientState,
   IJupyterGISModel,
   ISelection
@@ -17,9 +17,9 @@ import { nonVisibilityIcon, rasterIcon, visibilityIcon } from '../../icons';
 import { IControlPanelModel } from '../../types';
 
 const LAYERS_PANEL_CLASS = 'jp-gis-layerPanel';
-const LAYERS_GROUP_CLASS = 'jp-gis-layersGroup';
-const LAYERS_GROUP_HEADER_CLASS = 'jp-gis-layersGroupHeader';
-const LAYERS_GROUP_COLLAPSER_CLASS = 'jp-gis-layersGroupCollapser';
+const LAYER_GROUP_CLASS = 'jp-gis-layerGroup';
+const LAYER_GROUP_HEADER_CLASS = 'jp-gis-layerGroupHeader';
+const LAYER_GROUP_COLLAPSER_CLASS = 'jp-gis-layerGroupCollapser';
 const LAYER_ITEM_CLASS = 'jp-gis-layerItem';
 const LAYER_CLASS = 'jp-gis-layer';
 const LAYER_TITLE_CLASS = 'jp-gis-layerTitle';
@@ -44,7 +44,7 @@ export class LayersPanel extends Panel {
   constructor(options: LayersPanel.IOptions) {
     super();
     this._model = options.model;
-    this.id = 'jupytergis::layersTree';
+    this.id = 'jupytergis::layerTree';
     this.addClass(LAYERS_PANEL_CLASS);
     this.addWidget(
       ReactWidget.create(
@@ -91,8 +91,8 @@ function LayersBodyComponent(props: IBodyProps): JSX.Element {
   const [model, setModel] = useState<IJupyterGISModel | undefined>(
     props.model?.jGISModel
   );
-  const [layersTree, setLayersTree] = useState<IJGISLayersTree>(
-    model?.getLayersTree() || []
+  const [layerTree, setLayerTree] = useState<IJGISLayerTree>(
+    model?.getLayerTree() || []
   );
 
   /**
@@ -103,18 +103,18 @@ function LayersBodyComponent(props: IBodyProps): JSX.Element {
   };
 
   /**
-   * Listen to the layers and layers tree changes.
+   * Listen to the layers and layer tree changes.
    */
   useEffect(() => {
     const updateLayers = () => {
-      setLayersTree(model?.getLayersTree() || []);
+      setLayerTree(model?.getLayerTree() || []);
     };
-    model?.sharedModel?.layersChanged.connect(updateLayers);
-    model?.sharedModel?.layersTreeChanged.connect(updateLayers);
+    model?.sharedModel.layersChanged.connect(updateLayers);
+    model?.sharedModel.layerTreeChanged.connect(updateLayers);
 
     return () => {
-      model?.sharedModel?.layersChanged.disconnect(updateLayers);
-      model?.sharedModel?.layersTreeChanged.disconnect(updateLayers);
+      model?.sharedModel.layersChanged.disconnect(updateLayers);
+      model?.sharedModel.layerTreeChanged.disconnect(updateLayers);
     };
   }, [model]);
 
@@ -123,20 +123,20 @@ function LayersBodyComponent(props: IBodyProps): JSX.Element {
    */
   props.model?.documentChanged.connect((_, widget) => {
     setModel(widget?.context.model);
-    setLayersTree(widget?.context.model?.getLayersTree() || []);
+    setLayerTree(widget?.context.model?.getLayerTree() || []);
   });
 
   return (
     <div>
-      {layersTree.map(layer =>
+      {layerTree.map(layer =>
         typeof layer === 'string' ? (
           <LayerComponent
             gisModel={model}
             layerId={layer}
             onClick={onItemClick}
           />
         ) : (
-          <LayersGroupComponent
+          <LayerGroupComponent
             gisModel={model}
             group={layer}
             onClick={onItemClick}
@@ -148,18 +148,18 @@ function LayersBodyComponent(props: IBodyProps): JSX.Element {
 }
 
 /**
- * Properties of the layers group component.
+ * Properties of the layer group component.
  */
-interface ILayersGroupProps {
+interface ILayerGroupProps {
   gisModel: IJupyterGISModel | undefined;
-  group: IJGISLayersGroup | undefined;
+  group: IJGISLayerGroup | undefined;
   onClick: (item?: string) => void;
 }
 
 /**
  * The component to handle group of layers.
  */
-function LayersGroupComponent(props: ILayersGroupProps): JSX.Element {
+function LayerGroupComponent(props: ILayerGroupProps): JSX.Element {
   const { group, gisModel } = props;
   if (group === undefined) {
     return <></>;
@@ -169,12 +169,12 @@ function LayersGroupComponent(props: ILayersGroupProps): JSX.Element {
   const layers = group?.layers ?? [];
 
   return (
-    <div className={`${LAYER_ITEM_CLASS} ${LAYERS_GROUP_CLASS}`}>
-      <div onClick={() => setOpen(!open)} className={LAYERS_GROUP_HEADER_CLASS}>
+    <div className={`${LAYER_ITEM_CLASS} ${LAYER_GROUP_CLASS}`}>
+      <div onClick={() => setOpen(!open)} className={LAYER_GROUP_HEADER_CLASS}>
         <LabIcon.resolveReact
           icon={caretDownIcon}
           className={
-            LAYERS_GROUP_COLLAPSER_CLASS + (open ? ' jp-mod-expanded' : '')
+            LAYER_GROUP_COLLAPSER_CLASS + (open ? ' jp-mod-expanded' : '')
           }
           tag={'span'}
         />
@@ -190,7 +190,7 @@ function LayersGroupComponent(props: ILayersGroupProps): JSX.Element {
                 onClick={props.onClick}
               />
             ) : (
-              <LayersGroupComponent
+              <LayerGroupComponent
                 gisModel={gisModel}
                 group={layer}
                 onClick={props.onClick}

diff --git a/packages/base/src/panelview/leftpanel.tsx b/packages/base/src/panelview/leftpanel.tsx
@@ -16,10 +16,10 @@ export class LeftPanelWidget extends SidePanel {
     // const datasources = new DataSourceList({ controlPanelModel: this._model });
     // this.addWidget(datasources);
 
-    const layersTree = new LayersPanel({ model: this._model });
-    layersTree.title.caption = 'Layer tree';
-    layersTree.title.label = 'Layers';
-    this.addWidget(layersTree);
+    const layerTree = new LayersPanel({ model: this._model });
+    layerTree.title.caption = 'Layer tree';
+    layerTree.title.label = 'Layers';
+    this.addWidget(layerTree);
 
     options.tracker.currentChanged.connect((_, changed) => {
       if (changed) {

diff --git a/packages/base/style/leftPanel.css b/packages/base/style/leftPanel.css
@@ -7,28 +7,28 @@
   padding: 2px 0 2px 12px;
 }
 
-.jp-gis-layersGroup {
+.jp-gis-layerGroup {
   display: flex;
   flex-direction: column;
 }
 
-.jp-gis-layersGroupHeader {
+.jp-gis-layerGroupHeader {
   display: flex;
   margin-left: -2px;
   padding-bottom: 4px;
 }
 
-.jp-gis-layersGroupHeader:hover {
+.jp-gis-layerGroupHeader:hover {
   cursor: pointer;
 }
 
-.jp-gis-layersGroupCollapser {
+.jp-gis-layerGroupCollapser {
   transform: rotate(-90deg);
   margin: auto 0;
   height: 16px;
 }
 
-.jp-gis-layersGroupCollapser.jp-mod-expanded {
+.jp-gis-layerGroupCollapser.jp-mod-expanded {
   transform: rotate(0deg);
 }