ccnmtl/3demos

Drew Youngren's 3D Calculus Visualizations

3demos's Issues

CSS Refactor

CSS appears to be scattered through the various svelte source files.

Let's re-organize this with some central structure to be more understandable.

1. Move common CSS styles out into a single file, e.g. media/css/main.css
2. Reduce the amount of custom CSS needed in the svelte source files

Object data merging on delete

I've noticed odd bugs in the Vector and Space Curve. This happens in production as well, both in and out of a room.

1. The object itself is deleted, but the parameters of every object in the list above the deleted object are shifted up one to the above list entry, but the original colors of that list remain the same.
2. Even though the parameters have been modified the object does not change. Even when you modify a parameter only that one parameter is affected.
3. The delete animation looks like the delete is happening at the top of the list. This might hint at the behavior of the bug. Maybe the first list element is deleted along with their parameter data, and so the rest of the list is preserved? But the colors are unaffected for some reason. In which case the object is properly deleted and it is just the list items that are screwy.

This requires some investigating. Here a third vector was deleted and now these two vectors don't correspond to their objects, but notably the red vector params match the state of the blue vector

Formatting

If possible, could one of you add a .prettierrc or .editorconfig with the CTL house style? I realize (finally) my prettier settings at home are making commits a mess.

Address room ID collision issue

Currently, the "Make Room" procedure can overwrite existing rooms - the room ID is generated at random. Let's make sure the room is empty before using that ID for a new room.

Which begs the question - when and how are rooms made empty? The policy itself is very flexible - e.g. after a day or so of inactivity we can clean up room data. But how exactly will this happen on the technical side: a cron job? A celery task? Obviously, let's keep things as simple as possible.

ParaSurf: xyz/uv values for normal vector

Parametric surface needs some work in order to render the tangent plane and normal vector. Specifically some sort of conversion between the uv values and the xyz values. Threejs raycaster objects do have uv properties so this might not be too bad.

Polling: prevent empty response

Right now, empty responses are allowed:

Speed up rollup build

The rollup build (i.e. npm run dev) takes about 20 seconds to compile on my system, in development mode. This is fine for a production build, but annoying when making small changes and you want quick feedback. I'd like to see if we can speed this up.

Flip Panel tab navigation

There is more to do accessibility wise. I found a glaring issue with the “Flip Panel” functionality:

All elements are rendered in the order of their renderings in the Svelte apps. This does not change when they are hidden and they are not skipped over. Therefore to navigate to the object list you HAVE to tab through whatever chapter is open at the time. Hidden elements should not draw focus unless the element is supplemental to help with accessibility features.

Space Curves publish overwrite not working

If you publish a Space Curve, then delete it, create a new one, modify it (make sure to change the color), and publish the published curve remains the same, except the color changes.

I'm wondering if this happens for the same reason that issue #385 is happening?

Implement "Load poll" function

Allow ability to upload a poll in JSON or CSV format

Set up auto deployment with GitHub Pages

https://github.com/marketplace/actions/github-pages-action

Accessibility - buttons

Every clickable element should either be a <button> tag, or at least have role="button" specified on it.

Investigate host permission on Make Room

I noticed that sometimes creating a new room does not set the user as host. I will try to reproduce this and see when it does and does not fail.

Polling: Host should never be asked the poll question

As host, if I broadcast a poll, then refresh, I'm shown the poll prompt:

Level Surface: add input validation

Looks like there is some missing input validation in the Level Surface:

Integration objects persist after deletion of parent object

The boxes that are generated to display the integration of objects (for those objects that have working Integrate switches) are no destroyed when their parent object is deleted. They are orphaned and inaccessible. Even the Clear Objects button does not remove them.

Define data model for scene

We need a data model to allow for import/export of arbitrary scenes, as well as sharing a scene out to students.

All mathjs inputs: don't crash scene on parsing fail

e.g., put an unrelated variable like h in an expression. This shouldn't crash the scene.

Implement Object Select feature

Implement an object select to specify which object should be affected by hotkey manipulation, including shifting selection up and down the object list with the keyboard for accessibility purposes. As it stands using a hotkey will affect all objects in the scene at once.

Fix random box position shared state bug

When sharing a session between an instructor and student, the randomly generated box should have a common, shared, random position.

OrbitControls: remove key events when we don't need to listen for them

Three.js v150 introduced OrbitControls.stopListenToKeyEvents(), which we can use: https://github.com/mrdoob/three.js/releases/tag/r150

Document keyboard shortcuts

levelWorker is slow

Drawing level sets takes way too long, on the order of seconds.

The culprit is likely makeTraces in levelWorker.js that it calls marchingSquares for every curve along each dimension, redundantly evaluating the function many times.

Implement object selection in scene

See hover implementation here:

• https://github.com/ccnmtl/astro-simulations/blob/master/sun-motion-simulator/src/CelestialSphere.jsx#L926
• https://discourse.threejs.org/t/finding-nearest-vertex-of-a-mesh-to-mouse-cursor/4167/1

Tutorial Documentation

Provide documentation for new users regarding mouse and keyboard controls, the site structure, submitting forms, making/editing polls, etc.

Look into scene being rendered multiple times on change

LaTeX accessibility

How can we make our math markup as accessible as possible? https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/math_role

Automate JS build

Right now the process is to commit compiled code into media/mathplayground/build to update the JS build. This is a basic process I put together years ago and haven't changed since. Is it time to finally sort out a way to reliably automate this via jenkins?

