Move layer visibility toggle to the left of the layer title and icon

docs/contributor_guide/code_quality.md

@@ -0,0 +1,58 @@
+# Code quality
+
+```{seealso}
+Complete [dev install](./development_setup) instructions before continuing.
+```
+
+We have several tools configured for checking code quality:
+
+- **Pre-commit checks run automatically at commit time.**
+  Install checks with `pre-commit install`.
+  Run them manually with `pre-commit run --all-files`.
+  **Will exit non-zero when finding errors or changing files.**
+
+  - Ruff formats and lints (sometimes autofixes) Python code.
+
+  - Generic pre-commit checks help avoid common mistakes like committing large
+    files or trailing whitespace.
+
+- **Formatting and lint checks and autofixers for Typescript, Javascript, CSS, JSON, Markdown, and YAML.**
+  Defined as package scripts (in `package.json`).
+  Run manually with `jlpm run lint`.
+  **Will exit 0 when applying fixes.**
+  **Check the logs and/or `git status` after every run.**
+
+  - Prettier formats the file types listed above.
+
+  - Eslint lints (sometimes autofixes) JS/TS code.
+
+- **UI tests using [Galata](https://github.com/jupyterlab/galata)**, defined in the
+  `ui-tests/` directory.
+
+  ```{warning}
+  Some UI tests depend on snapshot (screenshot) comparison, which depends strongly on
+  the system used to generate the snapshots. Variables like GPU, operating system,
+  display scaling, and more can affect the outcome of snapshot testing. The instructions
+  below will skip snapshot tests for this reason. Please **do not** run snapshot tests
+  locally and instead rely on CI (GitHub Actions).
+  ```
+
+  To run locally:
+
+  ```bash
+  cd ui-tests
+  jlpm install             # If you haven't already
+  jlpm playwright install  # If you haven't already
+  jlpm run test:local      # Or, to test in jupyterlite, run `test:locallite`
+  ```
+
+  - DOM testing: Interact with the application programmatically and verify
+    resulting DOM looks correct.
+
+  - Snapshot testing: Interact with the application programmatically and verify
+    the resulting rendered content exactly matches snapshots in this
+    repository.
+    When snapshot tests fail, new snapshots can be generated by
+    commenting `please update snapshots` in a PR or locally running
+    `jlpm run test:update` from the `ui-tests/` directory.
+    Please carefully verify the snapshot changes are as expected before merging.

docs/contributor_guide/troubleshooting.md

@@ -6,3 +6,9 @@
   - This may be caused by having a `.gitignore` file in your home directory.
     This is a [known issue with Nx](https://github.com/nrwl/nx/issues/27494).
     The [only known workaround](https://github.com/nrwl/nx/issues/27494#issuecomment-2481207598) is to remove the `.gitignore` file from your home directory or to work in a location outside of the home directory tree.
+
+- Every UI test fails after 60 seconds due to timeout.
+
+  - This could be caused by having a JupyterLab instance already running at port
+    `:8888`. Please ensure that there is nothing running at <http://localhost:8888/lab>
+    before running tests.

packages/base/src/panelview/components/layers.tsx

@@ -416,27 +416,29 @@ function LayerComponent(props: ILayerProps): JSX.Element {
         onClick={setSelection}
         onContextMenu={setSelection}
       >
+        <Button
+          title={layer.visible ? 'Hide layer' : 'Show layer'}
+          onClick={toggleVisibility}
+          minimal
+        >
+          <LabIcon.resolveReact
+            icon={layer.visible ? visibilityIcon : nonVisibilityIcon}
+            className={`${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`}
+            tag="span"
+          />
+        </Button>
+
         {icons.has(layer.type) && (
           <LabIcon.resolveReact
             {...icons.get(layer.type)}
             className={LAYER_ICON_CLASS}
           />
         )}
+
         <span id={id} className={LAYER_TEXT_CLASS}>
           {name}
         </span>
       </div>
-      <Button
-        title={layer.visible ? 'Hide layer' : 'Show layer'}
-        onClick={toggleVisibility}
-        minimal
-      >
-        <LabIcon.resolveReact
-          icon={layer.visible ? visibilityIcon : nonVisibilityIcon}
-          className={`${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`}
-          tag="span"
-        />
-      </Button>
     </div>
   );
 }

packages/base/style/leftPanel.css

@@ -75,7 +75,6 @@
 
 .jp-gis-layer button,
 .jp-gis-source button {
-  margin-left: auto;
   min-height: unset;
   min-width: unset;
   padding: unset;

ui-tests/package.json

@@ -7,7 +7,9 @@
     "start": "JGIS_EXPOSE_MAPS=1 jupyter lab --config jupyter_server_test_config.py",
     "start:lite": "cd ../dist && python -m http.server -b 127.0.0.1 8000",
     "test": "npx playwright test --workers 1",
+    "test:local": "npx playwright test --ignore-snapshots --workers 1",
     "test:lite": "npx playwright test tests/lite.spec.ts --workers 1 --config playwright-lite.config.js",
+    "test:locallite": "npx playwright test tests/lite.spec.ts --ignore-snapshots --workers 1 --config playwright-lite.config.js",
     "test:update": "npx playwright test --update-snapshots",
     "test:updatelite": "jlpm run test:lite --update-snapshots",
     "test:debug": "PWDEBUG=1 npx playwright test --workers 1"

ui-tests/tests/left-panel.spec.ts

@@ -118,8 +118,14 @@ test.describe('#layerPanel', () => {
       const layerIcons = layerTree.locator(
         '.jp-gis-layer .jp-gis-layerIcon svg'
       );
+      const visToggleIcon = layerIcons.nth(0);
+      const rasterIcon = layerIcons.nth(1);
 
-      await expect(layerIcons.first()).toHaveAttribute(
+      await expect(visToggleIcon).toHaveAttribute(
+        'data-icon',
+        'jupytergis::visibility'
+      );
+      await expect(rasterIcon).toHaveAttribute(
         'data-icon',
         'jupytergis::raster'
       );