Comments (22)
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.
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:
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.
Related Issues (20)
- Use with jupyter kernel
- Unable to run debug visualizer HOT 4
- data extractor help HOT 2
- Failed to visualize with Swift Demo,= ~~~
- Can you support idea plugIn
- CPP does not wqork HOT 1
- Missing support for "gdb" debug adapter
- https://github.com/hediet/vscode-debug-visualizer
- Visualization in python
- Publish `Debug Visualizer` to Open VSX
- Overcome python debug adapter's string truncation limit HOT 10
- Please create and example in C
- Is not working for dart language
- No able to run Debug visualizer
- `yarn build` fails on most recent commit HOT 2
- C# debugger has a very low (1024 chars) JSON length limit HOT 12
- Unable to show geometries data HOT 2
- Short choice of visualisers HOT 6
- How do you visualize an array as like a literal table, rather than a graph? HOT 1
- Version bump
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vscode-debug-visualizer.