Update tree view

client/src/components/generic/Property.tsx

@@ -29,7 +29,7 @@ export function renderProperty(obj: any, simple: boolean = false) {
           .toExponential(2)
           .split("e")
           .map((item) => +item);
-        return Math.abs(exp) > 4 ? (
+        return exp < -2 || exp > 4 ? (
           <span>
             {coefficient}x10<sup style={supProps}>{exp}</sup>
           </span>

client/src/components/renderer/colors.tsx

@@ -1,4 +1,11 @@
-import { mapValues } from "lodash";
+import {
+  Dictionary,
+  entries,
+  lowerCase,
+  mapValues,
+  thru,
+  values,
+} from "lodash";
 import { EventTypeColors } from "protocol";
 import { TraceEventType } from "protocol/Trace";
 import {
@@ -11,13 +18,48 @@ import {
   red,
   amber,
 } from "@mui/material/colors";
+import { accentColors } from "theme";
+import md5 from "md5";
+
+function hash(str: string) {
+  var hash = 5381,
+    i = str.length;
 
-const tint = "500";
+  while (i) {
+    hash = (hash * 33) ^ str.charCodeAt(--i);
+  }
+
+  /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
+   * integers. Since we want the results to be always positive, convert the
+   * signed int to an unsigned by doing an unsigned bitshift. */
+  return hash >>> 0;
+}
+
+export const tint = "500";
 
 export function hex(h: string) {
   return parseInt(h.replace("#", "0x"));
 }
 
+export const searchEventAliases = thru(
+  {
+    source: ["source", "start"],
+    destination: ["destination", "goal", "finish"],
+    updating: ["update", "updating"],
+    expanding: ["expanding", "expanding"],
+    generating: ["generate", "generating", "open", "opening"],
+    closing: ["close", "closing"],
+    end: ["finish", "end"],
+  },
+  (dict) => {
+    const out: Dictionary<string> = {};
+    for (const [k, v] of entries(dict)) {
+      for (const v1 of v) out[v1] = k;
+    }
+    return out;
+  }
+);
+
 export const colorsHex: EventTypeColors = {
   source: green["A400"],
   destination: red["A400"],
@@ -34,12 +76,18 @@ export const colors: { [K in TraceEventType]: number } = mapValues(
 );
 
 export function getColor(key?: TraceEventType) {
-  return (key && colors[key]) || hex(orange[tint]);
+  return hex(getColorHex(key));
 }
 
-export function getColorHex(
-  key?: TraceEventType,
-  fallback: string = grey[tint]
-) {
-  return (key && colorsHex[key]) ?? fallback;
+export function getColorHex(key: TraceEventType = "", fallback?: string) {
+  const builtIn = searchEventAliases[lowerCase(key)];
+  if (builtIn) {
+    return colorsHex[key];
+  } else if (fallback) {
+    return fallback;
+  } else {
+    const n = hash(lowerCase(key));
+    const colors = values(accentColors);
+    return colors[n % colors.length][tint];
+  }
 }

client/src/pages/StepsPage.tsx

@@ -22,7 +22,7 @@ import {
 import { EventInspector, Skeleton } from "components/inspector/EventInspector";
 import { Placeholder } from "components/inspector/Placeholder";
 import { useViewTreeContext } from "components/inspector/ViewTree";
-import { getColorHex } from "components/renderer/colors";
+import { getColorHex, tint } from "components/renderer/colors";
 import { useBreakpoints } from "hooks/useBreakpoints";
 import { usePlaybackState } from "hooks/usePlaybackState";
 import { inferLayerName } from "layers/inferLayerName";
@@ -42,6 +42,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Layer, useLayer } from "slices/layers";
 import { useAcrylic, usePaper } from "theme";
 import { PageContentProps } from "./PageMeta";
+import { grey } from "@mui/material/colors";
 
 function lerp(start: number, end: number, amount: number): number {
   return start + clamp(amount, 0, 1) * (end - start);
@@ -320,7 +321,12 @@ export function StepsPage({ template: Page }: PageContentProps) {
         <FeaturePicker
           icon={
             <FiberManualRecordOutlined
-              sx={{ color: getColorHex(selectedType) }}
+              sx={{
+                color:
+                  selectedType === SYMBOL_ALL || !selectedType
+                    ? grey[tint]
+                    : getColorHex(selectedType),
+              }}
             />
           }
           label="Event Type"