nearly there. It might be enough.

experiences/asteroids/controls/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

experiences/asteroids/controls/lib/AsteroidWatch.tsx

@@ -1,31 +1,37 @@
 import { useMessaging } from "@footron/controls-client";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { IconButton } from "@mui/material";
-import { standardContainerStyle } from "./style";
+import { Box, Button } from "@mui/material";
+import { fullSizeStyle, largeBottomUiStyle, smallTopUiStyle, thinBottomWidgetStyle } from "./style";
+import ZoomControls from "./zoom";
+import TimeSlider from "./timeSlider";
 
 export default function AsteroidWatch() {
   const { sendMessage } = useMessaging();
 
   const prev = async () => {
-    sendMessage({ type: "watch", value: "previoius" });
+    sendMessage({ type: "watch", value: "previous" });
   };
 
   const next = async () => {
     sendMessage({ type: "watch", value: "next" });
   };
 
   return (
-    <div>
-      <b>Select next close approach</b>
-      <span style={standardContainerStyle}>
-        <IconButton onClick={prev}>
-          <ChevronLeftIcon sx={{ fontSize: 80 }} />
-        </IconButton>
-        <IconButton onClick={next}>
-          <ChevronRightIcon sx={{ fontSize: 80 }} />
-        </IconButton>
-      </span>
+    <div css={fullSizeStyle}>
+      <Box css={smallTopUiStyle}>
+        <h3>Select next close approach</h3>
+      </Box>
+      <Box css={largeBottomUiStyle}>
+        <Box css={thinBottomWidgetStyle}>
+          <Button color="primary" variant="contained" size="large" onClick={prev}>
+            <strong>{"<"}</strong>
+          </Button>
+          <Button color="primary" variant="contained" size="large" onClick={next}>
+            <strong>{">"}</strong>
+          </Button>
+        </Box>
+        <ZoomControls />
+        <TimeSlider />
+      </Box>
     </div>
   );
 }

experiences/asteroids/controls/lib/FlyTo.tsx

@@ -1,32 +1,55 @@
 import React, { useCallback, useState } from "react";
 import {
-  MenuItem,
+  ClickAwayListener,
+  Backdrop,
+  IconButton,
+} from "@mui/material";
+import {
   Select,
+  MenuItem,
   FormControl,
   InputLabel,
   Box,
   Button,
-} from "@material-ui/core";
+} from "@material-ui/core"
 import { useMessaging } from "@footron/controls-client";
 import { flyTargets } from "./flytargets";
