# esri/jsapi-resources architecture

> Architecture diagram of the GitHub repository esri/jsapi-resources, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/esri/jsapi-resources
- Repository: https://github.com/esri/jsapi-resources

## Overview

This repository is a collection of ArcGIS Maps SDK for JavaScript proof-of-concept resources, not one integrated application. Each sample demonstrates a user-facing map, dashboard, editor, worker, or assistant workflow in a framework or bundler. The graph preserves the principal layout and AI-agent samples alongside representative SDK and coding examples. Many subsystems are represented at their exact source paths but were not excerpted; their internal relationships are omitted where the evidence does not establish them.

Main entry points: [`layouts/dashboard-sample/src/App.tsx`](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/App.tsx) (Dashboard), [`layouts/finder-sample/src/App.tsx`](https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/App.tsx) (Finder app), [`layouts/interactive-filter-layout/main.js`](https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/main.js) (Interactive map), [`layouts/dashboard-sample/src/context/AppProvider.tsx`](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/context/AppProvider.tsx) (Metrics provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_layouts["Map layouts"]
  node_dash_app["Dashboard<br/>[App.tsx]"]
  node_dash_map["Dashboard map<br/>[Map.tsx]"]
  node_dash_charts["Charts<br/>[Charts.tsx]"]
  node_dash_metrics["Metrics panel<br/>[MetricsPanel.tsx]"]
  node_dash_sidebar["Sidebar<br/>[Sidebar.tsx]"]
  node_dash_header["Header and footer<br/>[Header.tsx]"]
  node_dash_context["Dashboard state<br/>[AppContext.ts]"]
  node_dash_provider["Metrics provider<br/>[AppProvider.tsx]"]
  node_dash_utils["Metric calculations<br/>[Metrics.ts]"]
  node_finder_app["Finder app<br/>[App.tsx]"]
  node_finder_map["Finder map<br/>[Map.tsx]"]
  node_finder_results["Results list<br/>[ResultsList.tsx]"]
  node_finder_filters["Result filters<br/>[ChipFilters.tsx]"]
  node_finder_drill["Drill view<br/>[DrillView.tsx]"]
  node_finder_header["Finder header<br/>[Header.tsx]"]
  node_interactive_main["Interactive map<br/>[main.js]"]
  node_interactive_filters["Layer filters<br/>[filters.js]"]
  node_interactive_inset["Inset map<br/>[inset-map.js]"]
  node_interactive_symbols["Map symbols<br/>[symbols.js]"]
  node_interactive_theme["Map theme<br/>[theme.js]"]
  node_interactive_ui["UI helpers<br/>[ui-helpers.js]"]
end

subgraph group_assistants["AI assistants"]
  node_hil_app["Maintenance assistant demo<br/>[App.tsx]"]
  node_hil_agent["Maintenance agent"]
  node_custom_hil_app["Custom maintenance demo<br/>[App.tsx]"]
  node_custom_hil_agent["Custom maintenance agent"]
  node_network_app["Network analysis demo<br/>[App.tsx]"]
  node_network_agent["Network analysis agent"]
  node_location_app["Location services demo<br/>[App.tsx]"]
  node_location_agent["Location services agent"]
  node_location_llm["Agent LLM node"]
end

subgraph group_sdk["SDK examples"]
  node_react_sdk["React map sample<br/>[App.tsx]"]
  node_vue_sdk["Vue map sample<br/>[Map.vue]"]
  node_angular_sdk["Angular map sample<br/>[app.ts]"]
end

subgraph group_coding["Coding examples"]
end

node_developer(("Sample user"))

node_developer -->|"uses"| node_dash_app
node_dash_app -->|"renders"| node_dash_map
node_dash_app -->|"renders"| node_dash_charts
node_dash_app -->|"renders"| node_dash_metrics
node_dash_app -->|"renders"| node_dash_sidebar
node_dash_app -->|"renders"| node_dash_header
node_dash_app -->|"reads state"| node_dash_context
node_dash_provider -->|"provides state"| node_dash_context
node_dash_provider -->|"uses calculations"| node_dash_utils
node_developer -->|"uses"| node_finder_app
node_finder_app -->|"renders"| node_finder_map
node_finder_app -->|"renders"| node_finder_results
node_finder_app -->|"renders"| node_finder_filters
node_finder_app -->|"renders"| node_finder_drill
node_finder_app -->|"renders"| node_finder_header
node_developer -->|"uses"| node_interactive_main
node_interactive_main -->|"configures layers"| node_interactive_filters
node_interactive_main -->|"sets up map"| node_interactive_inset
node_interactive_main -->|"renders previews"| node_interactive_ui
node_developer -->|"uses"| node_hil_app
node_hil_app -->|"registers agent"| node_hil_agent
node_developer -->|"uses"| node_custom_hil_app
node_custom_hil_app -->|"registers agent"| node_custom_hil_agent
node_developer -->|"uses"| node_network_app
node_network_app -->|"registers agent"| node_network_agent
node_developer -->|"uses"| node_location_app
node_location_app -->|"registers agent"| node_location_agent
node_location_llm -->|"uses tools"| node_location_agent
node_developer -->|"uses"| node_react_sdk
node_developer -->|"uses"| node_vue_sdk
node_developer -->|"uses"| node_angular_sdk

click node_dash_app "https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/App.tsx"
click node_dash_map "https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/components/Map.tsx"
click node_dash_charts "https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/components/Charts.tsx"
click node_dash_metrics "https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/components/MetricsPanel.tsx"
click node_dash_sidebar "https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/components/Sidebar.tsx"
click node_dash_header "https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/components/Header.tsx"
click node_dash_context "https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/context/AppContext.ts"
click node_dash_provider "https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/context/AppProvider.tsx"
click node_dash_utils "https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/utils/Metrics.ts"
click node_finder_app "https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/App.tsx"
click node_finder_map "https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/components/Map.tsx"
click node_finder_results "https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/components/Results/ResultsList.tsx"
click node_finder_filters "https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/components/Results/ChipFilters.tsx"
click node_finder_drill "https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/components/Drill/DrillView.tsx"
click node_finder_header "https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/components/Header.tsx"
click node_interactive_main "https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/main.js"
click node_interactive_filters "https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/scripts/filters.js"
click node_interactive_inset "https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/scripts/inset-map.js"
click node_interactive_symbols "https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/scripts/symbols.js"
click node_interactive_theme "https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/scripts/theme.js"
click node_interactive_ui "https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/scripts/ui-helpers.js"
click node_hil_app "https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-agent-utils-hil-react/src/App.tsx"
click node_hil_agent "https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-agent-utils-hil-react/src/maintenanceAgent.ts"
click node_custom_hil_app "https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-custom-agent-hil-react/src/App.tsx"
click node_custom_hil_agent "https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-custom-agent-hil-react/src/maintenanceAgent.ts"
click node_network_app "https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-agent-utils-tools-react/src/App.tsx"
click node_network_agent "https://github.com/esri/jsapi-resources/tree/main/templates/ai-components-agent-utils-tools-react/src/networkAnalysisAgent"
click node_location_app "https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-custom-agent-tools-react/src/App.tsx"
click node_location_agent "https://github.com/esri/jsapi-resources/tree/main/templates/ai-components-custom-agent-tools-react/src/locationServicesAgent"
click node_location_llm "https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-custom-agent-tools-react/src/locationServicesAgent/nodes/locationServicesLLM.ts"
click node_react_sdk "https://github.com/esri/jsapi-resources/blob/main/templates/js-maps-sdk-react/src/App.tsx"
click node_vue_sdk "https://github.com/esri/jsapi-resources/blob/main/templates/js-maps-sdk-vue/src/components/Map.vue"
click node_angular_sdk "https://github.com/esri/jsapi-resources/blob/main/templates/js-maps-sdk-angular/src/app/app.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_dash_app,node_dash_map,node_dash_charts,node_dash_metrics,node_dash_sidebar,node_dash_header,node_dash_context,node_dash_provider,node_dash_utils,node_finder_app,node_finder_map,node_finder_results,node_finder_filters,node_finder_drill,node_finder_header,node_interactive_main,node_interactive_filters,node_interactive_inset,node_interactive_symbols,node_interactive_theme,node_interactive_ui,node_developer toneBlue
class node_hil_app,node_hil_agent,node_custom_hil_app,node_custom_hil_agent,node_network_app,node_network_agent,node_location_app,node_location_agent,node_location_llm toneAmber
class node_react_sdk,node_vue_sdk,node_angular_sdk toneMint
```

## Components

### Map layouts

- [Dashboard](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/App.tsx): `layouts/dashboard-sample/src/App.tsx`
- [Dashboard map](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/components/Map.tsx): `layouts/dashboard-sample/src/components/Map.tsx`
- [Charts](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/components/Charts.tsx): `layouts/dashboard-sample/src/components/Charts.tsx`
- [Metrics panel](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/components/MetricsPanel.tsx): `layouts/dashboard-sample/src/components/MetricsPanel.tsx`
- [Sidebar](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/components/Sidebar.tsx): `layouts/dashboard-sample/src/components/Sidebar.tsx`
- [Header and footer](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/components/Header.tsx): `layouts/dashboard-sample/src/components/Header.tsx`
- [Dashboard state](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/context/AppContext.ts): `layouts/dashboard-sample/src/context/AppContext.ts`
- [Metrics provider](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/context/AppProvider.tsx): `layouts/dashboard-sample/src/context/AppProvider.tsx`
- [Metric calculations](https://github.com/esri/jsapi-resources/blob/main/layouts/dashboard-sample/src/utils/Metrics.ts): `layouts/dashboard-sample/src/utils/Metrics.ts`
- [Finder app](https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/App.tsx): `layouts/finder-sample/src/App.tsx`
- [Finder map](https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/components/Map.tsx): `layouts/finder-sample/src/components/Map.tsx`
- [Results list](https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/components/Results/ResultsList.tsx): `layouts/finder-sample/src/components/Results/ResultsList.tsx`
- [Result filters](https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/components/Results/ChipFilters.tsx): `layouts/finder-sample/src/components/Results/ChipFilters.tsx`
- [Drill view](https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/components/Drill/DrillView.tsx): `layouts/finder-sample/src/components/Drill/DrillView.tsx`
- [Finder header](https://github.com/esri/jsapi-resources/blob/main/layouts/finder-sample/src/components/Header.tsx): `layouts/finder-sample/src/components/Header.tsx`
- [Interactive map](https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/main.js): `layouts/interactive-filter-layout/main.js`
- [Layer filters](https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/scripts/filters.js): `layouts/interactive-filter-layout/scripts/filters.js`
- [Inset map](https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/scripts/inset-map.js): `layouts/interactive-filter-layout/scripts/inset-map.js`
- [Map symbols](https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/scripts/symbols.js): `layouts/interactive-filter-layout/scripts/symbols.js`
- [Map theme](https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/scripts/theme.js): `layouts/interactive-filter-layout/scripts/theme.js`
- [UI helpers](https://github.com/esri/jsapi-resources/blob/main/layouts/interactive-filter-layout/scripts/ui-helpers.js): `layouts/interactive-filter-layout/scripts/ui-helpers.js`

### AI assistants

- [Maintenance assistant demo](https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-agent-utils-hil-react/src/App.tsx): `templates/ai-components-agent-utils-hil-react/src/App.tsx`
- [Maintenance agent](https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-agent-utils-hil-react/src/maintenanceAgent.ts): `templates/ai-components-agent-utils-hil-react/src/maintenanceAgent.ts`
- [Custom maintenance demo](https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-custom-agent-hil-react/src/App.tsx): `templates/ai-components-custom-agent-hil-react/src/App.tsx`
- [Custom maintenance agent](https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-custom-agent-hil-react/src/maintenanceAgent.ts): `templates/ai-components-custom-agent-hil-react/src/maintenanceAgent.ts`
- [Network analysis demo](https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-agent-utils-tools-react/src/App.tsx): `templates/ai-components-agent-utils-tools-react/src/App.tsx`
- [Network analysis agent](https://github.com/esri/jsapi-resources/tree/main/templates/ai-components-agent-utils-tools-react/src/networkAnalysisAgent): `templates/ai-components-agent-utils-tools-react/src/networkAnalysisAgent`
- [Location services demo](https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-custom-agent-tools-react/src/App.tsx): `templates/ai-components-custom-agent-tools-react/src/App.tsx`
- [Location services agent](https://github.com/esri/jsapi-resources/tree/main/templates/ai-components-custom-agent-tools-react/src/locationServicesAgent): `templates/ai-components-custom-agent-tools-react/src/locationServicesAgent`
- [Agent LLM node](https://github.com/esri/jsapi-resources/blob/main/templates/ai-components-custom-agent-tools-react/src/locationServicesAgent/nodes/locationServicesLLM.ts): `templates/ai-components-custom-agent-tools-react/src/locationServicesAgent/nodes/locationServicesLLM.ts`

### SDK examples

- [React map sample](https://github.com/esri/jsapi-resources/blob/main/templates/js-maps-sdk-react/src/App.tsx): `templates/js-maps-sdk-react/src/App.tsx`
- [Vue map sample](https://github.com/esri/jsapi-resources/blob/main/templates/js-maps-sdk-vue/src/components/Map.vue): `templates/js-maps-sdk-vue/src/components/Map.vue`
- [Angular map sample](https://github.com/esri/jsapi-resources/blob/main/templates/js-maps-sdk-angular/src/app/app.ts): `templates/js-maps-sdk-angular/src/app/app.ts`

### Other components

- **Sample user**

## Connections

- Sample user → Dashboard: uses
- Dashboard → Dashboard map: renders (evidence: `layouts/dashboard-sample/src/App.tsx`)
- Dashboard → Charts: renders (evidence: `layouts/dashboard-sample/src/App.tsx`)
- Dashboard → Metrics panel: renders (evidence: `layouts/dashboard-sample/src/App.tsx`)
- Dashboard → Sidebar: renders (evidence: `layouts/dashboard-sample/src/App.tsx`)
- Dashboard → Header and footer: renders (evidence: `layouts/dashboard-sample/src/App.tsx`)
- Dashboard → Dashboard state: reads state (evidence: `layouts/dashboard-sample/src/App.tsx`)
- Metrics provider → Dashboard state: provides state (evidence: `layouts/dashboard-sample/src/context/AppProvider.tsx`)
- Metrics provider → Metric calculations: uses calculations (evidence: `layouts/dashboard-sample/src/context/AppProvider.tsx`)
- Sample user → Finder app: uses
- Finder app → Finder map: renders (evidence: `layouts/finder-sample/src/App.tsx`)
- Finder app → Results list: renders (evidence: `layouts/finder-sample/src/App.tsx`)
- Finder app → Result filters: renders (evidence: `layouts/finder-sample/src/App.tsx`)
- Finder app → Drill view: renders (evidence: `layouts/finder-sample/src/App.tsx`)
- Finder app → Finder header: renders (evidence: `layouts/finder-sample/src/App.tsx`)
- Sample user → Interactive map: uses
- Interactive map → Layer filters: configures layers (evidence: `layouts/interactive-filter-layout/main.js`)
- Interactive map → Inset map: sets up map (evidence: `layouts/interactive-filter-layout/main.js`)
- Interactive map → UI helpers: renders previews (evidence: `layouts/interactive-filter-layout/main.js`)
- Sample user → Maintenance assistant demo: uses
- Maintenance assistant demo → Maintenance agent: registers agent (evidence: `templates/ai-components-agent-utils-hil-react/src/App.tsx`)
- Sample user → Custom maintenance demo: uses
- Custom maintenance demo → Custom maintenance agent: registers agent (evidence: `templates/ai-components-custom-agent-hil-react/src/App.tsx`)
- Sample user → Network analysis demo: uses
- Network analysis demo → Network analysis agent: registers agent (evidence: `templates/ai-components-agent-utils-tools-react/src/App.tsx`)
- Sample user → Location services demo: uses
- Location services demo → Location services agent: registers agent (evidence: `templates/ai-components-custom-agent-tools-react/src/App.tsx`)
- Agent LLM node → Location services agent: uses tools (evidence: `templates/ai-components-custom-agent-tools-react/src/locationServicesAgent/nodes/locationServicesLLM.ts`)
- Sample user → React map sample: uses
- Sample user → Vue map sample: uses
- Sample user → Angular map sample: uses