Various changes

ShortestPathLab · Oct 25, 2023 · 2d8a6e3 · 2d8a6e3
1 parent fcce3a1
commit 2d8a6e3
Show file tree

Hide file tree

Showing 50 changed files with 715 additions and 417 deletions.
diff --git a/adapter-warthog-wasm/src/core/templates.ts b/adapter-warthog-wasm/src/core/templates.ts
@@ -10,9 +10,9 @@ export const gridTemplate: Partial<Trace> = {
           $: "rect",
           width: 1,
           height: 1,
-          x: "{{ctx.x}}",
-          y: "{{ctx.y}}",
-          fill: "{{ctx.color[ctx.type]}}",
+          x: "{{$.event.x}}",
+          y: "{{$.event.y}}",
+          fill: "{{$.color[$.event.type]}}",
         },
       ],
     },
@@ -26,7 +26,7 @@ export const gridTemplate: Partial<Trace> = {
       },
     },
     path: {
-      pivot: { x: "{{ctx.x + 0.5}}", y: "{{ctx.y + 0.5}}" },
+      pivot: { x: "{{$.event.x + 0.5}}", y: "{{$.event.y + 0.5}}" },
       scale: 0.3,
     },
   },
@@ -39,26 +39,26 @@ export const xyTemplate: Partial<Trace> = {
       node: [
         {
           $: "circle",
-          fill: "{{ctx.color[ctx.type]}}",
+          fill: "{{$.color[$.event.type]}}",
           radius: 120,
-          x: "{{ctx.x}}",
-          y: "{{ctx.y}}",
+          x: "{{$.event.x}}",
+          y: "{{$.event.y}}",
         },
       ],
       line: [
         {
           $: "path",
           points: [
             {
-              x: "{{ctx.parent ? ctx.parent.x: ctx.x}}",
-              y: "{{ctx.parent ? ctx.parent.y: ctx.y}}",
+              x: "{{$.parent ? $.parent.x: $.event.x}}",
+              y: "{{$.parent ? $.parent.y: $.event.y}}",
             },
             {
-              x: "{{ctx.x}}",
-              y: "{{ctx.y}}",
+              x: "{{$.event.x}}",
+              y: "{{$.event.y}}",
             },
           ],
-          fill: "{{ctx.color[ctx.type]}}",
+          fill: "{{$.color[$.event.type]}}",
           lineWidth: 90,
         },
       ],
@@ -78,7 +78,7 @@ export const xyTemplate: Partial<Trace> = {
       },
     },
     path: {
-      pivot: { x: "{{ctx.x}}", y: "{{ctx.y}}" },
+      pivot: { x: "{{$.event.x}}", y: "{{$.event.y}}" },
       scale: 120,
     },
   },

diff --git a/adapter-warthog-websocket/src/core/templates.ts b/adapter-warthog-websocket/src/core/templates.ts
@@ -10,9 +10,9 @@ export const gridTemplate: Partial<Trace> = {
           $: "rect",
           width: 1,
           height: 1,
-          x: "{{ctx.x}}",
-          y: "{{ctx.y}}",
-          fill: "{{ctx.color[ctx.type]}}",
+          x: "{{$.event.x}}",
+          y: "{{$.event.y}}",
+          fill: "{{$.color[$.event.type]}}",
         },
       ],
     },
@@ -26,7 +26,7 @@ export const gridTemplate: Partial<Trace> = {
       },
     },
     path: {
-      pivot: { x: "{{ctx.x + 0.5}}", y: "{{ctx.y + 0.5}}" },
+      pivot: { x: "{{$.event.x + 0.5}}", y: "{{$.event.y + 0.5}}" },
       scale: 0.3,
     },
   },
@@ -39,26 +39,26 @@ export const xyTemplate: Partial<Trace> = {
       node: [
         {
           $: "circle",
-          fill: "{{ctx.color[ctx.type]}}",
+          fill: "{{$.color[$.event.type]}}",
           radius: 120,
-          x: "{{ctx.x}}",
-          y: "{{ctx.y}}",
+          x: "{{$.event.x}}",
+          y: "{{$.event.y}}",
         },
       ],
       line: [
         {
           $: "path",
           points: [
             {
-              x: "{{ctx.parent ? ctx.parent.x: ctx.x}}",
-              y: "{{ctx.parent ? ctx.parent.y: ctx.y}}",
+              x: "{{$.parent ? $.parent.x: $.event.x}}",
+              y: "{{$.parent ? $.parent.y: $.event.y}}",
             },
             {
-              x: "{{ctx.x}}",
-              y: "{{ctx.y}}",
+              x: "{{$.event.x}}",
+              y: "{{$.event.y}}",
             },
           ],
-          fill: "{{ctx.color[ctx.type]}}",
+          fill: "{{$.color[$.event.type]}}",
           lineWidth: 90,
         },
       ],
@@ -78,7 +78,7 @@ export const xyTemplate: Partial<Trace> = {
       },
     },
     path: {
-      pivot: { x: "{{ctx.x}}", y: "{{ctx.y}}" },
+      pivot: { x: "{{$.event.x}}", y: "{{$.event.y}}" },
       scale: 120,
     },
   },

