Turfjs / Turfjs/turf

Faciliating Debug Visualizations

Open
#3,013 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
10.5k
Forks
1k
Avg merge
1h 11m
Merged PRs (30d)
4

Description

@mfedderly and @smallsaucepan you've mentioned a couple of times that it would be useful to have some better debug visualization tooling. I felt the same thing and have started banging out an MVP of something that might help.

What I had in mind was the following:

  1. A hook script that can be --imported into anything run with tsx (and compiled to be imported in node). The hook script:
    • Provides the entire turf library and a DebugViz global with some convenient functions to exfiltrate debug data.
    • Can be referenced either from the file under test or the console in a debugger.
    • Completely synchronous, so doesn't have to wait for next tick in the debugger to send a message
  2. A super basic web socket relay server that forwards messages from the hook script to the front end.
  3. A mapbox-driven visualizer front-end that receives messages from the hook that contain geojson data and displays them, with some ability to play around with the map.

The main functions to get data out of the system under test would be:

  • DebugViz.send(geojson: GeoJSON, label?: string)
  • DebugViz.diff(geojson1: GeoJSON, geojson2: GeoJSON, label?: string)

Then the front end would have some different view options including a diff mode to see the GeoJSON.

Workflow would be:

  • Start the server
  • If desired can put a /// <reference... in the file you are playing with to get typing on the hook
  • Add debug viz statements into the test (e.g., DebugViz.diff(result, expectedOutput).
  • Run a test with the hook (this is what I've been doing): npx tsx --import ../../../turf-debug-viz/src/debug-hook.ts test.ts
  • Explore in the visualizer
  • If doing something thorny can just send any in-scope variable from a breakpoint in the debugger, can also send reruns from different branches, etc.

Example screenshot of the very first version is below. This something you would be interested in?

Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the proposed turf-debug-viz/src/debug-hook.ts entry point and the npx tsx --import command shown in the issue. Review the described relay server and Mapbox visualizer workflow before defining scope; done would require an agreed design and a working end-to-end path from DebugViz.send or diff to the visualizer.

Written by the indexing model from the issue text.

Assessment

Tech stack
nodejs, typescript
Domain
data-visualization, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.