Fix critical crash when changing renderer settings

ShortestPathLab · Dec 6, 2024 · b852660 · b852660
1 parent 2b81e73
commit b852660
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 104 deletions.
diff --git a/client/src/components/settings-editor/RendererEditor.tsx b/client/src/components/settings-editor/RendererEditor.tsx
@@ -43,107 +43,109 @@ export function RendererEditor({ value, onValueChange }: RendererEditorProps) {
     onValueChange?.(merge(value, next));
   }
 
-  const status = value?.disabled ? "disabled" : current ? "connected" : "error";
+  const status = value?.disabled
+    ? "disabled"
+    : current?.renderer
+    ? "connected"
+    : "error";
 
   return (
-    <>
-      <Flex alignItems="center" py={1}>
-        <Dialog
-          slotProps={{
-            paper: { sx: { width: 480 } },
-            popover: {
-              anchorOrigin: { horizontal: -18, vertical: "bottom" },
-            },
-          }}
-          popover
-          trigger={(onClick) => (
-            <>
-              <Box
-                className={value.key}
-                {...{ onClick }}
-                flex={1}
-                sx={{
-                  width: 0,
+    <Flex alignItems="center" py={1}>
+      <Dialog
+        slotProps={{
+          paper: { sx: { width: 480 } },
+          popover: {
+            anchorOrigin: { horizontal: -18, vertical: "bottom" },
+          },
+        }}
+        popover
+        trigger={(onClick) => (
+          <>
+            <Box
+              className={value.key}
+              {...{ onClick }}
+              flex={1}
+              sx={{
+                width: 0,
+                overflow: "hidden",
+                "> *": {
                   overflow: "hidden",
-                  "> *": {
-                    overflow: "hidden",
-                    whiteSpace: "nowrap",
-                    textOverflow: "ellipsis",
-                  },
-                }}
-              >
-                <Type component="div">
-                  {current
-                    ? `${current.renderer.meta.name} ${current.renderer.meta.version}`
-                    : startCase(status)}
-                </Type>
-                {!!current && (
-                  <Type component="div" variant="body2" color="text.secondary">
-                    <>
-                      <span>{current.renderer.meta.description}</span>
-                      <br />
-                      <span>
-                        Contributes{" "}
-                        {join(current.renderer.meta.components, ", ")}
-                      </span>
-                    </>
-                  </Type>
-                )}
+                  whiteSpace: "nowrap",
+                  textOverflow: "ellipsis",
+                },
+              }}
+            >
+              <Type component="div">
+                {current?.renderer
+                  ? `${current?.renderer?.meta?.name} ${current.renderer?.meta?.version}`
+                  : startCase(status)}
+              </Type>
+              {!!current?.renderer && (
                 <Type component="div" variant="body2" color="text.secondary">
-                  {transports[value?.transport]?.name}
-                  {": "}
-                  {value?.url || "No URL"}
+                  <>
+                    <span>{current.renderer?.meta?.description}</span>
+                    <br />
+                    <span>
+                      Contributes{" "}
+                      {join(current.renderer?.meta?.components, ", ")}
+                    </span>
+                  </>
                 </Type>
-              </Box>
-              <Chip
-                sx={{
-                  minWidth: 0,
-                  maxWidth: "fit-content",
-                  flex: 1,
-                  mx: 1,
-                  color: statusColor[status],
-                  ...omit(paper(1), "borderRadius"),
-                }}
-                size="small"
-                label={startCase(status)}
-              />
-              <Tooltip
-                title={`${value.disabled ? "Enable" : "Disable"} Renderer`}
-              >
-                <Box mr={-3}>
-                  <Switch
-                    checked={!value.disabled}
-                    onChange={(_, v) => handleChange({ disabled: !v })}
-                  />
-                </Box>
-              </Tooltip>
-            </>
-          )}
-          appBar={{ children: <Title>Edit Renderer</Title> }}
-        >
-          <Box p={2.5}>
-            <TextField
-              autoFocus
-              defaultValue={value.url}
-              onChange={(e) => handleChange({ url: e.target.value })}
-              fullWidth
-              variant="filled"
-              label="URL"
-              sx={{ mb: 2 }}
+              )}
+              <Type component="div" variant="body2" color="text.secondary">
+                {transports[value?.transport]?.name}
+                {": "}
+                {value?.url || "No URL"}
+              </Type>
+            </Box>
+            <Chip
+              sx={{
+                minWidth: 0,
+                maxWidth: "fit-content",
+                flex: 1,
+                mx: 1,
+                color: statusColor[status],
+                ...omit(paper(1), "borderRadius"),
+              }}
+              size="small"
+              label={startCase(status)}
             />
-            <Select
-              placeholder="Renderer Type"
-              items={entries(transports).map(([k, { name }]) => ({
-                value: k,
-                label: name,
-              }))}
-              fullWidth
-              value={value.transport}
-              onChange={(v) => handleChange({ transport: v })}
-            />
-          </Box>
-        </Dialog>
-      </Flex>
-    </>
+            <Tooltip
+              title={`${value.disabled ? "Enable" : "Disable"} Renderer`}
+            >
+              <Box mr={-3}>
+                <Switch
+                  checked={!value.disabled}
+                  onChange={(_, v) => handleChange({ disabled: !v })}
+                />
+              </Box>
+            </Tooltip>
+          </>
+        )}
+        appBar={{ children: <Title>Edit Renderer</Title> }}
+      >
+        <Box p={2.5}>
+          <TextField
+            autoFocus
+            defaultValue={value.url}
+            onChange={(e) => handleChange({ url: e.target.value })}
+            fullWidth
+            variant="filled"
+            label="URL"
+            sx={{ mb: 2 }}
+          />
+          <Select
+            placeholder="Renderer Type"
+            items={entries(transports).map(([k, { name }]) => ({
+              value: k,
+              label: name,
+            }))}
+            fullWidth
+            value={value.transport}
+            onChange={(v) => handleChange({ transport: v })}
+          />
+        </Box>
+      </Dialog>
+    </Flex>
   );
 }
