Snapshot extents options

app/javascript/controllers/projects_controller.tsx

@@ -1,7 +1,7 @@
 import { Controller } from "stimulus"
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import { ProjectEditor } from '../projects/project_editor'
+import { ProjectEditor, TeamExtentData } from '../projects/project_editor'
 import { Project } from "../projects/state"
 import { DBModels } from "../projects/db_models"
 
@@ -13,8 +13,9 @@ export default class extends Controller {
     projectTeamName: String,
     projectDefraHedgerowPermission: Boolean,
     projectKewRgb25cmPermission: Boolean,
+    projectExtents: Array,
     backButtonPath: String,
-    dbModels: Object,
+    dbModels: Object
   }
 
   declare readonly projectIdValue: number
@@ -23,6 +24,7 @@ export default class extends Controller {
   declare readonly projectTeamNameValue: string
   declare readonly projectDefraHedgerowPermissionValue: boolean
   declare readonly projectKewRgb25cmPermissionValue: boolean
+  declare readonly projectExtentsValue: Array<any>
   declare readonly backButtonPathValue: string
   declare readonly dbModelsValue: DBModels
 
@@ -41,6 +43,7 @@ export default class extends Controller {
             KewRgb25cm: this.projectKewRgb25cmPermissionValue
           }
         }
+        teamExtents={this.projectExtentsValue as TeamExtentData[]}
       />,
       this.element
     )

app/javascript/projects/analysis_panel.tsx

@@ -7,6 +7,7 @@ import { GenerateChart } from './analysis_panel_tools/charts'
 import './analysis_panel.css'
 import { getArea } from 'ol/sphere'
 import { fromExtent } from 'ol/geom/Polygon'
+import { TeamExtentData } from './project_editor'
 
 export type ChartType = "pie" | "hist" | "bar" | "kde"
 
@@ -146,6 +147,7 @@ interface AnalysisPanelProps {
     layerStats: (layer: DatasetLayer | ModelOutputLayer) => BooleanTileGrid | NumericTileGrid | CategoricalTileGrid | null
     currentTab: number
     projectExtent: Extent
+    ExtentList: TeamExtentData[]
 }
 
 let dataSourceType: string = "null"
@@ -157,7 +159,7 @@ ChartTypeArray.set("NumericTileGrid", ["hist"])
 
 
 
-export const AnalysisPanel = ({ selectedArea, setSelectedArea, setShowAP, selectedLayer, layerStats, currentTab, projectExtent }: AnalysisPanelProps) => {
+export const AnalysisPanel = ({ selectedArea, setSelectedArea, setShowAP, selectedLayer, layerStats, currentTab, projectExtent, ExtentList }: AnalysisPanelProps) => {
 
     const [chartType, setChartType] = React.useState<ChartType>()
     const [chartData, setChartData] = React.useState<ChartData>()
@@ -364,22 +366,40 @@ export const AnalysisPanel = ({ selectedArea, setSelectedArea, setShowAP, select
                         </button>
                     </div>
                     <div className="modal-body">
-                    <input
-                        id="extent-input"
-                        style={{width: '100%'}}
-                        type="text"
-                        placeholder='min x, min y, max x, max y'
-                        onChange={(e) => {
-                            let valid = false
-                            const extent = e.target.value.split(',').map(Number)
-                            valid = extent.length === 4 && extent.every((coord) => !isNaN(coord)) && extent[0] < extent[2] && extent[1] < extent[3]
-                            if(!valid){
-                                (document.getElementById('save-snapshot-extent-btn') as HTMLButtonElement).disabled = true
-                            }else{
-                                (document.getElementById('save-snapshot-extent-btn') as HTMLButtonElement).disabled = false
-                            }
-                        }}
-                    />
+                        <div className='row'>
+                            <div className='col-8'>
+                                <input
+                                    id="extent-input"
+                                    style={{width: '100%'}}
+                                    type="text"
+                                    placeholder='min x, min y, max x, max y'
+                                    onChange={(e) => {
+                                        let valid = false
+                                        const extent = e.target.value.split(',').map(Number)
+                                        valid = extent.length === 4 && extent.every((coord) => !isNaN(coord)) && extent[0] < extent[2] && extent[1] < extent[3]
+                                        if(!valid){
+                                            (document.getElementById('save-snapshot-extent-btn') as HTMLButtonElement).disabled = true
+                                        }else{
+                                            (document.getElementById('save-snapshot-extent-btn') as HTMLButtonElement).disabled = false
+                                        }
+                                    }}
+                                />
+                            </div>
+                            <select onChange={(e) => 
+                                    {
+                                        const selectedIndex = Number(e.target.value)
+                                        const selectedExtent = ExtentList[selectedIndex]
+                                        if (selectedExtent) {
+                                            document.getElementById('extent-input')!.setAttribute('value', selectedExtent.value.join(','))
+                                        }
+                                    }}
+                                    className='form-select'>
+                                <option value=''>Select project extent</option>
+                                {ExtentList.map((extent, index) => (
+                                    <option key={index} value={index}>{extent.name}</option>
+                                ))}
+                            </select>
+                        </div>
                     </div>
                     <div className="modal-footer">
                         <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>

app/javascript/projects/project_editor.tsx

@@ -26,6 +26,11 @@ export interface ProjectPermissions {
   KewRgb25cm: boolean
 }
 
+export interface TeamExtentData {
+  name: string
+  value: Extent
+}
+
 interface ProjectEditorProps {
   projectId: number
   projectSource: Project
@@ -34,8 +39,9 @@ interface ProjectEditorProps {
   teamId: number
   teamName: string
   permissions: ProjectPermissions
+  teamExtents: TeamExtentData[]
 }
-export function ProjectEditor({ projectId, projectSource, backButtonPath, dbModels, teamId, teamName, permissions }: ProjectEditorProps) {
+export function ProjectEditor({ projectId, projectSource, backButtonPath, dbModels, teamId, teamName, permissions, teamExtents }: ProjectEditorProps) {
   const [state, dispatch] = React.useReducer(reduce, {
     project: { ...defaultProject, ...projectSource },
     hasUnsavedChanges: false,
@@ -194,6 +200,7 @@ export function ProjectEditor({ projectId, projectSource, backButtonPath, dbMode
               }}
               currentTab={currentTab}
               projectExtent={projectExtent}
+              ExtentList={teamExtents}
             />
           }
           {

app/models/project.rb

@@ -54,7 +54,7 @@ def defra_hedgerow_permission
     tp = team.team_permissions.find_by(permission: p)
     tp ? tp.enabled : false
   end
-
+  
   def kew_rgb25cm_permission
     p = Permission.find_by(name: 'kew_rgb25cm')
     puts "p: #{p}"
@@ -63,5 +63,9 @@ def kew_rgb25cm_permission
     tp = team.team_permissions.find_by(permission: p)
     tp ? tp.enabled : false
   end
+
+  def extents
+    team_extents = Extent.where(team_id: team.id).to_json
+  end
 
 end

app/views/projects/show.html.erb

@@ -6,6 +6,7 @@
   data-projects-project-source-value="<%= @project.source.to_json %>"
   data-projects-project-defra-hedgerow-permission-value="<%= @project.defra_hedgerow_permission %>"
   data-projects-project-kew-rgb25cm-permission-value="<%= @project.kew_rgb25cm_permission %>"
+  data-projects-project-extents-value="<%= @project.extents %>"
   data-projects-back-button-path-value="<%= team_projects_path(@project.team) %>"
   data-projects-db-models-value="<%= render partial: "defs", formats: [:json] %>"
 ></div>