Add story maps (#994)

* Add command

* Add landmarks as a layer

* Move to landmark wip

* Add a zoom to layer button

* Add a story map thing to the file

* Add temp button to create story

* Add story creation method to model

* Add story editing(?) panel

* Rename panel

* Add storiesMap to file

* Add some panels

* Add temp viewer panel

* Start implementing story viewer

* Use textarea for markdown field

* Push zoom button to right side

* Only support one story

* Handle story signal stuff

* Update landmark order when drag and dropping

* Update viewer order based on list order

* Tidy

* Hack story selection

* Effect cleaning

* Return ID as well

* Refactor viewer panel

* Refactor editor panel

* Dont reverse landmark list

* Update viewer content when selecting landmarks

* Remove rank from schema

* Update viewer panel style

* Move to position when clicking landmark in unguided tour

* Remove zoomies

* Fix status bar loading when adding landmark

* Use one panel for both story panels

* Refactor editor panel

* Remove stray console logs

* Add story presentation as a setting

* Add presentation flags to side panels

* Some styling

* see ess ess

* Add button to recenter landmark

* Remove hardcoded id

* Clean up

* Format-on-save, why hast thou forsaken me?

* Landmark icon

* Allow customization for transition animations

* Change preview button to a switch

* Move nav buttons

* Cancel animations before starting another

* Remove landmarks item from story editor form

* Restore zoomies

* Replace visibility toggle with slide number indicator

* Move transition settings to landmark

* Select layer when moving through story; Move CSS to classes

* Better nav button styles

* Get story when mounting component

* Change default button border color

* Add form button to update extent and zoom of landmark

* Add padding

* GOOD rebase

* Preload image in case link is bad

* Rename storiesMap

* Change landmark extent button text

* Dont display slide number if layerName is defined

* Change add landmark label

* Add add landmark option to layer context menu

* Change add landmark command label wording

* Fix disabling object properties in presentation mode

* Invert presentation mode setting

* Fix overwriting values on opening file

* Add Story Map example

* Stop console spam

* Zoom out more on smooth transitions

* Change layer name

* Another GOOD rebase

* Why were these snapshots so old

* Update lockfile

* Lint

* Bot missed some snapshots, expected ones still had undo/redo

* Update Playwright Snapshots

* Update Playwright Snapshots

* Test

* Change UI text to use Segment instead of landmark

* add button

* Give model addStorySegment method

* Lint

* Update Playwright Snapshots

* Landmark -> Story Segment

* Lint

* Update example

* Bot on bot violence

* Update settings/options

* Use story mode setting and option to update UI

* Use old moveToPosition

* Update Playwright Snapshots

* Update Playwright Snapshots

* Fix presentation mode bool

* Update Playwright Snapshots

* Update Playwright Snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: gjmooney

examples/story_map.jGIS

@@ -0,0 +1,212 @@
+{
+  "layerTree": [
+    "5d10a9ba-eeef-486d-9761-33ff1ba4106e",
+    "5f790e80-230b-4c00-8426-b3a9385937a5",
+    "8591b32f-11c0-4d70-a997-e94d258bb100",
+    "bcd22241-e404-44b4-873b-81e6a4ccad84",
+    "5862186d-0cae-4cee-be39-18951e31030f",
+    "aabaa10b-4a6f-4a24-9ead-6f17bb7f2f7d",
+    "93080edc-815f-4364-a874-90fd53a60c35"
+  ],
+  "layers": {
+    "5862186d-0cae-4cee-be39-18951e31030f": {
+      "name": "The Redeemer",
+      "parameters": {
+        "opacity": 1.0,
+        "source": "a7e1fc1e-1ab9-461f-89cb-2010c790062f",
+        "symbologyState": {
+          "renderType": "Single Symbol"
+        }
+      },
+      "type": "VectorLayer",
+      "visible": true
+    },
+    "5d10a9ba-eeef-486d-9761-33ff1ba4106e": {
+      "name": "OpenStreetMap.Mapnik Layer",
+      "parameters": {
+        "extent": [
+          -7248097.58721681,
+          -743268.1554684378,
+          -6334954.257801768,
+          -303993.91946789756
+        ],
+        "opacity": 1.0,
+        "source": "32431800-9aad-4702-926b-52fcdce5530e",
+        "zoom": 7.604194565762505
+      },
+      "type": "RasterLayer",
+      "visible": true
+    },
+    "5f790e80-230b-4c00-8426-b3a9385937a5": {
+      "name": "Cristo Redentor",
+      "parameters": {
+        "content": {
+          "image": "https://images.pexels.com/photos/2771080/pexels-photo-2771080.jpeg",
+          "markdown": "**Christ the Redeemer** (Portuguese: *Cristo Redentor*, standard Brazilian Portuguese: [\u02c8k\u027eistu \u0281ed\u1ebd\u02c8to\u0281]) is an Art Deco statue of Jesus in Rio de Janeiro, Brazil, created by French-Polish sculptor Paul Landowski and built by Brazilian engineer Heitor da Silva Costa, in collaboration with French engineer Albert Caquot.",
+          "title": "The Redeemer"
+        },
+        "extent": [
+          -4814802.663104911,
+          -2630126.461218188,
+          -4804544.428248574,
+          -2622570.615984798
+        ],
+        "transition": {
+          "time": 2.0,
+          "type": "smooth"
+        },
+        "zoom": 14.080181481426658
+      },
+      "type": "StorySegmentLayer",
+      "visible": true
+    },
+    "8591b32f-11c0-4d70-a997-e94d258bb100": {
+      "name": "La Libert\u00e9 \u00e9clairant le monde",
+      "parameters": {
+        "content": {
+          "image": "https://images.pexels.com/photos/356844/pexels-photo-356844.jpeg",
+          "markdown": "**The Statue of Liberty** (Liberty Enlightening the World; French: *La Libert\u00e9 \u00e9clairant le monde*) is a colossal neoclassical sculpture of a robed and crowned female on Liberty Island in New York Harbor, within New York City.",
+          "title": "The Statue of Liberty"
+        },
+        "extent": [
+          -8244347.787989774,
+          4964878.911422763,
+          -8240146.493537257,
+          4967973.433151666
+        ],
+        "transition": {
+          "time": 2.0,
+          "type": "smooth"
+        },
+        "zoom": 15.368058180489786
+      },
+      "type": "StorySegmentLayer",
+      "visible": true
+    },
+    "93080edc-815f-4364-a874-90fd53a60c35": {
+      "name": "The Thinker",
+      "parameters": {
+        "opacity": 1.0,
+        "source": "19ef5002-5670-4c17-b53f-44a48b739158",
+        "symbologyState": {
+          "renderType": "Single Symbol"
+        }
+      },
+      "type": "VectorLayer",
+      "visible": true
+    },
+    "aabaa10b-4a6f-4a24-9ead-6f17bb7f2f7d": {
+      "name": "Statue of Liberty",
+      "parameters": {
+        "opacity": 1.0,
+        "source": "660bb0bb-e0ce-4692-a7c7-119829d6e0d1",
+        "symbologyState": {
+          "renderType": "Single Symbol"
+        }
+      },
+      "type": "VectorLayer",
+      "visible": true
+    },
+    "bcd22241-e404-44b4-873b-81e6a4ccad84": {
+      "name": "Le Penseur",
+      "parameters": {
+        "content": {
+          "image": "https://images.pexels.com/photos/6486115/pexels-photo-6486115.jpeg",
+          "markdown": "**The Thinker** (French: *Le Penseur*), by Auguste Rodin, is a bronze sculpture depicting a nude male figure of heroic size, seated on a large rock, leaning forward, his right elbow placed upon his left thigh, with the back of his right hand supporting his chin in a posture evocative of deep thought and contemplation.",
+          "title": "The Thinker"
+        },
+        "extent": [
+          255360.959592592,
+          6248688.604308756,
+          261009.190947415,
+          6252093.017728101
+        ],
+        "transition": {
+          "time": 2.0,
+          "type": "smooth"
+        },
+        "zoom": 15.230368389488868
+      },
+      "type": "StorySegmentLayer",
+      "visible": true
+    }
+  },
+  "metadata": {},
+  "options": {
+    "bearing": 0.0,
+    "extent": [
+      256226.31587442243,
+      6249293.335639825,
+      260143.83466558298,
+      6251488.286397034
+    ],
+    "latitude": 48.855574302496535,
+    "longitude": 2.319315992465925,
+    "pitch": 0.0,
+    "projection": "EPSG:3857",
+    "zoom": 15.230368389488868
+  },
+  "schemaVersion": "0.5.0",
+  "sources": {
+    "19ef5002-5670-4c17-b53f-44a48b739158": {
+      "name": "Marker",
+      "parameters": {
+        "feature": {
+          "coords": [
+            257771.740387152,
+            6250219.77589449
+          ]
+        }
+      },
+      "type": "MarkerSource"
+    },
+    "32431800-9aad-4702-926b-52fcdce5530e": {
+      "name": "OpenStreetMap.Mapnik",
+      "parameters": {
+        "attribution": "(C) OpenStreetMap contributors",
+        "interpolate": false,
+        "maxZoom": 19.0,
+        "minZoom": 0.0,
+        "provider": "OpenStreetMap",
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "urlParameters": {}
+      },
+      "type": "RasterSource"
+    },
+    "660bb0bb-e0ce-4692-a7c7-119829d6e0d1": {
+      "name": "Marker",
+      "parameters": {
+        "feature": {
+          "coords": [
+            -8242685.709008398,
+            4966710.369862526
+          ]
+        }
+      },
+      "type": "MarkerSource"
+    },
+    "a7e1fc1e-1ab9-461f-89cb-2010c790062f": {
+      "name": "Marker",
+      "parameters": {
+        "feature": {
+          "coords": [
+            -4810184.197896464,
+            -2626176.8148461888
+          ]
+        }
+      },
+      "type": "MarkerSource"
+    }
+  },
+  "stories": {
+    "1b181980-a95a-4f23-8e5d-980c66ff93ea": {
+      "storySegments": [
+        "5f790e80-230b-4c00-8426-b3a9385937a5",
+        "8591b32f-11c0-4d70-a997-e94d258bb100",
+        "bcd22241-e404-44b4-873b-81e6a4ccad84"
+      ],
+      "storyType": "guided",
+      "title": "Famous Statues"
+    }
+  }
+}

packages/base/package.json

@@ -68,6 +68,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@rjsf/core": "^4.2.0",
@@ -93,6 +94,7 @@
     "proj4-list": "1.0.4",
     "react": "^18.0.1",
     "react-day-picker": "^9.7.0",
+    "react-markdown": "^10.1.0",
     "shpjs": "^6.1.0",
     "styled-components": "^5.3.6",
     "three": "^0.135.0",

packages/base/src/commands/BaseCommandIDs.ts

@@ -65,3 +65,6 @@ export const showFiltersTab = 'jupytergis:showFiltersTab';
 export const showObjectPropertiesTab = 'jupytergis:showObjectPropertiesTab';
 export const showAnnotationsTab = 'jupytergis:showAnnotationsTab';
 export const showIdentifyPanelTab = 'jupytergis:showIdentifyPanelTab';
+
+// Story maps
+export const addStorySegment = 'jupytergis:addStorySegment';

packages/base/src/commands/index.ts

@@ -1054,6 +1054,28 @@ export function addCommands(
     ...icons.get(CommandIDs.addMarker),
   });
 
