ran prettier

.github/ISSUE_TEMPLATE/bug.md

@@ -6,13 +6,12 @@ labels: "bug"
 
 **Description**
 
-
 - Version:
 - Platform:
 - Data source (e.g. bag file, mcap file, rosbridge, ROS 1/2 native):
 
 **Steps To Reproduce**
-<!--- Include the minimum possible code, example data, or screenshots to reproduce the problem. -->
 
+<!--- Include the minimum possible code, example data, or screenshots to reproduce the problem. -->
 
 **Expected Behavior**

.github/pull_request_template.md

@@ -1,9 +1,9 @@
 **User-Facing Changes**
+
 <!-- will be used as a changelog entry -->
 
 **Description**
 
-
 <!-- link relevant GitHub issues -->
 <!-- add `docs` label if this PR requires documentation updates -->
 <!-- add relevant metric tracking for experimental / new features -->

README.md

@@ -1,29 +1,42 @@
 # Foxglove Studio for Arena Web-Application
+
 More information on Foxglove Studio: https://github.com/foxglove/studio
 
 ## Installation
-* Clone this repository
+
+- Clone this repository
+
 ```
 git clone https://github.com/servetoz/foxglove-studio.git
 ```
-* Install 'git-lfs' (https://git-lfs.github.com/)
+
+- Install 'git-lfs' (https://git-lfs.github.com/)
+
 ```
 sudo apt install git-lfs
 git lfs install
 ```
-* Pull the large files
+
+- Pull the large files
+
 ```
 git lfs pull
 ```
-* Install the dependencies
+
+- Install the dependencies
+
 ```
 yarn install
 ```
-* Build the project
+
+- Build the project
+
 ```
 npm run web:build:prod
 ```
-* Serve the project
+
+- Serve the project
+
 ```
 npm run web:serve
 ```

packages/studio-base/src/components/DataSourceDialog/Start.tsx

@@ -2,7 +2,16 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import { Button, CircularProgress, Link, List, ListItem, ListItemButton, SvgIcon, Typography } from "@mui/material";
+import {
+  Button,
+  CircularProgress,
+  Link,
+  List,
+  ListItem,
+  ListItemButton,
+  SvgIcon,
+  Typography,
+} from "@mui/material";
 import { ReactNode, useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import tinycolor from "tinycolor2";
@@ -23,7 +32,7 @@ type ArenaIntance = {
   port: string;
   startedAt: string;
   secure: boolean;
-}
+};
 
 const useStyles = makeStyles()((theme) => ({
   logo: {
@@ -182,31 +191,36 @@ function SidebarItems(): JSX.Element {
       hostOrigin = window.location.ancestorOrigins[0] as string;
     }
     return hostOrigin;
-  }
+  };
 
-  const importRobotAndConnect = useCallback((instance: ArenaIntance) => {
-    if (loadingInstance) {
-      return;
-    }
-    setLoadingInstance(btoa(instance.name));
-    const robot = instance.robot.replace(/[^a-zA-Z0-9]/g, "");
-    layoutActions.importFromURL(`${getHostOrigin()}/foxglove-assets/robot/${robot}/layout.json`, () => {
-      const foxgloveWebSocketSource = availableSources.find((source) => source.type === "connection" && source.id === "foxglove-websocket");
-      if (!foxgloveWebSocketSource) {
+  const importRobotAndConnect = useCallback(
+    (instance: ArenaIntance) => {
+      if (loadingInstance) {
         return;
       }
-      selectSource(foxgloveWebSocketSource.id,
-        {
-          type: "connection",
-          params: {
-            url: (instance.secure ? "wss://" : "ws://") + instance.hostname + ":" + instance.port,
-          },
-        }
+      setLoadingInstance(btoa(instance.name));
+      const robot = instance.robot.replace(/[^a-zA-Z0-9]/g, "");
+      layoutActions.importFromURL(
+        `${getHostOrigin()}/foxglove-assets/robot/${robot}/layout.json`,
+        () => {
+          const foxgloveWebSocketSource = availableSources.find(
+            (source) => source.type === "connection" && source.id === "foxglove-websocket",
+          );
+          if (!foxgloveWebSocketSource) {
+            return;
+          }
+          selectSource(foxgloveWebSocketSource.id, {
+            type: "connection",
+            params: {
+              url: (instance.secure ? "wss://" : "ws://") + instance.hostname + ":" + instance.port,
+            },
+          });
+          setLoadingInstance(undefined);
+        },
       );
-      setLoadingInstance(undefined);
-    });
-  }, [setLoadingInstance, loadingInstance]);
-
+    },
+    [setLoadingInstance, loadingInstance],
+  );
 
   useLayoutEffect(() => {
     fetch(`${getHostOrigin()}/foxglove-assets/running.json`, {
@@ -226,31 +240,48 @@ function SidebarItems(): JSX.Element {
       id: "newArena",
       title: "Arena Running Instances",
       actions: (
-        <List sx={{
-          maxHeight: 400,
-          overflowY: 'auto',
-        }}>
-          {arenaRunningInstances.length > 0 && arenaRunningInstances.map((instance) => (
-            <DataSourceOption
-              key={btoa(instance.name)}
-              text={instance.name + " — Robot: " + instance.robot}
-              secondaryText={"URL: " + (instance.secure ? "wss://" : "ws://") + instance.hostname + ":" + instance.port + " | Started at: " + new Date(instance.startedAt).toLocaleString("de-DE", { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: "2-digit" })}
-              icon={loadingInstance == btoa(instance.name) ? (
-                <CircularProgress
-                  size={32}
-                  color="primary"
-                  variant="indeterminate"
-                />) : (
-                <SvgIcon fontSize="large" color="primary" viewBox="0 0 2048 2048">
-                  <path d="M1408 256h640v640h-640V640h-120l-449 896H640v256H0v-640h640v256h120l449-896h199V256zM512 1664v-384H128v384h384zm1408-896V384h-384v384h384z" />
-                </SvgIcon>
-              )}
-              onClick={() => {
-                importRobotAndConnect(instance);
-              }}
-              target="_blank"
-            />
-          ))}
+        <List
+          sx={{
+            maxHeight: 400,
+            overflowY: "auto",
+          }}
+        >
+          {arenaRunningInstances.length > 0 &&
+            arenaRunningInstances.map((instance) => (
+              <DataSourceOption
+                key={btoa(instance.name)}
+                text={instance.name + " — Robot: " + instance.robot}
+                secondaryText={
+                  "URL: " +
+                  (instance.secure ? "wss://" : "ws://") +
+                  instance.hostname +
+                  ":" +
+                  instance.port +
+                  " | Started at: " +
+                  new Date(instance.startedAt).toLocaleString("de-DE", {
+                    year: "numeric",
+                    month: "2-digit",
+                    day: "2-digit",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                  })
+                }
+                icon={
+                  loadingInstance == btoa(instance.name) ? (
+                    <CircularProgress size={32} color="primary" variant="indeterminate" />
+                  ) : (
+                    <SvgIcon fontSize="large" color="primary" viewBox="0 0 2048 2048">
+                      <path d="M1408 256h640v640h-640V640h-120l-449 896H640v256H0v-640h640v256h120l449-896h199V256zM512 1664v-384H128v384h384zm1408-896V384h-384v384h384z" />
+                    </SvgIcon>
+                  )
+                }
+                onClick={() => {
+                  importRobotAndConnect(instance);
+                }}
+                target="_blank"
+              />
+            ))}
         </List>
       ),
     };
@@ -381,7 +412,13 @@ export default function Start(): JSX.Element {
       <div className={classes.spacer} />
       <Stack gap={4} className={classes.sidebar}>
         <SidebarItems key={sidebarItemsKey} />
-        <Button variant="text" color="primary" onClick={() => { setSidebarItemsKey(sidebarItemsKey + 1); }}>
+        <Button
+          variant="text"
+          color="primary"
+          onClick={() => {
+            setSidebarItemsKey(sidebarItemsKey + 1);
+          }}
+        >
           Refresh
         </Button>
       </Stack>

packages/studio-base/src/components/PanelExtensionAdapter/PanelExtensionAdapter.tsx

@@ -40,7 +40,9 @@ import {
   useSetHoverValue,
 } from "@foxglove/studio-base/context/TimelineInteractionStateContext";
 import useGlobalVariables from "@foxglove/studio-base/hooks/useGlobalVariables";
-import arenaPedsimAgents, { ArenaSceneUpdate } from "@foxglove/studio-base/extensions/arena/pedsimAgentConverter";
+import arenaPedsimAgents, {
+  ArenaSceneUpdate,
+} from "@foxglove/studio-base/extensions/arena/pedsimAgentConverter";
 import arenaPedSimWalls from "@foxglove/studio-base/extensions/arena/wallsConverter";
 import {
   AdvertiseOptions,
@@ -132,7 +134,6 @@ function PanelExtensionAdapter(
   const [watchedFields, setWatchedFields] = useState(new Set<keyof RenderState>());
   const messageConverters = useExtensionCatalog(selectInstalledMessageConverters);
 
-
   const [localSubscriptions, setLocalSubscriptions] = useState<Subscription[]>([]);
 
   const [appSettings, setAppSettings] = useState(new Map<string, AppSettingValue>());
@@ -228,8 +229,9 @@ function PanelExtensionAdapter(
     if (!renderFn || !isPanelInitializedRef.current) {
       return;
     }
-    const pedSimAgentConverter: RegisterMessageConverterArgs<ArenaSceneUpdate> =  arenaPedsimAgents();
-    const pedSimWallsConverter: RegisterMessageConverterArgs<SceneUpdate> =  arenaPedSimWalls();
+    const pedSimAgentConverter: RegisterMessageConverterArgs<ArenaSceneUpdate> =
+      arenaPedsimAgents();
+    const pedSimWallsConverter: RegisterMessageConverterArgs<SceneUpdate> = arenaPedSimWalls();
 
     let customizedMessageConverters = [];
     if (Array.isArray(messageEvents) && messageEvents.length > 0) {

packages/studio-base/src/context/Workspace/useWorkspaceActions.ts

@@ -166,31 +166,32 @@ export function useWorkspaceActions(): WorkspaceActions {
     void analytics.logEvent(AppEvent.LAYOUT_IMPORT);
   }, [analytics, appContext, isMounted, setCurrentLayout]);
 
+  const importLayoutFromURL = useCallbackWithToast(
+    async (url: string, completeCallback?: Function) => {
+      const file = await fetch(url, {
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+      });
+      const content = await file.json();
 
-  const importLayoutFromURL = useCallbackWithToast(async (url: string, completeCallback?: Function) => {
-
-    const file = await fetch(url, {
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json'
+      if (!isMounted()) {
+        return;
       }
-    });
-    const content = await file.json();
-
-    if (!isMounted()) {
-      return;
-    }
 
-    const data = content as LayoutData;
+      const data = content as LayoutData;
 
-    setCurrentLayout({ data });
+      setCurrentLayout({ data });
 
-    if (completeCallback) {
-      completeCallback();
-    }
+      if (completeCallback) {
+        completeCallback();
+      }
 
-    void analytics.logEvent(AppEvent.LAYOUT_IMPORT);
-  }, [analytics, appContext, isMounted, setCurrentLayout]);
+      void analytics.logEvent(AppEvent.LAYOUT_IMPORT);
+    },
+    [analytics, appContext, isMounted, setCurrentLayout],
+  );
 
   const exportLayoutToFile = useCallback(() => {
     // Use a stable getter to fetch the current layout to avoid thrashing the