+
{props.label}
+
)
}
-
-export default AOITooltip
diff --git a/src/essence/Tools/AOI/lib/geo/AnalyzingPanel/AnalyzingPanel.tsx b/src/essence/Tools/AOI/lib/geo/AnalyzingPanel/AnalyzingPanel.tsx
new file mode 100644
index 000000000..c3bba883a
--- /dev/null
+++ b/src/essence/Tools/AOI/lib/geo/AnalyzingPanel/AnalyzingPanel.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+export type AnalyzingPanelProps = {
+ label: string
+ done: number
+ total: number
+}
+
+export function AnalyzingPanel({ label, done, total }: AnalyzingPanelProps) {
+ const percent = total > 0 ? Math.round((done / total) * 100) : 0
+ return (
+
+
+
Analyzing
+
{label}
+
{percent}%
+
+
Looking for insights
+
+ )
+}
diff --git a/src/essence/Tools/AOI/lib/geo/DrawPanel/DrawPanel.tsx b/src/essence/Tools/AOI/lib/geo/DrawPanel/DrawPanel.tsx
new file mode 100644
index 000000000..a938c5358
--- /dev/null
+++ b/src/essence/Tools/AOI/lib/geo/DrawPanel/DrawPanel.tsx
@@ -0,0 +1,110 @@
+import React from 'react'
+import { Button } from '@trussworks/react-uswds'
+import type { AOIShape } from '../../types'
+
+export type DrawPanelProps = {
+ shape: AOIShape | null
+ shapes?: AOIShape[]
+ disabled?: boolean
+ isDrawing: boolean
+ verticesCount: number
+ onShapeChange: (shape: AOIShape) => void
+ onConfirm: () => void
+ onCancel: () => void
+}
+
+const ALL_SHAPES: Array<{ id: AOIShape; label: string; icon: string }> = [
+ { id: 'point', label: 'Point', icon: 'map-marker-outline' },
+ { id: 'linestring', label: 'Line', icon: 'vector-polyline' },
+ { id: 'polygon', label: 'Polygon', icon: 'vector-polygon' },
+ { id: 'rectangle', label: 'Rectangle', icon: 'square-outline' },
+ { id: 'circle', label: 'Circle', icon: 'circle-outline' },
+]
+
+const DEFAULT_ALLOWED_SHAPES: AOIShape[] = ['polygon', 'rectangle', 'circle']
+
+const MIN_VERTICES_BY_SHAPE: Record
= {
+ point: 1,
+ linestring: 2,
+ polygon: 3,
+ rectangle: 2,
+ circle: 2,
+}
+
+const HINT_BY_SHAPE: Record string> = {
+ point: () => 'Click on the map to place the point.',
+ linestring: (count) =>
+ `Click to add vertices. ${count} placed (need 2+). Double-click or Enter to finish.`,
+ polygon: (count, min) =>
+ `Click on the map to add vertices. ${count} placed (need ${min}+).`,
+ rectangle: () => 'Click two corners to define the rectangle.',
+ circle: () => 'Click the centre, then click the edge to define the circle.',
+}
+
+export function DrawPanel(props: DrawPanelProps) {
+ if (props.isDrawing && props.shape) {
+ return
+ }
+ return
+}
+
+function ShapePicker({ shape, shapes, disabled, onShapeChange }: DrawPanelProps) {
+ const allow = new Set(shapes ?? DEFAULT_ALLOWED_SHAPES)
+ const list = ALL_SHAPES.filter((s) => allow.has(s.id))
+ return (
+
+
Choose a shape
+
+ {list.map((s) => (
+
+ ))}
+
+
+ Click anywhere on the map to start drawing a shape
+
+
+
{hint}
+
+
+
+
+
+
+ Click on a boundary on the map to select it for analysis.
+
+
+
Search for a country or a region
+
+
+ {loading &&
Loading boundary data…
}
+
+ {!loading && disabled && (
+
+ No boundary data is available for this mission.
+
+ )}
+
+ {!inputDisabled && results.length > 0 && (
+
+ {results.map((r) => (
+ -
+
+
+ ))}
+
+ )}
+
+
+ Upload a GeoJSON, KML, or zipped Shapefile to define your analysis area.
+
+
+
+
{
+ const f = e.target.files?.[0]
+ if (f) onUploadFile(f)
+ e.target.value = ''
+ }}
+ />
+
+ {status === 'error' && (
+
+ {error || 'Could not parse that file.'}
+
+ )}
+
+
+ Supported formats:
+
+
+ - GeoJSON (.geojson, .json)
+ - KML (.kml)
+ - Shapefile (.zip — must include .shp, .dbf, and .prj)
+
+