+  commands.addCommand(CommandIDs.addStorySegment, {
+    label: trans.__('Add Story Segment'),
+    isEnabled: () => {
+      const current = tracker.currentWidget;
+      if (!current) {
+        return false;
+      }
+      return (
+        current.model.sharedModel.editable &&
+        !current.model.jgisSettings.storyMapsDisabled
+      );
+    },
+    execute: args => {
+      const current = tracker.currentWidget;
+      if (!current) {
+        return;
+      }
+      current.model.addStorySegment();
+    },
+    ...icons.get(CommandIDs.addStorySegment),
+  });
+
   loadKeybindings(commands, keybindings);
 }
 

packages/base/src/constants.ts

@@ -58,6 +58,7 @@ const iconObject = {
   [CommandIDs.identify]: { icon: infoIcon },
   [CommandIDs.temporalController]: { icon: clockIcon },
   [CommandIDs.addMarker]: { icon: markerIcon },
+  [CommandIDs.addStorySegment]: { iconClass: 'fa fa-link' },
 };
 
 /**

packages/base/src/formbuilder/formselectors.ts

@@ -3,6 +3,7 @@ import { LayerType, SourceType } from '@jupytergis/schema';
 import {
   HeatmapLayerPropertiesForm,
   HillshadeLayerPropertiesForm,
+  StorySegmentLayerPropertiesForm,
   LayerPropertiesForm,
   VectorLayerPropertiesForm,
   WebGlLayerPropertiesForm,
@@ -33,6 +34,11 @@ export function getLayerTypeForm(
       break;
     case 'HeatmapLayer':
       LayerForm = HeatmapLayerPropertiesForm;
+      break;
+    case 'StorySegmentLayer':
+      LayerForm = StorySegmentLayerPropertiesForm;
+      break;
+
     // ADD MORE FORM TYPES HERE
   }
 

packages/base/src/formbuilder/objectform/StoryEditorForm.tsx

@@ -0,0 +1,17 @@
+import { IDict } from '@jupytergis/schema';
+
+import { BaseForm } from './baseform';
+
+/**
+ * The form to modify a hillshade layer.
+ */
+export class StoryEditorPropertiesForm extends BaseForm {
+  protected processSchema(
+    data: IDict<any> | undefined,
+    schema: IDict,
+    uiSchema: IDict,
+  ) {
+    super.processSchema(data, schema, uiSchema);
+    this.removeFormEntry('storySegments', data, schema, uiSchema);
+  }
+}