Add basic chat functionality in rooms

Simple UI. I'm thinking counter-strike classic console style.

To start, the chats would primarily happen from the students to the host.

Custom colors for objects

Working on color selection for individual options as a means of differentiating different instances of the same object type. Working on branch vector-color

FXAA shader reduces FPS when scrolling around view

The FXAA anti-aliasing shader pass I've added makes the edges of the objects a little smoother, but it also noticeably reduces responsiveness when scrolling the camera around the scene.

At this point I actually prefer the jagged lines scene I get when commenting out the shader pass, because the camera interaction is so much smoother. But, it may be possible to tweak things here and get the best of both worlds with some further configuration.

Numerical input poll: allow for math.js parsed input

Currently, this is an <input type="number">

Add Hotkey functions to all objects

Only Graph and Level Surface objects currently have hotkey implementations.

Session mode: Display number of students in the room

Tracking the build folder

Can we gitignore the build folder in media/mathplayground?

`el` element in PollResponses is undefined

Using the X button in the Poll module causes the el element to be lost. Trying to open a new poll will crash Javascript in browser

Implement "Load scene" function

Allow ability to upload a scene in JSON or CSV format

Update svelte

The svelte update is being held back by some accessibility checks, see: https://github.com/ccnmtl/mathplayground/actions/runs/3440572455/jobs/5739193274

It would be good to address these so we can stay on the latest version of svelte.

It's possible to put in special comments to ignore these errors, but we probably want to address these more directly - accessibility is one of our goals here after all.

Save/Load scene state in room

These are some general thoughts on the technical architecture of how we're going to handle shared scene state.

I'm realizing there's a new use case I want to handle that's not covered by the current websockets setup:

1. I enter a room and make an object on the graph
2. A different user enters the room after the new object is made

In this case, the second user didn't receive the websocket event, because they weren't on the page. Would it be crazy to store this state in a simple key-value store (Redis), somehow? Possibly. I mean, it could be a fine alternative to a database in this scenario as the ephemeral nature of the scene is fine: we are planning import/export functionality via csv.

We are using Redis for two things already in mathplayground:

• WebSockets channels communication
• Session storage

From my understanding, session storage is pretty much tied to a single user's client. It's a useful way to store data to a unique, anonymous user's client. I don't think it would really make sense to "share" session state between two different users... though the session mechanism may also prove useful here, somehow.

All mathjs inputs: fail gracefully on invalid expression

Show user error like red input field

integrate levelWorker.js into main rollup bundle

This code currently relies on the mathjs library bundled in public/math.js, out of package.json's purview. Let's integrate this better with the rest of the project.

Host socket connection can fail intermittently

Even with a single client connected, this can happen intermittently on production:

Implement "active" object in scene, and ability to cycle through active objects via keyboard

"Chat socket closed unexpectedly"

Chat socket closed unexpectedly this error keeps popping up on Firefox specifically, but looking at the django logs you can see that CONNECT is firing twice when a user makes or enters a room. Need to investigate. Nik suggests looking into the django-channels discussion boards. Look into async functions, race conditions, and possibly locks.

Make Room button unresponsive

I'm seeing this error that we've seen before on production - it's possible for the Make Room button to be unresponsive. The error is intermittent and not always easy to reproduce.

No JS console error, but there are new WebSockets connection attempts in the Network tab each time Make Room is clicked:

In the mean time, it looks like the way to work around this is make a new browser session - i.e. close and restart browser, or use private tab.

Let's re-visit the makeRoom procedure here: https://github.com/ccnmtl/mathplayground/blob/main/media/src/modes/Session.svelte#L23

At the very least, let's display when there are errors. Ideally, let's handle this setHost method a different way. As I've discussed with Evan, the way it's currently set up is kind of awkward:

1. On make room, create a websocket. Use this websocket to set session host data in redis, so the system knows we're the host.
2. Navigate to new room URL. A new websocket is created in this new window.

There's no real reason we need a WebSocket to tell the system that we're the host. It was just the simplest way I could set a value in redis, as all the infrastructure is already set up. There may be another way we can set this, or otherwise infer that the new user is the host from the back-end.

Weird low-res three.js display when joining a room that happens to be animating

Tested on animating space curve. I've seen this bug a while ago too, so it wasn't a recent change that caused this. Worth looking into.

To reproduce:

• As the host of a room, make a space curve, animate it, and publish.
• Join the room in private tab as student.

The display is fixed on the student side if the host removes the objects and publishes again.

Camera Reset not working

You might be mistaken in thinking that the button does nothing at all, but if you bring the camera close to the grid plan then you'll see that the camera does shift slightly with every click. This is different behavior from the buttons that currently do nothing. You can hold the mouse as still as possible, but clicking on the Camera Reset will still cause the camera to move.

Polls: implement validation to require a response for submission

Canvas focus

I'm getting an effect in recent builds where from the object list , when the "shade" is raised or lowered, it takes and extra click for the controls of the scene to respond, like it takes a click to "focus" on the canvas element. In limited testing, it doesn't seem to happen with the Chapters info box visible (raising or lowering takes no extra click), and doesn't seem to happen in older builds (I tried 26426df, at random).

Refresh deletes unpublished changes

The way that a host connects to the room is the same as anyone else, which means that any adjustments made to the room that haven't been published are not preserved on refresh.

I think expected behavior for the local object list of every user would be to preserve on refresh, but overwrite all user lists in the room on publish. Thoughts?