/state and /history pages #1

imaitland · 2024-08-21T16:43:06Z

Adds vial state overview view:

Adds charts for hardware history, filterable by vial and hardware property.

imaitland · 2024-08-21T16:43:59Z

app/components/EditJson.client.tsx

@@ -1,6 +1,5 @@
 import { useRouteLoaderData } from "@remix-run/react";
 import clsx from "clsx";
-import Ajv from "ajv";


Ripped out AJV. Not going to do much / any client side validation as long as the Evolver-NG continues to respond with sane validation error messaging.

imaitland · 2024-08-21T16:45:22Z

app/__tests__/unit/root.test.tsx

@@ -1,6 +1,6 @@
 import { expect, describe, it } from "vitest";
 import { loader, action } from "~/root";
-import { prefs } from "~/prefs-cookie";
+import { userPrefs } from "~/cookies.server";


More descriptive naming of the purpose of this cookie (reight now it persists their selected theme between page refresh / visits), .server tells remix framework this code will only run on the server.

imaitland · 2024-08-21T16:46:02Z

app/components/ErrorNotifs.tsx

not going to hand role notifications, using react-toastify package instead.

imaitland · 2024-08-21T16:46:59Z

app/components/EvolverTree.tsx

@@ -0,0 +1,72 @@
+import {


Stub for an experiment in having a file-tree representation of the Evolver config. Not being used anywhere. happy to delete if YAGNI proponents amongst us.

imaitland · 2024-08-21T16:47:36Z

app/components/Navbar.tsx

@@ -4,11 +4,11 @@ import clsx from "clsx";



just style tweaks in this file.

amitschang

Looks good, just a few comments, let me know what you think

amitschang · 2024-08-22T17:16:50Z

app/routes/devices.$ip_addr.state.tsx

+  const { evolverState } = useLoaderData<typeof loader>();
+  return (
+    <div>
+      <VialGrid stateData={evolverState.state} ip={ip_addr} />


The vialCount could technically come from the evolver config, do you have access to such via global state or something?

For complete context, goal is to have a view of the evolver with active vial slots, displayed in their index positions relative to inactive slots.

Right now I cant use the config to infer, vialCount, or the general layout, irl of the vials. For example - for an evolver with hardware running on vials 0,2, all i can figure out from the config is that there are 2 vials, and possibly a "slot" at index 1, that's empty.

What i'd like to do is represent all slots on a grid that matches the hardware layout. To do this the config would have to include some properties it doesn't currently have, at a minimum a "max_index", or even better x,y dimensions from the grid.

At present, the config does contain something that is meant to give the overall physical setup, but it is presently just a flat list of vial numbers. So in your above case, if that list was [0,1,2] then you could know index 1 was empty, but if it was [0,2] you could conclude it just doesn't exist. This is vials property at root level of config. But yeah, it would lack information about the physical location on the box. For that we would need some other structures or a way to represent null slots, something like

[[0, None, None, None], [None, 1, None, None], ...

When someone is looking in the ui at data for vial identified as "vial 5", by the config response. We must have some way for them to know that it's the vial on the second row, in the second position, that's what the 5 refers to.

[ [0,1,2,3], [4,5 <- this one ,6,7], [8,9,10,11], [12,13,14,15] ]

right now the vials top level property for the evolver in your office is:

[0,5,10,15]

Which is not enough info to make the required association. Must have max_index and dimensions.

All that to say - yeah - 2d array makes sense to me. Just in case it's not a typo, in your example, replace the 1 with 5:

[[0, None, None, None], [None, 5, None, None], ...

I can see this needs more in the back to support the front better and some decisions to make there, so I think what you have works for now, I've created ssec-jhu/evolver-ng#153 to track this.

yeah makes sense. I can definitely lift the 16 default into a global variable to encapsulate it. If I come across similar things I'll also hoist them - altogether to make sure it's clear the front end is making assumptions about the state of the world outside of what the ng service is describing.

amitschang · 2024-08-22T17:19:47Z

app/routes/devices.$ip_addr.tsx

+export async function loader({ params }: LoaderFunctionArgs) {
+  const { ip_addr } = params;
+  const evolverClient = createClient({
+    baseUrl: `http://${ip_addr}:${ENV.DEFAULT_DEVICE_PORT}`,


I read this as the device identifier is ip_addr, but wondering if this might be rather {ip_addr}:{port}, since the port served by another device could be different from the default.

yeah that's a good point, or a hash of ip, port and the name... Ultimately it's the name of the evolver not really its address that matters. Later evolvers could be at urls too. I'll have a think about refactoring this.

cool - can do in a separate issue, of course

amitschang · 2024-08-22T17:23:10Z

app/sessions.ts

+      path: "/",
+      sameSite: "lax",
+      secrets: ["s3cret1"],
+      secure: true,


is this right? I suspect most of the time we will not have a secure connection since it will be local-only network access.

interesting, this wasn't a problem during dev, looks like the clients (browsers) treat localhost as a special case:

https://stackoverflow.com/questions/65006250/secure-cookie-on-http-localhost

I think this'll be ok for now. If this is ever hosted as web app it's unlikely it will be without SSL

amitschang · 2024-08-22T17:27:58Z

app/utils/getSensorProperty.ts

+      if (forVials.length === 0) {
+        vialValues.set(key, values[key][targetProperty]);
+      }
+      // only show the vials in forVials
+      else if (forVials.includes(key)) {
+        vialValues.set(key, values[key][targetProperty]);
+      }


maybe combine the conditions? if (forVials.length === 0 || forVials.includes(key)) {...

yeah good idea, I'll also revise some of this stuff to use the new history api features you've included.

amitschang

Looks good, I just have a few comments inline, thanks!

amitschang · 2024-08-29T15:41:28Z

app/components/VialGrid.tsx

+              let renderSubKey = true;
+              switch (subKey) {
+                case "vial":
+                case "name":
+                  renderSubKey = false;
+                  break;
+
+                default:
+                  break;
+              }


could this be simplified to:

let renderSubKey = !["vial", "name"].includes(subKey)

and possibly even store a global constant for the exclusions list.

yep adding it as a global.

amitschang · 2024-08-29T15:52:53Z

app/routes/devices.$id.config.tsx

+};
+
+const UpdateDeviceIntentEnum = z.enum(["update_evolver"], {
+  required_error: "an intent is required",


Could you maybe add a comment on what intent is in this case? maybe also a little description of the workflow of this in a comment up here?

Added a comment. for completeness, this article describes the pattern here:

https://sergiodxa.com/articles/multiple-forms-per-route-in-remix

amitschang · 2024-08-29T15:56:43Z

app/routes/devices.$id.config.tsx

+        }
+        return redirect(`/devices/${id}/config?mode=view`);
+      } catch (error) {
+        return submission.reply({ formErrors: ["unable to update device"] });


I think when we get here its not because of json errors since that'll return above, so at this point something unexpected happened and it would probably be useful to have the http error code and any text that came with it in the error message.

Ok will do.

amitschang · 2024-08-29T16:22:43Z

app/routes/devices.$id.controllers.tsx

+
+  return (
+    <div>
+      <HardwareTable


Is this right to be HardwareTable?

yeah copy-pasta this is just a stub, no controller response available just yet. Will remove.

amitschang · 2024-08-29T16:25:18Z

app/routes/devices.$id.controllers.tsx

+  breadcrumb: ({
+    params,
+  }: {
+    params: { id: string; hardware_name: string };


maybe hardware_name is not right here?

Yeah will remove that param isn't in the path and isn't used in the breadcrumb.

amitschang · 2024-08-29T16:38:03Z

app/utils/handleFileUpload.ts

@@ -0,0 +1,20 @@
+import { EvolverConfigWithoutDefaults } from "client";


handleFileUpload sounds maybe too generic. Might change to handleEvolverConfigFileUpload or the like

i made this more generic, ht "evolver config" is now a generic type on the fileUpload helper.

import React from "react"; export function handleFileUpload<T>({ e, setData, }: { e: React.ChangeEvent<HTMLInputElement>; setData: React.Dispatch<React.SetStateAction<T>>; }) { const fileReader = new FileReader(); if (e.target.files?.[0]) { fileReader.readAsText(e.target.files[0], "UTF-8"); fileReader.onload = (event) => { const uploadedConfig = JSON.parse(event.target?.result as string); setData(uploadedConfig); }; } }

amitschang

Nice, thanks!!

imaitland added 13 commits August 6, 2024 11:47

session secret not needed

26ed331

fix package.json

8d8d3c7

json download and upload

351dd71

add breadcrumbs

be6101b

working needs testing

5c657b1

fix

653325e

init charts

571c1fd

add chart

767ef97

flexible charting

d66db84

refactor some things

ea63719

wip

d11f1ad

state display

20facb6

theme tweaks

8ec6b02

imaitland requested review from jamienoss and amitschang August 21, 2024 16:43

imaitland commented Aug 21, 2024

View reviewed changes

app/components/ErrorNotifs.tsx Outdated

Copy link

Collaborator Author

imaitland Aug 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not going to hand role notifications, using react-toastify package instead.

imaitland commented Aug 21, 2024

View reviewed changes

app/components/Navbar.tsx

@@ -4,11 +4,11 @@ import clsx from "clsx";

Copy link

Collaborator Author

imaitland Aug 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just style tweaks in this file.

imaitland added 3 commits August 21, 2024 14:29

/state and /history pages

130dd99

tidyup

4120f1f

remove session secret

4b675fc

amitschang reviewed Aug 22, 2024

View reviewed changes

imaitland added 2 commits August 26, 2024 14:57

refactor to device id, not ip address

bb6901b

misc refactor

5be7e7a

imaitland force-pushed the iainland/errors-and-schemas branch from afc2b9d to 5be7e7a Compare August 26, 2024 19:16

imaitland added 3 commits August 27, 2024 15:33

stable refactor

9d40aeb

more refactoring

963619d

lowercase

cc1d0a9

imaitland added 5 commits August 29, 2024 10:34

fix lint errors

73366a2

remove todos

d589af7

fix audit

3d37987

remove unused component

a803331

basic types

460c1c1

imaitland requested a review from amitschang August 29, 2024 15:13

amitschang reviewed Aug 29, 2024

View reviewed changes

respond to comments

a3a87ae

imaitland requested a review from amitschang August 29, 2024 17:48

run lint

9c45f6b

imaitland removed the request for review from jamienoss August 30, 2024 15:17

amitschang approved these changes Aug 30, 2024

View reviewed changes

imaitland merged commit 0db0b3d into main Aug 30, 2024
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

/state and /history pages #1

/state and /history pages #1

imaitland commented Aug 21, 2024

imaitland Aug 21, 2024

imaitland Aug 21, 2024

imaitland Aug 21, 2024

imaitland Aug 21, 2024

imaitland Aug 21, 2024

amitschang left a comment

amitschang Aug 22, 2024

imaitland Aug 22, 2024

amitschang Aug 22, 2024

imaitland Aug 22, 2024

amitschang Aug 22, 2024 •

edited

Loading

imaitland Aug 22, 2024

amitschang Aug 22, 2024

imaitland Aug 22, 2024

amitschang Aug 22, 2024

amitschang Aug 22, 2024

imaitland Aug 22, 2024

amitschang Aug 22, 2024

imaitland Aug 22, 2024

amitschang left a comment

amitschang Aug 29, 2024

imaitland Aug 29, 2024

amitschang Aug 29, 2024

imaitland Aug 29, 2024

amitschang Aug 29, 2024

imaitland Aug 29, 2024

amitschang Aug 29, 2024

imaitland Aug 29, 2024

amitschang Aug 29, 2024

imaitland Aug 29, 2024

amitschang Aug 29, 2024

imaitland Aug 29, 2024

imaitland Aug 29, 2024

amitschang left a comment

		@@ -0,0 +1,20 @@
		import { EvolverConfigWithoutDefaults } from "client";

/state and /history pages #1

/state and /history pages #1

Conversation

imaitland commented Aug 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amitschang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amitschang Aug 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amitschang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amitschang left a comment

Choose a reason for hiding this comment

amitschang Aug 22, 2024 •

edited

Loading