machinaos 0.0.1

package/client/src/components/parameterPanel/LocationPanelLayout.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Node } from 'reactflow';
+import InputSection from './InputSection';
+import MiddleSection from './MiddleSection';
+import MapsSection from './MapsSection';
+import { INodeTypeDescription } from '../../types/INodeProperties';
+
+interface LocationPanelLayoutProps {
+  // Node data
+  selectedNode: Node;
+  nodeDefinition: INodeTypeDescription;
+  parameters: Record<string, any>;
+  hasUnsavedChanges: boolean;
+
+  // Parameter handling
+  onParameterChange: (paramName: string, value: any) => void;
+
+  // Layout configuration
+  showInputSection?: boolean;
+}
+
+const LocationPanelLayout: React.FC<LocationPanelLayoutProps> = ({
+  selectedNode,
+  nodeDefinition,
+  parameters,
+  hasUnsavedChanges: _hasUnsavedChanges,
+  onParameterChange,
+  showInputSection = true
+}) => {
+  return (
+    <div style={{ display: 'flex', height: '100%', minHeight: 0 }}>
+      {/* Left: Input Nodes JSON Data */}
+      {showInputSection && (
+        <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
+          <InputSection
+            nodeId={selectedNode.id}
+            visible={showInputSection}
+          />
+        </div>
+      )}
+
+      {/* Middle: Parameter Content */}
+      <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
+        <MiddleSection
+          nodeId={selectedNode.id}
+          nodeDefinition={nodeDefinition}
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+        />
+      </div>
+
+      {/* Right: Maps Section */}
+      <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
+        <MapsSection
+          selectedNode={selectedNode}
+          nodeDefinition={nodeDefinition}
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LocationPanelLayout;

package/client/src/components/parameterPanel/MapsSection.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect, useRef } from 'react';
+import MapsPreviewPanel from '../maps/MapsPreviewPanel';
+import { useAppTheme } from '../../hooks/useAppTheme';
+import { Node } from 'reactflow';
+import { INodeTypeDescription } from '../../types/INodeProperties';
+import {
+  getCoordinateParams,
+  getCurrentCoordinates,
+  getMapDisplayParams,
+  getGoogleMapsApiKey,
+  createLocationUpdateHandler
+} from '../../utils/locationUtils';
+import { useApiKeys } from '../../hooks/useApiKeys';
+
+interface MapsSectionProps {
+  selectedNode: Node;
+  nodeDefinition: INodeTypeDescription;
+  parameters: Record<string, any>;
+  onParameterChange: (paramName: string, value: any) => void;
+  visible?: boolean;
+}
+
+const MapsSection: React.FC<MapsSectionProps> = ({
+  nodeDefinition,
+  parameters,
+  onParameterChange,
+  visible = true
+}) => {
+  const theme = useAppTheme();
+  const { getStoredApiKey, isConnected } = useApiKeys();
+  const [apiKey, setApiKey] = useState<string | undefined>(() => {
+    // Initialize with env variable if available
+    return getGoogleMapsApiKey();
+  });
+  const hasFetchedRef = useRef(false);
+
+  // Fetch stored API key from backend when WebSocket is connected
+  useEffect(() => {
+    if (!isConnected || hasFetchedRef.current) {
+      return;
+    }
+
+    const fetchApiKey = async () => {
+      hasFetchedRef.current = true;
+      try {
+        const storedKey = await getStoredApiKey('google_maps');
+        if (storedKey) {
+          setApiKey(storedKey);
+        }
+      } catch {
+        // Keep env key if fetch fails
+      }
+    };
+
+    fetchApiKey();
+  }, [isConnected, getStoredApiKey]);
+
+  if (!visible) {
+    return null;
+  }
+
+  // Get coordinate parameters and current values
+  const locationParams = getCoordinateParams(nodeDefinition);
+  const { lat, lng } = getCurrentCoordinates(parameters, locationParams);
+  const { zoom, mapTypeId } = getMapDisplayParams(parameters);
+
+  // Create location update handler
+  const handleLocationUpdate = createLocationUpdateHandler(locationParams, onParameterChange);
+
+  return (
+    <div style={{
+      backgroundColor: theme.colors.backgroundPanel,
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%'
+    }}>
+      <MapsPreviewPanel
+        lat={lat}
+        lng={lng}
+        zoom={zoom}
+        mapTypeId={mapTypeId}
+        apiKey={apiKey}
+        onLocationClick={handleLocationUpdate}
+        title="Maps Preview"
+        description="Interactive map based on current parameters"
+      />
+    </div>
+  );
+};
+
+export default MapsSection;