Improve path hit detection

ShortestPathLab · Mar 28, 2024 · 296964c · 296964c
1 parent b3cdcf0
commit 296964c
Show file tree

Hide file tree

Showing 11 changed files with 380 additions and 71 deletions.
diff --git a/client/package.json b/client/package.json
@@ -31,8 +31,6 @@
     "nearest-pantone": "^1.0.1",
     "object-sizeof": "^2.6.4",
     "overlayscrollbars": "^2.3.2",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "overlayscrollbars-react": "^0.5.2",
     "performant-array-to-tree": "^1.11.0",
     "pluralize": "^8.0.0",
@@ -43,6 +41,8 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-colorful": "^5.6.1",
     "react-d3-tree": "^3.6.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",
     "react-file-drop": "^3.1.6",

diff --git a/client/src/components/inspector/PropertyList.tsx b/client/src/components/inspector/PropertyList.tsx
@@ -17,12 +17,14 @@ import { Property, renderProperty } from "components/generic/Property";
 import {
   Dictionary,
   chain as _,
+  constant,
   filter,
   indexOf,
+  isNumber,
+  isString,
   isUndefined,
   map,
   merge,
-  slice,
   startCase,
 } from "lodash";
 
@@ -44,13 +46,14 @@ type PropertyListProps = {
   variant?: TypographyVariant;
   max?: number;
   simple?: boolean;
+  primitives?: boolean;
 };
 
 export function PropertyDialog({
   event,
   max = 10,
-  simple,
-  variant,
+  simple: _simple,
+  variant: _variant,
   ...rest
 }: PropertyListProps & DialogProps) {
   const sorted = sortEventKeys(event);
@@ -129,23 +132,38 @@ export function PropertyDialog({
 }
 
 export function PropertyList(props: PropertyListProps & FlexProps) {
-  const { event, variant = "body2", max = 10, simple, ...rest } = props;
+  const {
+    event,
+    variant = "body2",
+    max = 10,
+    simple,
+    primitives,
+    ...rest
+  } = props;
 
   const sorted = sortEventKeys(event);
   return (
     <>
       <Flex {...rest}>
-        {map(slice(sorted, 0, max), ([k, v], i) => (
-          <Property
-            label={k}
-            value={v}
-            key={i}
-            type={{ variant }}
-            simple={simple}
-          />
-        ))}
+        {_(sorted)
+          .filter(primitives ? ([, v]) => isPrimitive(v) : constant(true))
+          .slice(0, max)
+          .map(([k, v], i) => (
+            <Property
+              label={k}
+              value={v}
+              key={i}
+              type={{ variant }}
+              simple={simple}
+            />
+          ))
+          .value()}
         {sorted.length > max && !simple && <PropertyDialog {...props} />}
       </Flex>
     </>
   );
 }
+
+function isPrimitive(v: any): boolean {
+  return isString(v) || isNumber(v);
+}
diff --git a/client/src/components/inspector/SelectionMenu.tsx b/client/src/components/inspector/SelectionMenu.tsx
@@ -27,6 +27,7 @@ export type SelectionMenuEntry = {
   primary?: ReactNode;
   secondary?: ReactNode;
   icon?: ReactNode;
+  extras?: ReactNode;
 };
 
 type SelectionMenuSection = {
@@ -75,35 +76,54 @@ export function SelectionMenu({ selection, onClose }: Props) {
                       {chain(items)
                         .entries()
                         .sortBy(([, v]) => v.index)
-                        .map(([k, { action, icon, primary, secondary }]) =>
-                          action ? (
-                            <MenuItem
-                              key={k}
-                              onClick={() => {
-                                action();
-                                onClose?.();
-                              }}
-                            >
-                              {icon && <ListItemIcon>{icon}</ListItemIcon>}
-                              <ListItemText primary={primary} sx={{ mr: 4 }} />
-                              <Typography
-                                variant="body2"
-                                color="text.secondary"
-                              >
-                                {secondary}
-                              </Typography>
-                            </MenuItem>
-                          ) : (
-                            <ListItem key={k}>
-                              {icon && <ListItemIcon>{icon}</ListItemIcon>}
-                              <ListItemText primary={primary} sx={{ mr: 4 }} />
-                              <Typography
-                                variant="body2"
-                                color="text.secondary"
-                              >
-                                {secondary}
-                              </Typography>
-                            </ListItem>
+                        .map(
+                          ([
+                            k,
+                            { action, icon, primary, secondary, extras },
+                          ]) => (
+                            <>
+                              {!!(action || primary || secondary) &&
+                                (action ? (
+                                  <MenuItem
+                                    key={k}
+                                    onClick={() => {
+                                      action?.();
+                                      onClose?.();
+                                    }}
+                                  >
+                                    {icon && (
+                                      <ListItemIcon>{icon}</ListItemIcon>
+                                    )}
+                                    <ListItemText
+                                      primary={primary}
+                                      sx={{ mr: 4 }}
+                                    />
+                                    <Typography
+                                      variant="body2"
+                                      color="text.secondary"
+                                    >
+                                      {secondary}
+                                    </Typography>
+                                  </MenuItem>
+                                ) : (
+                                  <ListItem key={k}>
+                                    {icon && (
+                                      <ListItemIcon>{icon}</ListItemIcon>
+                                    )}
+                                    <ListItemText
+                                      primary={primary}
+                                      sx={{ mr: 4 }}
+                                    />
+                                    <Typography
+                                      variant="body2"
+                                      color="text.secondary"
+                                    >
+                                      {secondary}
+                                    </Typography>
+                                  </ListItem>
+                                ))}
+                              {!!extras && extras}
+                            </>
                           )
                         )
                         .value()}

diff --git a/client/src/components/renderer/parser/parseTraceSlave.worker.ts b/client/src/components/renderer/parser/parseTraceSlave.worker.ts
@@ -34,7 +34,7 @@ function parse({
     (component: CompiledComponent<string, Record<string, any>>) => {
       return {
         component,
-        meta: { source: "trace", step, info: component.$info },
+        meta: { source: "trace", step: from + step, info: component.$info },
       };
     };
 
@@ -64,7 +64,7 @@ function parse({
       return { persistent, transient };
     })
     .map((c) => mapValues(c, (b) => b.filter(isVisible)))
-    .map((c, i) => mapValues(c, (b) => b.map(makeEntryIteratee(from + i))))
+    .map((c, i) => mapValues(c, (b) => b.map(makeEntryIteratee(i))))
     .value();
   return {
     stepsPersistent: map(steps, (c) => c.persistent),

diff --git a/client/src/layers/trace/index.tsx b/client/src/layers/trace/index.tsx
@@ -1,5 +1,16 @@
-import { ArrowOutwardRounded, RouteTwoTone } from "@mui/icons-material";
-import { Box, Typography, useTheme } from "@mui/material";
+import {
+  ArrowOutwardRounded,
+  DataObjectOutlined,
+  RouteTwoTone,
+} from "@mui/icons-material";
+import {
+  Box,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import { TracePicker } from "components/app-bar/Input";
 import {
   PlaybackLayerData,
@@ -10,7 +21,10 @@ import {
   isTraceFormat,
   readUploadedTrace,
 } from "components/app-bar/upload";
-import { PropertyList } from "components/inspector/PropertyList";
+import {
+  PropertyDialog,
+  PropertyList,
+} from "components/inspector/PropertyList";
 import { Heading, Option } from "components/layer-editor/Option";
 import { TracePreview } from "components/layer-editor/TracePreview";
 import { LazyNodeList, NodeList } from "components/renderer/NodeList";
@@ -322,11 +336,31 @@ export const controller = {
               items: {
                 properties: {
                   index: -2,
-                  primary: <PropertyList event={event} vertical />,
+                  primary: (
+                    <PropertyList event={event} vertical simple primitives />
+                  ),
+                },
+                propertiesDetails: {
+                  index: -1,
+                  extras: (
+                    <PropertyDialog
+                      {...{ event }}
+                      trigger={(onClick) => (
+                        <MenuItem {...{ onClick }}>
+                          <ListItemIcon>
+                            <DataObjectOutlined />
+                          </ListItemIcon>
+                          <ListItemText>See properties</ListItemText>
+                          <Typography variant="body2" color="text.secondary">
+                            Step {step}
+                          </Typography>
+                        </MenuItem>
+                      )}
+                    />
+                  ),
                 },
-
                 [`${event}`]: {
-                  primary: `Go to Step ${step}`,
+                  primary: `Go to step ${step}`,
                   secondary: `${startCase(event.type)}`,
                   action: () =>
                     setLayer(

diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
@@ -1,7 +1,7 @@
 import {
   BugReportOutlined as DebuggerIcon,
   LayersOutlined as LayersIcon,
-  ListOutlined as LogsIcon,
+  CodeOutlined as LogsIcon,
   RocketLaunchOutlined as RocketIcon,
   SettingsOutlined as SettingsIcon,
   SegmentOutlined as StepsIcon,
@@ -24,7 +24,7 @@ export const pages: Dictionary<PageMeta> = {
     id: "explore",
     name: "Explore",
     color: "pink",
-    description: "Browse a library of examples and guides",
+    description: "Browse examples and guides",
     icon: <RocketIcon />,
     content: ExplorePage,
     allowFullscreen: true,

diff --git a/client/src/public/manifest.json b/client/src/public/manifest.json
@@ -3,7 +3,7 @@
   "name": "Visualiser",
   "version": "1.2.0",
   "description": "Visualise pathfinding search and more",
-  "version_name": "1.2.0; early March 2024",
+  "version_name": "1.2.0-1; late March 2024",
   "repository": "https://github.com/path-visualiser/app",
   "docs": "https://github.com/path-visualiser/app/blob/master/docs",
   "homepage": "https://path-visualiser.github.io/",