machinaos 0.0.1 → 0.0.7

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

@@ -1,65 +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>
-  );
-};
-
+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

@@ -1,92 +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>
-  );
-};
-
+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;