Add preset petclinic landscapes

malte-hansen · malte-hansen · commit f38e67e3400c · 2026-01-05T16:08:03.000+01:00
diff --git a/public/resources/preset-landscapes/distributed-petclinic.json b/public/resources/preset-landscapes/distributed-petclinic.json
diff --git a/public/resources/preset-landscapes/petclinic-demo.json b/public/resources/preset-landscapes/petclinic-demo.json
diff --git a/src/backend/controllers/landscape.controller.ts b/src/backend/controllers/landscape.controller.ts
@@ -1,6 +1,12 @@
 import { Request, Response } from 'express';
+import { readdir, readFile } from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
 import { LandscapeService } from '../services/landscape.service';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 export class LandscapeController {
   private landscapeService: LandscapeService;
 
@@ -48,4 +54,131 @@ export class LandscapeController {
       res.status(400).json({ error: error.message || 'Failed to update landscape' });
     }
   };
+
+  /**
+   * GET /api/landscape/presets - List available preset landscapes
+   */
+  listPresets = async (req: Request, res: Response): Promise<void> => {
+    try {
+      // Try multiple possible paths for preset landscapes
+      const possiblePaths = [
+        // Development: from source directory
+        path.join(process.cwd(), 'public/resources/preset-landscapes'),
+        // Development: relative to compiled controller
+        path.join(__dirname, '../../public/resources/preset-landscapes'),
+        // Production: from dist
+        path.join(__dirname, '../../dist/public/resources/preset-landscapes'),
+        // Production: from process.cwd
+        path.join(process.cwd(), 'dist/public/resources/preset-landscapes'),
+      ];
+
+      let presetDir: string | null = null;
+      for (const possiblePath of possiblePaths) {
+        try {
+          await readdir(possiblePath);
+          presetDir = possiblePath;
+          break;
+        } catch {
+          // Continue to next path
+        }
+      }
+
+      if (!presetDir) {
+        // No preset directory found, return empty array
+        res.status(200).json([]);
+        return;
+      }
+
+      const files = await readdir(presetDir);
+      const presetFiles = files
+        .filter((file) => file.endsWith('.json'))
+        .map((file) => ({
+          name: file.replace('.json', ''),
+          filename: file,
+        }));
+
+      res.status(200).json(presetFiles);
+    } catch (error: any) {
+      res.status(500).json({ error: error.message || 'Failed to list preset landscapes' });
+    }
+  };
+
+  /**
+   * GET /api/landscape/presets/:name - Load a specific preset landscape
+   */
+  loadPreset = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const presetName = req.params.name;
+      if (!presetName || !presetName.match(/^[a-zA-Z0-9_-]+$/)) {
+        res.status(400).json({ error: 'Invalid preset name' });
+        return;
+      }
+
+      // Try multiple possible paths for preset landscapes
+      const possiblePaths = [
+        // Development: from source directory
+        path.join(process.cwd(), 'public/resources/preset-landscapes', `${presetName}.json`),
+        // Development: relative to compiled controller
+        path.join(__dirname, '../../public/resources/preset-landscapes', `${presetName}.json`),
+        // Production: from dist
+        path.join(__dirname, '../../dist/public/resources/preset-landscapes', `${presetName}.json`),
+        // Production: from process.cwd
+        path.join(process.cwd(), 'dist/public/resources/preset-landscapes', `${presetName}.json`),
+      ];
+
+      let presetFile: string | null = null;
+      for (const possiblePath of possiblePaths) {
+        try {
+          await readFile(possiblePath);
+          presetFile = possiblePath;
+          break;
+        } catch {
+          // Continue to next path
+        }
+      }
+
+      if (!presetFile) {
+        res.status(404).json({ error: `Preset landscape "${presetName}" not found` });
+        return;
+      }
+
+      const fileContent = await readFile(presetFile, 'utf-8');
+      const landscapeData = JSON.parse(fileContent);
+
+      if (!Array.isArray(landscapeData)) {
+        res.status(400).json({ error: 'Invalid landscape file: must be an array' });
+        return;
+      }
+
+      // Validate the data structure first by attempting to serialize it
+      // This ensures the preset file itself doesn't have circular references
+      try {
+        JSON.stringify(landscapeData);
+      } catch {
+        res.status(400).json({ error: 'Preset landscape file contains circular references' });
+        return;
+      }
+
+      // Deep clone the landscape data to avoid mutating the original
+      // This is necessary because updateLandscape will reconstruct parent references
+      // which modifies objects in place, creating circular references
+      const clonedLandscapeData = JSON.parse(JSON.stringify(landscapeData));
+
+      // Update the landscape store with the cloned preset (this reconstructs parent references internally)
+      // The cloned data will be modified, but the original landscapeData remains clean
+      this.landscapeService.updateLandscape(clonedLandscapeData);
+
+      // Return the original landscape data (already in CleanedLandscape format)
+      // This avoids any circular reference issues from the reconstruction process
+      res.status(200).json(landscapeData);
+    } catch (error: any) {
+      if (error.code === 'ENOENT') {
+        res.status(404).json({ error: `Preset landscape "${req.params.name}" not found` });
+      } else if (error instanceof SyntaxError) {
+        res.status(400).json({ error: 'Invalid JSON in preset landscape file' });
+      } else {
+        res.status(500).json({ error: error.message || 'Failed to load preset landscape' });
+      }
+    }
+  };
 }
