NetLogo Web Inspection Feature: Soliciting Feedback

Hello all,

After a long time developing the inspection feature for NetLogo Web, I’d like to open it up for feedback from the community. The preview is live at this link, and currently the documentation consists of a single markdown file authored by me. Please keep in mind that the feature is still very much alpha (if even that), so expect many bugs! I’d love to get feedback on the following in particular:

  • bugs, of course
  • expected but missing features
  • extraneous features
  • documentation thoroughness, accuracy, helpfulness, and style
  • intuitiveness of behavior (feedback taken prior to reading documentation is also welcome)
  • visual design suggestions

Regarding the last two points, admittedly the user interface right now lacks an actual design, and is just mean to showcase functionality. However, any general thoughts on what a good design might look like would be helpful as well.

Thanks y’all!

1 Like

Appreciated!

Hey Andre! Thank you again for all your work on this feature! I tested it out and things worked well. I was able to inspect agents, tweak variable values, and see immediate updates. I’ve got some feedback below, let me know if you need me to elaborate on anything.

Unexpected Things

When right-clicking on a widget when not in authoring mode I would see an error in the web dev console, “Uncaught TypeError: Cannot read properties of undefined (reading ‘offsetParent’)”. When in authoring mode the context menu showed up normally. I confirmed this issue doesn’t exist in production NLW, so I’m not sure if it’s a fix in master that hasn’t been integrated to this branch, or if it’s caused by the inspection changes.

I poked around, opening up a bunch of inspection windows, some by right-clicking, some by using the drag-select. I watched one of them through the UI button. I then did ask turtles [ stop-inspecting self ], ask patches [ stop-inspecting self ], ask links [ stop-inspecting self ] in the Command Center and all the targeting highlights disappered, but the inspection windows stayed open. Is this the expected behavior?

Hitting tab to complete code with the new code editor also changes the context drop in the Command Center from observer to turtles, etc. I think this was reported before, so maybe is already on the to-be-fixed list.

A Close All button to close all inspection windows would be welcome.

I tried to edit end2 of a link by typing in a turtle who number, and it rejected my edit, going back to the previous value. That’s fine, but I think any variable boxes that can’t actually be edited should show as read-only to make it clear.

I didn’t see commentary on the View Quality setting and how that affects the run speed of the model and the zoomed-in blurriness on the inspection window views. I’m not sure if we’re hoping to find a better solution here, but if we’re leaving it as-is we probably need to explain how it works.

Design / UX

A lot of my comments are more on design, I think, so maybe aren’t totally useful if a redesign is already planned. I’ll include these below, just in case.

It’s hard to get to the inspection windows (a lot of scrolling) and hard to get them visible alongside the view or the code. On a wide model I cannot get multiple inspection windows on the screen with the view side-by-side. I wish I had a good idea on how to handle inspection window positioning, but given the current layout of NetLogo Web it’s hard to think of something that’ll be easy for the user while still being flexible.

The text being selectable on a lot of the clickable elements (breeds/agent-types, targeted agents) makes them feel non-button-ish. The (X) for closing makes sense, but again doesn’t imediately seem like an interactive UI element.

It’s kind-of weird to me I can have targeted agents that are different than the agents I’m inspecting. My mental model is inspecting should be a subset of targeted.

When I right click to inspect an agent from the view, if I’ve scrolled the inspection window down a ways for another agent it doesn’t auto-scroll me to the one I just selected. I have to know it was brought in at the top and scroll back up.

The highlighting of targeted agents makes sense, but if there are a lot of agents together the glow just makes everything blurry. Maybe it just needs to be toned down a bit, or pushed to a lower z-index so the agent shapes stay visible?

In the agent inspection listing, aligning the variable inputs would make them look nicer and easier to read. A left-margin for the variable names from the edge would also help readability.

-Jeremy

1 Like

@andrechen I briefly read over this feedback. I guess after integrating the color picker into the experimental branch, we should prioritize fixing bugs. Then, with David’s new design, we can gradually deal with the UX/design feedback.