-import { standardContainerStyle } from "./style";
+import { definitionHeaderStyle, overlayMenuStyle, fullSizeStyle, halfWidthStyle, overlayStyle, standardContainerStyle, thinBottomWidgetStyle } from "./style";
+import { Close } from "@material-ui/icons";
+
+interface DefinitionOverlayProps {
+  definition: string;
+}
 
 export default function FlyTo() {
   const [selectedCategory, setSelectedCategory] = useState<string>("");
   const [selectedTarget, setSelectedTarget] = useState<string>("");
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [infoText, setInfoText] = useState<string>("");
+  const [infoTitle, setInfoTitle] = useState<string>("");
+  const { sendMessage } = useMessaging((message: any) => {
+    console.log("Incoming info: ", message);
+    if (message.title != null && message.content != null) {
+      setInfoText(message.content);
+      setInfoTitle(message.title);
+    }
+  });
+
   const handleCategoryChange = (
     event: React.ChangeEvent<{ value: unknown }>
   ) => {
     const category = event.target.value as string;
     setSelectedCategory(category);
-    setSelectedTarget(flyTargets[category][0]); // Reset model when make changes
+    setSelectedTarget(flyTargets[category][0]);
+    setInfoText("");
+    setInfoTitle("");
+    console.log("Reset");
   };
   const handleTargetChange = (event: React.ChangeEvent<{ value: unknown }>) => {
     setSelectedTarget(event.target.value as string);
+    setInfoText("");
+    setInfoTitle("");
   };
-  const [infoText, setText] = useState<string>("");
-
-  const { sendMessage } = useMessaging<string>((message) => setText(message));
 
   const getInfoText = useCallback(
     async (target) => {
@@ -35,10 +58,47 @@ export default function FlyTo() {
     [sendMessage]
   );
 
+  const handleClickAwaySettings = (event: MouseEvent | TouchEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setMenuOpen(false);
+  };
+
+  const DefinitionOverlay: React.FC<DefinitionOverlayProps> = ({
+    definition,
+  }) => {
+    return (
+      <Box css={overlayMenuStyle}>
+        <Box css={definitionHeaderStyle}>
+          <Box> </Box>
+          <h3>{infoTitle}</h3>
+          <IconButton onClick={() => {
+            setMenuOpen(false);
+            setInfoText("");
+            setInfoTitle("");
+            console.log(infoText, infoTitle)
+            }}>
+            <Close />
+          </IconButton>
+        </Box>
+        <Box dangerouslySetInnerHTML={{ __html: infoText }} ></Box>
+      </Box>
+    );
+  };
+
   return (
-    <Box style={{ justifyContent: "center" }}>
-      <b>Fly to somewhere in space</b>
-      <Box p={2} style={standardContainerStyle}>
+    <Box css={fullSizeStyle}>
+      {menuOpen ? (
+        <Backdrop open={true} css={overlayStyle}>
+          <ClickAwayListener onClickAway={handleClickAwaySettings}>
+            <Box css={overlayMenuStyle}>
+              <DefinitionOverlay definition={infoText} />
+            </Box>
+          </ClickAwayListener>
+        </Backdrop>
+      ) : null}
+      <h3>Fly to somewhere in space</h3>
+      <Box p={1} css={standardContainerStyle}>
         <FormControl fullWidth>
           <InputLabel id="make-label">Select Category</InputLabel>
           <Select value={selectedCategory} onChange={handleCategoryChange}>
@@ -50,7 +110,7 @@ export default function FlyTo() {
           </Select>
         </FormControl>
       </Box>
-      <Box p={2} style={standardContainerStyle}>
+      <Box p={1} css={standardContainerStyle}>
         <FormControl fullWidth disabled={!selectedCategory}>
           <InputLabel>Select Destination</InputLabel>
           <Select
@@ -67,25 +127,29 @@ export default function FlyTo() {
           </Select>
         </FormControl>
       </Box>
-      <Box
-        style={standardContainerStyle}
-      >
+      <Box css={thinBottomWidgetStyle}>
         {selectedTarget ? (
           <Button
             variant="contained"
             color="primary"
             onClick={() => getInfoText(selectedTarget)}
-            style={{ width: "50%" }}
+            css={halfWidthStyle}
           >
             Fly to Target
           </Button>
         ) : (
-          "Select a destination to fly to"
+          null
         )}
       </Box>
-      <Box>
-        {infoText}
-      </Box>
+      {(infoText != "") && <Box css={thinBottomWidgetStyle}>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => setMenuOpen(true)}
+          css={halfWidthStyle}>
+          About
+        </Button>
+      </Box>}
     </Box>
   );
 }

experiences/asteroids/controls/lib/Info.tsx

@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 import { Divider, IconButton } from "@material-ui/core";
 import { Close } from "@material-ui/icons";
+import { definitionHeaderStyle, overlayMenuStyle, fullSizeStyle, largeTopUiStyle, overlayStyle, thinBottomWidgetStyle } from "./style";
 
 interface InfoObject {
   [key: string]: definitionObject;
@@ -80,7 +81,7 @@ export default function Info() {
       </p>
     </div>,
     <div key="page3">
-      <h2>Learn with the Footron</h2>
+      <h2>Learn with the footron</h2>
       <p>
         Select 'Learn' to access three different stories about asteroids and
         comets, including a tour through NASA's historic missions.
@@ -149,10 +150,7 @@ export default function Info() {
           Solar System Dynamics
         </a>{" "}
         website. Visit the{" "}
-        <a
-          href="https://www.nasa.gov/planetarydefense/overview"
-          target="_blank"
-        >
+        <a href="https://www.nasa.gov/planetarydefense/overview" target="_blank">
           Planetary Defense Coordination Office
         </a>{" "}
         for more information on how NASA monitors for potentially hazardous
@@ -166,7 +164,6 @@ export default function Info() {
       title: "Asteroid",
       description: (
         <div>
-          <h4>Asteroid</h4>
           <p>
             Sometimes called minor planets, asteroids are rocky, airless
             remnants left over from the early formation of our solar system
@@ -196,7 +193,6 @@ export default function Info() {
       title: "Comet",
       description: (
         <div>
-          <h4>Comet</h4>
           <p>
             Comets are frozen leftovers from the formation of the solar system
             composed of dust, rock, and ice. They range from a few kilometers,
@@ -225,8 +221,6 @@ export default function Info() {
       title: "Near Earth Object (NEO)",
       description: (
         <div>
-          <h4>NEO</h4>
-          <h5>Near-Earth object</h5>
           <p>
             {" "}
             A near-Earth object is any small solar system body whose orbit
@@ -249,13 +243,12 @@ export default function Info() {
           </p>
         </div>
       ),
-      relatedTerms: ["perehelion"],
+      relatedTerms: ["perihelion", "pho", "au"],
     },
-    parihelion: {
+    perihelion: {
       title: "Perihelion",
       description: (
         <div>
-          <h4>Perihelion</h4>
           <p>
             The perihelion is the point in the orbit of an object at which it is
             closest to the sun.{" "}
@@ -275,7 +268,6 @@ export default function Info() {
       title: "Aphelion",
       description: (
         <div>
-          <h4>Aphelion</h4>
           <p>
             The aphelion is the point in the orbit of an object at which it is
             farthest from the sun.
@@ -441,24 +433,10 @@ export default function Info() {
     definition,
   }) => {
     return (
-      <Box
-        sx={{
-          width: "min(85%, 800px)",
-          maxHeight: "85%",
-          bgcolor: "background.paper",
-          overflow: "auto",
-          padding: "2em",
-        }}
-      >
-        <Box
-          sx={{
-            display: "flex",
-            width: "100%",
-            justifyContent: "space-between",
-          }}
-        >
+      <Box css={overlayMenuStyle}>
+        <Box css={definitionHeaderStyle}>
           <Box> </Box>
-          <h4>{definitions[definition].title}</h4>
+          <h3>{definitions[definition].title}</h3>
           <IconButton onClick={() => setMenuOpen(false)}>
             <Close />
           </IconButton>
@@ -472,40 +450,28 @@ export default function Info() {
   };
 
   return (
-    <Box>
+    <Box css={fullSizeStyle}>
       {menuOpen ? (
-        <Backdrop open={true} style={{ zIndex: "99999" }}>
+        <Backdrop open={true} css={overlayStyle}>
           <ClickAwayListener onClickAway={handleClickAwaySettings}>
-            <Box
-              sx={{
-                width: "min(85%, 800px)",
-                maxHeight: "85%",
-                bgcolor: "background.paper",
-                overflow: "auto",
-                padding: "2em",
-              }}
-            >
+            <Box css={overlayMenuStyle}>
               <DefinitionOverlay definition={currentDefinition} />
             </Box>
           </ClickAwayListener>
         </Backdrop>
       ) : null}
-      {pages[currentPage - 1]}
+      <Box css={largeTopUiStyle}>
+        {pages[currentPage - 1]}
+      </Box>
 
       <Pagination
-        size="small"
+        size="medium"
         count={pages.length}
         page={currentPage}
         onChange={handlePageChange}
         color="primary"
         variant="outlined"
-        shape="rounded"
-        sx={{
-          marginTop: 2,
-          display: "flex",
-          justifyContent: "center",
-          zIndex: "888",
-        }}
+        css={thinBottomWidgetStyle}
       />
     </Box>
   );