diff --git a/src/backend/routes/landscape.routes.ts b/src/backend/routes/landscape.routes.ts
@@ -10,5 +10,7 @@ const landscapeController = new LandscapeController(landscapeService);
 router.get('/', landscapeController.getLandscape);
 router.post('/', landscapeController.generateLandscape);
 router.put('/', landscapeController.updateLandscape);
+router.get('/presets', landscapeController.listPresets);
+router.get('/presets/:name', landscapeController.loadPreset);
 
 export { router as landscapeRoutes };
diff --git a/src/frontend/api/client.ts b/src/frontend/api/client.ts
@@ -94,6 +94,29 @@ export class ApiClient {
       throw new Error(error.error || 'Failed to generate trace');
     }
   }
+
+  /**
+   * List available preset landscapes
+   */
+  async listPresetLandscapes(): Promise<Array<{ name: string; filename: string }>> {
+    const response = await fetch(`${API_BASE_URL}/landscape/presets`);
+    if (!response.ok) {
+      throw new Error(`Failed to list preset landscapes: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  /**
+   * Load a preset landscape
+   */
+  async loadPresetLandscape(presetName: string): Promise<CleanedLandscape[]> {
+    const response = await fetch(`${API_BASE_URL}/landscape/presets/${presetName}`);
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || `Failed to load preset landscape: ${response.statusText}`);
+    }
+    return response.json();
+  }
 }
 
 export const apiClient = new ApiClient();
diff --git a/src/frontend/components/LandscapeEditor.tsx b/src/frontend/components/LandscapeEditor.tsx
@@ -1,5 +1,6 @@
 import { CleanedClass, CleanedLandscape, CleanedPackage } from '../../backend/shared/types';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { apiClient } from '../api/client';
 import { AppNode } from './landscape-editor/AppNode';
 import { LandscapeToolbar } from './landscape-editor/LandscapeToolbar';
 import { LandscapeEditorHandlers, NodeId } from './landscape-editor/types';
@@ -15,6 +16,41 @@ export function LandscapeEditor({ landscape, onLandscapeUpdated, onError }: Land
   const [expandedNodes, setExpandedNodes] = useState<Set<NodeId>>(new Set());
   const [localLandscape, setLocalLandscape] = useState<CleanedLandscape[]>(landscape);
   const isInternalUpdateRef = useRef(false);
+  const [availablePresets, setAvailablePresets] = useState<Array<{ name: string; filename: string }>>([]);
+  const [isLoadingPresets, setIsLoadingPresets] = useState(false);
+
+  useEffect(() => {
+    loadPresets();
+  }, []);
+
+  const loadPresets = async () => {
+    try {
+      setIsLoadingPresets(true);
+      const presets = await apiClient.listPresetLandscapes();
+      setAvailablePresets(presets);
+      if (presets.length === 0) {
+        console.log('No preset landscapes found');
+      } else {
+        console.log(`Loaded ${presets.length} preset landscape(s):`, presets.map((p) => p.name).join(', '));
+      }
+    } catch (err: any) {
+      console.error('Failed to load preset landscapes:', err.message);
+      setAvailablePresets([]);
+    } finally {
+      setIsLoadingPresets(false);
+    }
+  };
+
+  const loadPreset = async (presetName: string) => {
+    try {
+      const presetLandscape = await apiClient.loadPresetLandscape(presetName);
+      setLocalLandscape(presetLandscape);
+      onLandscapeUpdated(presetLandscape);
+      setExpandedNodes(new Set());
+    } catch (err: any) {
+      onError(err.message || 'Failed to load preset landscape');
+    }
+  };
 
   React.useEffect(() => {
     // Only update local landscape if the change came from outside (prop change)
@@ -922,6 +958,9 @@ export function LandscapeEditor({ landscape, onLandscapeUpdated, onError }: Land
         onCollapseAll={collapseAll}
         onSaveLandscape={saveLandscape}
         onLoadLandscape={loadLandscape}
+        onLoadPreset={loadPreset}
+        availablePresets={availablePresets}
+        isLoadingPresets={isLoadingPresets}
       />
       <div className="material-card p-4 max-h-[600px] overflow-y-auto font-mono text-sm bg-light">
         {localLandscape.length === 0 ? (
diff --git a/src/frontend/components/landscape-editor/LandscapeToolbar.tsx b/src/frontend/components/landscape-editor/LandscapeToolbar.tsx
@@ -1,4 +1,4 @@
-import { ChevronsDown, ChevronsUp, FileUp, Plus, Save } from 'lucide-react';
+import { ChevronsDown, ChevronsUp, FileUp, Plus, Save, BookOpen } from 'lucide-react';
 import { LandscapeToolbarProps } from './types';
 
 export function LandscapeToolbar({
@@ -7,7 +7,19 @@ export function LandscapeToolbar({
   onCollapseAll,
   onSaveLandscape,
   onLoadLandscape,
+  onLoadPreset,
+  availablePresets = [],
+  isLoadingPresets = false,
 }: LandscapeToolbarProps) {
+  const handlePresetChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const presetName = event.target.value;
+    if (presetName && onLoadPreset) {
+      onLoadPreset(presetName);
+      // Reset select to default
+      event.target.value = '';
+    }
+  };
+
   return (
     <div className="flex flex-wrap gap-3 mb-6">
       <button type="button" onClick={onAddApp} className="material-button-secondary px-4 py-2 flex items-center gap-2">
@@ -30,10 +42,31 @@ export function LandscapeToolbar({
         <ChevronsUp className="w-4 h-4" />
         Collapse All
       </button>
-      <button type="button" onClick={onSaveLandscape} className="material-button px-4 py-2 flex items-center gap-2">
-        <Save className="w-4 h-4" />
-        Save Landscape
-      </button>
+      {onLoadPreset && (
+        <div className="relative inline-block">
+          <select
+            onChange={handlePresetChange}
+            disabled={isLoadingPresets || availablePresets.length === 0}
+            className="material-button-secondary px-4 py-2 pr-10 appearance-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed bg-transparent"
+            defaultValue=""
+            aria-label="Load preset landscape"
+          >
+            <option value="" disabled>
+              {isLoadingPresets
+                ? 'Loading presets...'
+                : availablePresets.length === 0
+                  ? 'No presets available'
+                  : 'Load Preset'}
+            </option>
+            {availablePresets.map((preset) => (
+              <option key={preset.name} value={preset.name}>
+                {preset.name}
+              </option>
+            ))}
+          </select>
+          <BookOpen className="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" />
+        </div>
+      )}
       <label className="material-button-secondary px-4 py-2 flex items-center gap-2 cursor-pointer">
         <FileUp className="w-4 h-4" />
         Load Landscape
@@ -45,6 +78,10 @@ export function LandscapeToolbar({
           aria-label="Load landscape from file"
         />
       </label>
+      <button type="button" onClick={onSaveLandscape} className="material-button px-4 py-2 flex items-center gap-2">
+        <Save className="w-4 h-4" />
+        Save Landscape
+      </button>
     </div>
   );
 }
diff --git a/src/frontend/components/landscape-editor/types.ts b/src/frontend/components/landscape-editor/types.ts
@@ -71,4 +71,7 @@ export interface LandscapeToolbarProps {
   onCollapseAll: () => void;
   onSaveLandscape: () => void;
   onLoadLandscape: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onLoadPreset?: (presetName: string) => void;
+  availablePresets?: Array<{ name: string; filename: string }>;
+  isLoadingPresets?: boolean;
 }

Original file line number	Diff line number	Diff line change
`@@ -71,4 +71,7 @@ export interface LandscapeToolbarProps {`
`71`	`71`	`onCollapseAll: () => void;`
`72`	`72`	`onSaveLandscape: () => void;`
`73`	`73`	`onLoadLandscape: (event: React.ChangeEvent<HTMLInputElement>) => void;`
	`74`	`+ onLoadPreset?: (presetName: string) => void;`
	`75`	`+ availablePresets?: Array<{ name: string; filename: string }>;`
	`76`	`+ isLoadingPresets?: boolean;`
`74`	`77`	`}`