diff --git a/client/src/pages/ViewportPage.tsx b/client/src/pages/ViewportPage.tsx
@@ -167,11 +167,14 @@ export function ViewportPage({ template: Page }: PageContentProps) {
                 id: "internal:auto",
                 name: `Auto (${auto?.renderer?.meta?.name ?? "None"})`,
               },
-              ...map(renderers, ({ renderer }) => ({
-                id: renderer.meta.id,
-                name: renderer.meta.name,
-                description: renderer.meta.id,
-              })),
+              ...map(
+                filter(renderers, (r) => !!r.renderer),
+                ({ renderer }) => ({
+                  id: renderer?.meta?.id,
+                  name: renderer?.meta?.name,
+                  description: renderer?.meta?.id,
+                })
+              ),
             ]}
             arrow
           />
@@ -183,7 +186,7 @@ export function ViewportPage({ template: Page }: PageContentProps) {
             value={layerSet}
             onChange={setLayerSet}
             items={map(layers, (c) => ({
-              id: c.key,
+              id: c?.key,
               name: inferLayerName(c),
             }))}
             showArrow

diff --git a/client/src/public/manifest.json b/client/src/public/manifest.json
@@ -1,9 +1,9 @@
 {
   "short_name": "Posthoc",
   "name": "Posthoc",
-  "version": "1.2.5-5",
+  "version": "1.2.5-6",
   "description": "Understand sequential decision-making through visualisation.",
-  "version_name": "1.2.5-5; mid November 2024",
+  "version_name": "1.2.5-6; early December 2024",
   "repository": "https://github.com/ShortestPathLab/posthoc-app",
   "changelog": "http://posthoc.pathfinding.ai/blog",
   "docs": "https://posthoc.pathfinding.ai/docs/overview",