prettier formatting

ui/src/App.test.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

ui/src/components/Canvas.tsx

@@ -195,19 +195,18 @@ const ScopeNode = memo<Props>(({ data, id, isConnectable }) => {
 
 // FIXME: the resultblock is rendered every time the parent codeNode changes (e.g., dragging), we may set the result number as a state of a pod to memoize the resultblock.
 
-function ResultBlock({ pod, id}) {
+function ResultBlock({ pod, id }) {
   const store = useContext(RepoContext);
   const [showOutput, setShowOutput] = useState(true);
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
   return (
     <Box
-    sx={{
-      minHeight: pod.height,
-    }}>
+      sx={{
+        minHeight: pod.height,
+      }}
+    >
       {pod.result && (
-        <Box
-          sx={{ display: "flex", flexDirection: "column" }}
-        >
+        <Box sx={{ display: "flex", flexDirection: "column" }}>
           {pod.result.html ? (
             <div dangerouslySetInnerHTML={{ __html: pod.result.html }}></div>
           ) : (
@@ -241,11 +240,12 @@ function ResultBlock({ pod, id}) {
 
       {pod.running && <CircularProgress />}
       {showOutput ? (
-        <Box 
-        sx={{ paddingBottom: "2px" }}
-        overflow="scroll"
-        maxHeight="145px"
-        border="1px">
+        <Box
+          sx={{ paddingBottom: "2px" }}
+          overflow="scroll"
+          maxHeight="145px"
+          border="1px"
+        >
           {/* <Box bgcolor="lightgray">Error</Box> */}
           <Button
             onClick={() => {
@@ -295,7 +295,7 @@ function ResultBlock({ pod, id}) {
             </Box>
           )}
         </Box>
-      ):(
+      ) : (
         <Box
           sx={{
             paddingBottom: "5px",

ui/src/components/canvas.style.js

@@ -22,17 +22,17 @@ export default {
     paddingLeft: "5px",
     fontSize: "12px",
   },
-  'hidden-btn': {
+  "hidden-btn": {
     fontSize: 10,
-    paddingTop: '3px',
-    paddingBottom: '2px',
-    lineHeight: '10px',
-    zIndex: 201
+    paddingTop: "3px",
+    paddingBottom: "2px",
+    lineHeight: "10px",
+    zIndex: 201,
   },
-  'hidden-hint': {
+  "hidden-hint": {
     fontSize: 10,
-    color: 'rgb(151, 151, 151)',
-    whiteSpace: 'pre',
-    paddingTop: '2px'
-  }
+    color: "rgb(151, 151, 151)",
+    whiteSpace: "pre",
+    paddingTop: "2px",
+  },
 };

ui/src/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>

ui/src/lib/styles.tsx

@@ -1,10 +1,10 @@
-export const yRemoteSelectionStyle = (clientID:string, color:string) => {
-    return `.yRemoteSelection-${clientID} 
+export const yRemoteSelectionStyle = (clientID: string, color: string) => {
+  return `.yRemoteSelection-${clientID} 
     { background-color: ${color}; opacity: 0.5;} `;
 };
 
-export const yRemoteSelectionHeadStyle = (clientID:string, color:string) => {
-    return `.yRemoteSelectionHead-${clientID} {  
+export const yRemoteSelectionHeadStyle = (clientID: string, color: string) => {
+  return `.yRemoteSelectionHead-${clientID} {  
         position: absolute;
         border-left: ${color} solid 2px;
         border-top: ${color} solid 2px;
@@ -13,8 +13,12 @@ export const yRemoteSelectionHeadStyle = (clientID:string, color:string) => {
         box-sizing: border-box;}`;
 };
 
-export const yRemoteSelectionHeadHoverStyle = (clientID:string, color:string, name:string) => {
-    return `.yRemoteSelectionHead-${clientID}:hover::after { 
+export const yRemoteSelectionHeadHoverStyle = (
+  clientID: string,
+  color: string,
+  name: string
+) => {
+  return `.yRemoteSelectionHead-${clientID}:hover::after { 
         content: "${name}"; 
         background-color: ${color}; 
         box-shadow: 0 0 0 2px ${color};
@@ -23,10 +27,14 @@ export const yRemoteSelectionHeadHoverStyle = (clientID:string, color:string, na
         opacity: 1; }`;
 };
 
-export function addAwarenessStyle(clientID:string, color:string, name:string) {
-    const styles = document.createElement("style");
-    styles.append(yRemoteSelectionStyle(clientID, color));
-    styles.append(yRemoteSelectionHeadStyle(clientID, color));
-    styles.append(yRemoteSelectionHeadHoverStyle(clientID, color, name));
-    document.head.append(styles);
-}
+export function addAwarenessStyle(
+  clientID: string,
+  color: string,
+  name: string
+) {
+  const styles = document.createElement("style");
+  styles.append(yRemoteSelectionStyle(clientID, color));
+  styles.append(yRemoteSelectionHeadStyle(clientID, color));
+  styles.append(yRemoteSelectionHeadHoverStyle(clientID, color, name));
+  document.head.append(styles);
+}