Basic Python Support about vscode-debug-visualizer HOT 22 CLOSED

That's a nice extension you have :)

In JavaScript, I have a runtime module I package using webpack, so that everything is a single file. I then evaluate the content for that file using VSCode's evaluation API. This registers some global helper functions. When visualizing an expression expr when debugging javascript, this expression is extended to something like global.hedietDebugVisualizer_getVisualization(expr).
This helper function has javascript specific logic to find the most appropriate JSON data.

It would be cool if the extension could do something similar when visualizing python expressions, but I don't know python well enough for that kind of magic.

from vscode-debug-visualizer.

@Almenon if you are interested, you could port the Data Extractors from TypeScript to Python :)

I think both our extensions could profit from each other. I imagine having all the visualizers from my extension in your repl output, that would be awesome. But also having fully featured data extractors in python so can directly visualize an array or other data structures. Are you interested?

I wonder how jupyter notebooks fit into this picture.

from vscode-debug-visualizer.

If it was a package, you could easily reuse the visualizations, e.g. in your extension.

from vscode-debug-visualizer.

Closing this as the demo demonstrates basic python support.
#34 tracks support for data extractors in python.

from vscode-debug-visualizer.

I'm having trouble with python too, although maybe I'm not using it right.

x={
    'a':5
}

When I evaluate x I get "Error: Unexpected token ' in JSON at position 0"

c = {
    'a':{
        'b':3
    }
}
a=json.dumps(c)

When I evaluate a I get "Error: Invalid Data"

h = [1,2,3,4]

When I evaluate h I get "Error: Unexpected token , in JSON at position 1"

from vscode-debug-visualizer.

import random

while(True):
    data = []
    value = 0
    for i in range(10000):
        delta = 1 if random.random() > .5 else -1
        data.append(value)
        value += delta

    print('done')

The above piece of code is a direct translation of the plotly example to python. There is a breakpoint at print('done'). Unfortunately when I try to evaluate data I get "Error: Unexpected token , in JSON at position 1"

from vscode-debug-visualizer.

Note that @hediet does say that it should work with python;

It actually should work with python ;) You just need to return Json matching the schema of one of the visualizers.

https://www.reddit.com/r/programming/comments/f88zom/i_made_an_extension_for_visual_debugging_in_vs/fik6l4w/

from vscode-debug-visualizer.

@Almenon thanks for reporting! I don't have a python environment set up, would you mind helping me out?
Can you evaluate data in the debug console and show me the output?

This extension expects an unescaped string, optionally enclosed in double quotes, representing a JSON object.

from vscode-debug-visualizer.

@hediet sure. I can also jump on a video call right now if that would be helpful.
I'm using python 3.6.4, Windows 10

https://i.imgur.com/3bDJmuN.png

from vscode-debug-visualizer.

Thanks for your help ;) I don't have a headset right now and it's pretty late, but maybe later this week?
Can you json encode data?

from vscode-debug-visualizer.

import json

x=json.dumps([1,2])
y=json.dumps({'a':5})
print(x)

Both x and y result in Error: Invalid Data

from vscode-debug-visualizer.

