does some reorganization of the project structure

README.md

@@ -12,7 +12,7 @@ Built with the Arcgis Maps SDK for Javascript, React, Remix, and Tailwind CSS.
 - Export your selection to a `.glb` file for consumption in other programs
 - View georeferencing and measurment data about the selected area
 
-## Instructions
+## Setting up
 
 To set up the project, clone the repository and install the dependencies:
 
@@ -24,19 +24,6 @@ npm install
 
 This will install all the necessary dependencies required for the project.
 
-## Requirements
-
-- A text-editor
-- A web browser with access to the internet
-
-## Resources
-
-- [ArcGIS Maps SDK for JavaScript - Developer documentation](https://developers.arcgis.com/javascript/latest/)
-- [ArcGIS Blog](http://blogs.esri.com/esri/arcgis/)
-- [Remix](https://remix.run/)
-- [React](https://react.dev/)
-- [Tanstack Query](https://tanstack.com/query/latest)
-
 ## Development
 
 You can develop your SPA app just like you would a normal Remix app. Start the development server with:
@@ -59,6 +46,61 @@ npm run build
 
 This will generate a `build` directory containing the production-ready files. You can then serve these files using any static site hosting service.
 
+## Project structure
+
+This project is set up using [React Remix](https://remix.run/) and follows a file-based routing convention. Below you can see a description of some important files and directories.
+
+```
+app
+├── arcgis
+|   ├── components
+|   |   └── # various component wrappers around the @arcgis/core sdk
+|   └── reactive-hooks.tsx
+|       └── # hooks to allow usage of reactiveUtils in react components
+├── components
+|   └── # shared components that don't belong to a particular route
+├── hooks
+|   ├── # various shared utility hooks
+│   └── queries
+|       └── # queries and mutations to handle asynchronous state
+├── routes
+|   ├── _root
+|   |   └── # contains components that define the root layout of the application (most notably the main calcite-shell)
+│   ├── _root._index
+|   |   └── # index is a simple splash page to catch traffic to the root url. This is where you could set up a landing page
+│   └── _root.$scene
+|       |   sidebar
+|       |   └── # the markup for the sidebar UI
+│       └── selection
+|           └── # components, utilities and state to manage and visualize the users selection
+└── symbology
+    └── # shared symbols and colors used over the application
+```
+
+Most of the applications functionality is implemented in the the `_root.$scene` route. This is where you will find the logic for creating and visualizing the selection. `hooks/queries` also contains the logic to query the scene for features and construct the final mesh based on the selection.
+
+Symbology contains some useful shared symbols, and color definitions.
+
+## Loading scenes
+
+There are two ways to load arbitrary scenes into the application.
+
+### `data/scene-settings.json`
+
+You can modify the `scene-settings.json` file for your deployment to add or remove web scenes from the list of items the app displays. You can optionally specify a portal URL, if you do not it will use the Maps SDK's default portal url.
+
+### Through the url
+
+You can also simply send a link to an arbitrary scene id. The application will try to load it and ask the user to authenticate if necessary. You can configure the items portal url by passing a search parameter. For example `https://city-download.com/YOUR_SCENE_ID?portal-url=https%3A%2F%2Fzurich.maps.arcgis.com%2F` will load the portal item with id `YOUR_SCENE_ID` in the `https://zurich.maps.arcgis.com/` portal.
+
+## Resources
+
+- [ArcGIS Maps SDK for JavaScript - Developer documentation](https://developers.arcgis.com/javascript/latest/)
+- [ArcGIS Blog](http://blogs.esri.com/esri/arcgis/)
+- [Remix](https://remix.run/)
+- [React](https://react.dev/)
+- [Tanstack Query](https://tanstack.com/query/latest)
+
 ## Issues
 
 Find a bug or want to request a new feature? Please let us know by submitting an issue.

app/components/arcgis/maps/map/map.tsx → app/arcgis/components/maps/map/map.tsx

@@ -17,7 +17,7 @@ import CoreMap from '@arcgis/core/Map';
 import { CalciteScrim } from "@esri/calcite-components-react";
 import { MapContext } from "./map-context";
 import { useScene } from "../web-scene/scene-context";
-import { useAccessorValue } from "~/hooks/reactive";
+import { useAccessorValue } from "~/arcgis/reactive-hooks";
 import useInstance from "~/hooks/useInstance";
 
 interface MapProps {

app/components/arcgis/maps/web-scene/scene.tsx → app/arcgis/components/maps/web-scene/scene.tsx

@@ -16,9 +16,9 @@ import { PropsWithChildren, Suspense, memo, useEffect, useMemo, useState } from
 import CoreWebScene from '@arcgis/core/WebScene';
 import PortalItem from '@arcgis/core/portal/PortalItem';
 import { CalciteScrim } from "@esri/calcite-components-react";
-import { useSceneListModal } from "~/components/scene-list-modal/scene-list-modal-context";
+import { useSceneListModal } from "~/routes/_root/scene-list-modal/scene-list-modal-context";
 import { SceneContext } from "./scene-context";
-import { useAccessorValue } from "~/hooks/reactive";
+import { useAccessorValue } from "~/arcgis/reactive-hooks";
 
 interface WebSceneProps {
   portalItem: string | PortalItem;
@@ -59,11 +59,9 @@ function InternalScene({ portalItem, children }: PropsWithChildren<WebSceneProps
   }, [loaded, setOpen]);
 
   return (
-    <Suspense fallback={<CalciteScrim loading />}>
-      <SceneContext.Provider value={scene}>
-        {children}
-      </SceneContext.Provider>
-    </Suspense>
+    <SceneContext.Provider value={scene}>
+      {children}
+    </SceneContext.Provider>
   );
 }
 

app/components/arcgis/search/search.tsx → app/arcgis/components/search/search.tsx

@@ -13,14 +13,14 @@
  * limitations under the License.
  */
 import { useEffect } from "react";
-import { useSceneView } from "../views/scene-view/scene-view-context";
+import { useSceneView } from "../components/views/scene-view/scene-view-context";
 import SearchWidget from "@arcgis/core/widgets/Search.js";
-import { useScene } from "../maps/web-scene/scene-context";
+import { useScene } from "../components/maps/web-scene/scene-context";
 import Geometry from "@arcgis/core/geometry/Geometry";
-import { useAccessorValue } from "~/hooks/reactive";
+import { useAccessorValue } from "~/arcgis/reactive-hooks";
 import useInstance from "~/hooks/useInstance";
-import { removeSceneLayerClones } from "~/components/selection/scene-filter-highlights";
-import Highlights from "~/components/selection/highlights";
+import { removeSceneLayerClones } from "~/routes/_root.$scene/selection/scene-filter-highlights";
+import Highlights from "~/routes/_root.$scene/selection/highlights";
 import SceneLayerView from "@arcgis/core/views/layers/SceneLayerView";
 import { useSceneLayerViews } from "~/hooks/useSceneLayers";
 import { useQuery } from '@tanstack/react-query';

app/components/arcgis/sketch/sketch.tsx → app/arcgis/components/sketch/sketch.tsx

@@ -28,7 +28,7 @@ import type GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
 import type MapNotesLayer from '@arcgis/core/layers/MapNotesLayer';
 import type SceneLayer from '@arcgis/core/layers/SceneLayer';
 import type WFSLayer from '@arcgis/core/layers/WFSLayer';
-import { useWatch } from "~/hooks/reactive";
+import { useWatch } from "~/arcgis/reactive-hooks";
 import Collection from '@arcgis/core/core/Collection';
 
 interface SketchProps {

app/components/arcgis/sketch/tools/create-extent-tool.tsx → app/arcgis/components/sketch/tools/create-extent-tool.tsx

@@ -20,7 +20,7 @@ import { CreateTool, ToolEvent } from "./create-tool";
 import { forwardRef, ReactNode, useEffect } from "react";
 import useInstance from "~/hooks/useInstance";
 import { useSketch } from "../sketch";
-import { useAccessorValue } from "~/hooks/reactive";
+import { useAccessorValue } from "~/arcgis/reactive-hooks";
 import useProvideRef from "~/hooks/useProvideRef";
 
 interface ExtentToolProps {

app/components/arcgis/sketch/tools/create-point-tool.tsx → app/arcgis/components/sketch/tools/create-point-tool.tsx

@@ -20,7 +20,7 @@ import * as reactiveUtils from "@arcgis/core/core/reactiveUtils";
 import useInstance from "~/hooks/useInstance";
 import { CreateTool, ToolEvent } from "./create-tool";
 import { PointSymbol3D } from "@arcgis/core/symbols";
-import { useAccessorValue } from "~/hooks/reactive";
+import { useAccessorValue } from "~/arcgis/reactive-hooks";
 
 interface PointToolProps {
   onStart?: (point: Point) => void;

app/components/arcgis/sketch/tools/reshape-tool.tsx → app/arcgis/components/sketch/tools/reshape-tool.tsx

@@ -19,7 +19,7 @@ import { forwardRef, ReactNode, useEffect } from "react";
 import useInstance from "~/hooks/useInstance";
 import Graphic from "@arcgis/core/Graphic";
 import useProvideRef from "~/hooks/useProvideRef";
-import { useAccessorValue } from "~/hooks/reactive";
+import { useAccessorValue } from "~/arcgis/reactive-hooks";
 
 interface ReshapeToolProps {
   onStart?: (graphics: Graphic[]) => void;

app/components/toast.tsx

@@ -16,7 +16,7 @@ import Accessor from "@arcgis/core/core/Accessor";
 import { subclass, property } from "@arcgis/core/core/accessorSupport/decorators";
 import { CalciteAlert } from "@esri/calcite-components-react";
 import { ComponentProps, createContext, PropsWithChildren, useContext } from "react";
-import { useAccessorValue } from "~/hooks/reactive";
+import { useAccessorValue } from "~/arcgis/reactive-hooks";
 import useInstance from "~/hooks/useInstance";
 
 type ToastMessage = { title: string, message: string, key: string; severity: ComponentProps<typeof CalciteAlert>['kind'] }

app/data/scene-settings.json

@@ -0,0 +1,7 @@
+{
+  "portal": "https://zurich.maps.arcgis.com/",
+  "scenes": [
+    { "id": "50bde63b675844679cb627864216e9db" },
+    { "id": "8208c8f77e5a4a1383a749aa25189360" }
+  ]
+}

app/hooks/queries/download/export-query.tsx

@@ -14,13 +14,13 @@
  */
 import { createMesh } from "./create-mesh";
 import { Extent, Mesh, Point } from "@arcgis/core/geometry";
-import { useScene } from "../../../components/arcgis/maps/web-scene/scene-context";
-import { useSelectionState } from "~/data/selection-store";
+import { useScene } from "~/arcgis/components/maps/web-scene/scene-context";
+import { useSelectionState } from "~/routes/_root.$scene/selection/selection-store";
 import { MAX_FEATURES, useSelectedFeaturesFromLayers } from "../feature-query";
 import { useDeferredValue, useEffect } from "react";
 import { usePreciseOriginElevationInfo } from "../elevation-query";
 import { useIsMutating, useMutation, useQuery } from '@tanstack/react-query';
-import { useAccessorValue } from "~/hooks/reactive";
+import { useAccessorValue } from "~/arcgis/reactive-hooks";
 import { ToastableError, useToast } from "~/components/toast";
 import WebScene from "@arcgis/core/WebScene";
 

app/hooks/queries/elevation-query.tsx

@@ -12,9 +12,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useSelectionState } from "~/data/selection-store";
-import { useAccessorValue } from "~/hooks/reactive";
-import { useSceneView } from "~/components/arcgis/views/scene-view/scene-view-context";
+import { useSelectionState } from "~/routes/_root.$scene/selection/selection-store";
+import { useAccessorValue } from "~/arcgis/reactive-hooks";
+import { useSceneView } from "~/arcgis/components/views/scene-view/scene-view-context";
 import { Extent, Multipoint, Point } from "@arcgis/core/geometry";
 import { useQuery } from '@tanstack/react-query';
 import { useSceneLayerViews } from "../useSceneLayers";

app/hooks/queries/feature-query.tsx

@@ -12,16 +12,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useSceneView } from "~/components/arcgis/views/scene-view/scene-view-context";
-import { useSelectionState } from "~/data/selection-store";
+import { useSceneView } from "~/arcgis/components/views/scene-view/scene-view-context";
+import { useSelectionState } from "~/routes/_root.$scene/selection/selection-store";
 import SceneLayer from "@arcgis/core/layers/SceneLayer";
 import SceneLayerView from "@arcgis/core/views/layers/SceneLayerView";
 import { useDeferredValue } from "react";
 import { Polygon } from "@arcgis/core/geometry";
 import * as geometryEngineAsync from "@arcgis/core/geometry/geometryEngineAsync";
 import { useSceneLayerViews } from "../useSceneLayers";
 import { useQuery } from '@tanstack/react-query';
-import { useAccessorValue } from "../reactive";
+import { useAccessorValue } from "../../arcgis/reactive-hooks";
 import { useDebouncedValue } from "../useDebouncedValue";
 
 export function useSelectedFeaturesFromLayerViews(key?: string) {

app/hooks/useSceneLayers.tsx

@@ -14,9 +14,9 @@
  */
 import SceneLayer from "@arcgis/core/layers/SceneLayer";
 import SceneLayerView from "@arcgis/core/views/layers/SceneLayerView";
-import { useSceneView } from "~/components/arcgis/views/scene-view/scene-view-context";
-import { removeSceneLayerClones } from "~/components/selection/scene-filter-highlights";
-import { useAccessorValue } from "./reactive";
+import { useSceneView } from "~/arcgis/components/views/scene-view/scene-view-context";
+import { removeSceneLayerClones } from "~/routes/_root.$scene/selection/scene-filter-highlights";
+import { useAccessorValue } from "../arcgis/reactive-hooks";
 import SceneView from "@arcgis/core/views/SceneView";
 import Map from "@arcgis/core/Map";