packages/base/src/formbuilder/objectform/components/StorySegmentReset.tsx

@@ -0,0 +1,52 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { LabIcon } from '@jupyterlab/ui-components';
+import React from 'react';
+
+import { targetWithCenterIcon } from '@/src/icons';
+import { Button } from '@/src/shared/components/Button';
+
+interface IStorySegmentResetProps {
+  model?: IJupyterGISModel;
+  layerId?: string;
+}
+
+function StorySegmentReset({ model, layerId }: IStorySegmentResetProps) {
+  const handleSetStorySegmentToCurrentView = () => {
+    if (!model || !layerId) {
+      return;
+    }
+    const layer = model.getLayer(layerId);
+    if (!layer) {
+      return;
+    }
+    const { zoom, extent } = model.getOptions();
+    const updatedLayer = {
+      ...layer,
+      parameters: {
+        ...layer.parameters,
+        zoom,
+        extent,
+      },
+    };
+
+    model.sharedModel.updateLayer(layerId, updatedLayer);
+  };
+
+  return (
+    <div>
+      <Button
+        title="Set story segment to current viewport"
+        onClick={handleSetStorySegmentToCurrentView}
+      >
+        <LabIcon.resolveReact
+          icon={targetWithCenterIcon}
+          className="jp-gis-layerIcon"
+          tag="span"
+        />
+        Set Story Segment Extent
+      </Button>
+    </div>
+  );
+}
+
+export default StorySegmentReset;

packages/base/src/formbuilder/objectform/layer/index.ts

@@ -3,3 +3,4 @@ export * from './hillshadeLayerForm';
 export * from './layerform';
 export * from './vectorlayerform';
 export * from './webGlLayerForm';
+export * from './storySegmentLayerForm';