Ah, well, the thing is, you have to return a JSON string matching one of the visualizer schemas (but this isn't even the problem here). How does the python debugger format strings?

Only in typescript/javascript you don't have to return JSON directly, as some code is injected that does this automatically. I'm not fluent in python, so I would be very happy if someone who is can come up with a concept of how to do than in python.

from vscode-debug-visualizer.

Error: Invalid Data means that it could parse the json, but didn't understand the data. Can you port the php demo?

from vscode-debug-visualizer.

How does the python debugger format strings?

If I evaluate x and y in the console I get below:

x
'[1, 2]'
y
'{"a": 5}'

Maybe that helps?

If I print x and y I get:

[1, 2]
{"a": 5}

from vscode-debug-visualizer.

Can you try this:

x='{ "kind": { "text": true }, "text": "hello world" }';

And visualize x?

from vscode-debug-visualizer.

Only in typescript/javascript you don't have to return JSON directly, as some code is injected that does this automatically. I'm not fluent in python, so I would be very happy if someone who is can come up with a concept of how to do than in python.

I have that exact problem in my extension. You can use import json; json.dumps(obj) to encode a object into a JSON string but it fails for a lot of objects.

For a universal solution I use jsonpickle. If you use fail_safe mode it can handle almost anything you throw at it.

You can see how I use jsonpickle in my backend repo:

https://github.com/Almenon/AREPL-backend/blob/de7905f25af50f3b998253cea12bead236d4d42c/python/pickler.py#L97

from vscode-debug-visualizer.

x='{ "kind": { "text": true }, "text": "hello world" }';

it works! :D

I get hello world 🎉

from vscode-debug-visualizer.

This should then visualize a graph:

x='{ "kind": { "graph": true }, "nodes":  [{ "id": "1" }, { "id": "2" }], "edges": [{ "from": "1", "to": "2" }] }'

from vscode-debug-visualizer.

import json

# works
x = '{ "kind": { "text": true }, "text": "hello world" }'
d = json.dumps({ "kind": { "text": True }, "text": "hello world" })
e = json.dumps({ 'kind': { 'text': True }, 'text': 'hello world' })

# does not work
a = "{ 'kind': { 'text': true }, 'text': 'hello world' }"
b = { "kind": { "text": True }, "text": "hello world" }
c = { 'kind': { 'text': True }, 'text': 'hello world' }
f = "hello world"
g = json.dumps(f)

So in conclusion python does work in the extension but you have to make sure the schema matches one of the visualizers and you need to use json.dumps. @FeralRobot

from vscode-debug-visualizer.

x='{ "kind": { "graph": true }, "nodes": [{ "id": "1" }, { "id": "2" }], "edges": [{ "from": "1", "to": "2" }] }'

Cool stuff hediet! I just ported the graph PHP demo to python, I'll submit a PR.

In JavaScript, I have a runtime module I package using webpack, so that everything is a single file. I then evaluate the content for that file using VSCode's evaluation API. This registers some global helper functions. When visualizing an expression expr when debugging javascript, this expression is extended to something like global.hedietDebugVisualizer_getVisualization(expr).
This helper function has javascript specific logic to find the most appropriate JSON data.
It would be cool if the extension could do something similar when visualizing python expressions, but I don't know python well enough for that kind of magic.

For starters I would just focus on getting python working without making the user dump the var to JSON themselves. Maybe something simple like wrapping the expression with "from json import dumps;dumps(" + expr + ")". Once you got that working then you can branch outwards and start trying to identify the data structure and return the appropriate JSON structure.

@Almenon if you are interested, you could port the Data Extractors from TypeScript to Python :)
I think both our extensions could profit from each other. I imagine having all the visualizers from my extension in your repl output, that would be awesome. But also having fully featured data extractors in python so can directly visualize an array or other data structures. Are you interested?

I'm somewhat interested. I might give it a shot.

It would be nice to have visualizations in the arepl output. It's not a very high priority for me however. Jupyter already does visualizations extremely well and it would be hard for me to compete in that sector.

I wonder how jupyter notebooks fit into this picture.

Jupyter notebook is extremely popular for data science. It already has a vscode integration, but I'm not sure how good it is. Maybe someone on the python discord would have an opinion. What came to my mind when I saw your extension was not actually jupyter notebook - it was pythontutor. python tutor is quite popular. The vscode extension hasn't been updated in a long time though, so you're not facing too much competition there.

from vscode-debug-visualizer.

I'll submit a PR.

thanks man!

It would be nice to have visualizations in the arepl output. It's not a very high priority for me however. Jupyter already does visualizations extremely well and it would be hard for me to compete in that sector.

I'm thinking about moving all the visualizers I implemented (or integrated) in this extension to a seperate npm package so that it becomes very easy to integrate visualizers. Basically, it would be a react library offering visualizer infrastructure.
This visualizer infrastructure would include

• A standardized JSON data format like ExtractedData in this extension
• A mechanism to automatically find suitable visualizers
• The visualizers including their specializations of ExtractedData

In client code, using it would look like this:

import { isVisualizerData, DataVisualizer } from "@hediet/data-visualization";
// ...
const GUI = () => (
  <div>
    {isVisualizerData(data) ? <DataVisualizer data={data} /> : <div>{data}</div>}
  </div>
);

What do you think?

from vscode-debug-visualizer.

It would be nice to have a generic thing you could override for your specific language/visualization, but why have it be a package? People would have to submit a PR to your repo to change the extension, so they are able to import the files directly. Unless you eventually plan on allowing the user to import visualizations? 🤔

from vscode-debug-visualizer.