diff --git a/client/main.js b/client/main.js
@@ -56,6 +56,7 @@ server.listen(0, () => {
       show: false,
       titleBarStyle: "hidden",
       titleBarOverlay: {
+        height: 32,
         color: "#00000000",
         symbolColor: "#00000000",
       },

diff --git a/client/src/components/Editor.tsx b/client/src/components/Editor.tsx
@@ -1,8 +1,11 @@
+import { ReactNode } from "react";
+
 export type EditorProps<T> = {
   value?: T;
   onChange?: (key: T) => void;
 };
 export type EditorSetterProps<T> = {
   value?: T;
   onChange?: (key: (value: T) => T) => void;
+  children?: ReactNode;
 };
diff --git a/client/src/components/app-bar/Input.tsx b/client/src/components/app-bar/Input.tsx
@@ -9,12 +9,14 @@ import { EditorProps } from "../Editor";
 import { FeaturePicker } from "./FeaturePicker";
 import { FeaturePickerButton } from "./FeaturePickerButton";
 import { custom as customMap, uploadMap, uploadTrace } from "./upload";
+import { LARGE_FILE_B, formatByte, useBusyState } from "slices/busy";
 
 export const mapDefaults = { start: undefined, end: undefined };
 
 export function MapPicker({ onChange, value }: EditorProps<Map>) {
   const notify = useSnackbar();
-  const usingLoadingState = useLoadingState("specimen");
+  const usingLoadingState = useLoadingState("map");
+  const usingBusyState = useBusyState("map");
   const [connections] = useConnections();
   const [{ maps, formats }] = useFeatures();
   return (
@@ -37,8 +39,17 @@ export function MapPicker({ onChange, value }: EditorProps<Map>) {
               const f = await uploadMap(formats);
               if (f) {
                 usingLoadingState(async () => {
-                  notify("Reading map...");
-                  onChange?.(await f());
+                  notify("Opening map...");
+                  const output =
+                    f.file.size > LARGE_FILE_B
+                      ? await usingBusyState(
+                          f.read,
+                          `Opening map (${formatByte(f.file.size)})`
+                        )
+                      : await f.read();
+                  if (output) {
+                    onChange?.(output);
+                  }
                 });
               }
             } catch (e) {
@@ -57,6 +68,7 @@ export function MapPicker({ onChange, value }: EditorProps<Map>) {
 export function TracePicker({ onChange, value }: EditorProps<UploadedTrace>) {
   const notify = useSnackbar();
   const usingLoadingState = useLoadingState("specimen");
+  const usingBusyState = useBusyState("specimen");
   return (
     <FeaturePickerButton
       icon={<FileOpenOutlined />}
@@ -65,10 +77,16 @@ export function TracePicker({ onChange, value }: EditorProps<UploadedTrace>) {
           const f = await uploadTrace();
           if (f)
             usingLoadingState(async () => {
-              notify("Reading trace...");
-              const g = await f();
-              if (g) {
-                onChange?.(g);
+              notify("Opening trace...");
+              const output =
+                f.file.size > LARGE_FILE_B
+                  ? await usingBusyState(
+                      f.read,
+                      `Opening trace (${formatByte(f.file.size)})`
+                    )
+                  : await f.read();
+              if (output) {
+                onChange?.(output);
               }
             });
         } catch (e) {
@@ -80,87 +98,3 @@ export function TracePicker({ onChange, value }: EditorProps<UploadedTrace>) {
     </FeaturePickerButton>
   );
 }
-
-// export function Input() {
-//   const notify = useSnackbar();
-//   const [connections] = useConnections();
-//   const [{ algorithms, maps, formats }] = useFeatures();
-//   const [{ algorithm, map, parameters }, setUIState] = useUIState();
-
-//   return (
-//     <>
-//       <FeaturePicker
-//         icon={<MapIcon />}
-//         label="Map"
-//         value={map?.id}
-//         items={[
-//           customTrace(parameters),
-//           customMap(map),
-//           ...maps.map((c) => ({
-//             ...c,
-//             description: find(connections, { url: c.source })?.name,
-//           })),
-//         ]}
-//         onChange={async (v) => {
-//           switch (v) {
-//             case customMap().id:
-//               try {
-//                 const f = await uploadMap(formats);
-//                 if (f) {
-//                   setUIState({
-//                     ...mapDefaults,
-//                     map: f,
-//                     algorithm: algorithm ?? "identity",
-//                     parameters: {},
-//                   });
-//                   notify("Solution was cleared because the map changed.");
-//                 }
-//               } catch (e) {
-//                 notify(`${e}`);
-//               }
-//               break;
-//             case customTrace().id:
-//               try {
-//                 const f2 = await uploadTrace();
-//                 if (f2) {
-//                   setUIState({
-//                     parameters: f2,
-//                     algorithm: "identity",
-//                     start: 0,
-//                     end: 0,
-//                     map: {
-//                       format: f2.format,
-//                       content: map?.format === f2.format ? map?.content : " ",
-//                       id: "internal/upload",
-//                     },
-//                   });
-//                 }
-//               } catch (e) {
-//                 notify(`${e}`);
-//               }
-//               break;
-//             default:
-//               setUIState({
-//                 ...mapDefaults,
-//                 map: find(maps, { id: v }),
-//                 parameters: {},
-//               });
-//               notify("Solution was cleared because the map changed.");
-//               break;
-//           }
-//         }}
-//       />
-//       <Space />
-// <FeaturePicker
-//   icon={<CodeIcon />}
-//   label="Algorithm"
-//   value={algorithm}
-//   items={algorithms.map((c) => ({
-//     ...c,
-//     description: find(connections, { url: c.source })?.name,
-//   }))}
-//   onChange={async (v) => setUIState({ algorithm: v, parameters: {} })}
-// />
-//     </>
-//   );
-// }