lux-org / lux-widget Goto Github PK
View Code? Open in Web Editor NEWJupyter Widget for Lux
License: Apache License 2.0
Jupyter Widget for Lux
License: Apache License 2.0
Currently, we generate Matplotlib charts as SVG images on the lux-org/lux
backend then pass them into the lux-org/lux-widget
frontend. From there, we render them as raw images. Because of this constraint, we aren't dynamically resizing the Matplotlib charts as we do for Altair (#333). Our current fix is to obtain the plotting_scale
then compute the width and height of the image (rather than letting the parent div + flexbox do the work for us).
Here are some guiding questions to get started on this issue. In either case, we would need changes in both the frontend and backend.
<Vega ... />
in Matplotlib? If so, we can use that component in the frontend and use that instead of generating an SVG.plotting_scale
from the backend similar to how scaling is accomplished for Altair charts.There is a frontend latency associated with clicking each Altair Chart. @jrdzha has looked into this in the past and found that this is due to the way re-drawing is occurring for every interaction. We should investigate how to refactor the frontend codebase to enable more reuse instead of triggering redrawing in React.
LuxWidget currently only works for Jupyter Notebooks.
To make the widget toggle button show up, we need to run:
jupyter labextension install @jupyter-widgets/jupyterlab-manager
However, even this renders the jupyter-widget button, the rest of the JS widget is not shown.
Error displaying widget: model not found
The scrolling estimate for the "Scroll more for X charts" is based on a static estimate based on a laptop-sized screen.
On my 23-inch monitor, the full width of the widget actually displays all the recommendations, so the scroll for 2 more was a bit misleading:
df = pd.read_csv("https://raw.githubusercontent.com/lux-org/lux-datasets/master/data/airbnb_nyc.csv")
df = df[
[
"id",
"name",
"host_id",
"host_name",
"neighbourhood_group",
"neighbourhood",
"latitude",
"longitude",
"room_type",
"price",
"minimum_nights",
"number_of_reviews",
]
]
df
We should modify the scroll estimate code to take into account the actual number of visualizations outside of the viewable region, so that it is adaptive to different widget widths (and screen sizes).
I am getting this-
Lux defaults to Pandas when there are no valid actions defined.
and there is no output while toggling to Lux ..
kindly advise.
C:\Users\86186> jupyter labextension install luxwidget
Building jupyterlab assets (build:prod:minimize)
\Exception in thread Thread-8:
Traceback (most recent call last):
File "D:\Anaconda3\lib\threading.py", line 932, in _bootstrap_inner
self.run()
File "D:\Anaconda3\lib\threading.py", line 870, in run
self._target(*self._args, **self._kwargs)
File "D:\Anaconda3\lib\subprocess.py", line 1366, in _readerthread
buffer.append(fh.read())
UnicodeDecodeError: 'gbk' codec can't decode byte 0xa8 in position 11747: illegal multibyte sequence
An error occured.
IndexError: list index out of range
See the log file for details: C:\Users\86186\AppData\Local\Temp\jupyterlab-debug-w838bc84.log
Currently, Lux forces the size of all the charts to be 160x150, so that the visualization cards are aligned. As a result, sometimes, the axis labels are abbreviated, bars are cut off, etc. For example:
Sometimes, it is helpful to view a visualization in more detail without the summarizations. We can add an "Open in full view" button that expands the visualization into a popup window with the full view.
Considerations:
Hello -
After a day of troubleshooting, I believe that lux-widget==0.1.6
as released on PyPi is broken for JupyterLab in its current state because it was released without this commit -> b4a479c
When I click on the Toggle Pandas/Lux
button, I get either Error displaying widget: model not found
or Loading widget...
The errors I get in my Chrome console are:
Uncaught (in promise) Error: Module luxwidget, semver range 0.1.5 is not registered as a widget module
Now, this seemed suspect that it was showing 0.1.5
when I had 0.1.6
installed (either as a dependency pulled in from lux-api==0.3.1
, or directly specifying lux-widget==0.1.6
directly.
If I edit both of the below files, change 0.1.5
to 0.1.6
, then run jupyter lab clean; jupyter lab build --no-minimize
and hard-refresh my browser, the Lux widget loads.
/opt/conda/share/jupyter/nbextensions/luxwidget/package.json
/opt/conda/lib/python3.8/site-packages/luxwidget/nbextension/package.json
It seems that these two files do not have the correct version specified, and this can also be seen in the git history at the specific tagged version for this file:
@dorisjlee - since you seem to be the main maintainer of this repo, and the one that , would you be able to either re-release version 0.1.6
to PyPi with the above change included, or perhaps version bump and mark 0.1.6
for deprecation? Perhaps there is some other option that I am not familiar with (the implementation and distribution of these extensions is out of my expertise, unfortunately) that you can think of?
Supporting lux-widget for newly-released Jupyter Lab 3
This is traced back to internal calls in backbone.js and extension.js for create_view (which is called twice), leading the JupyterWidgetView
class to be initialized twice.
export class JupyterWidgetView extends DOMWidgetView {
initialize(){
....
ReactDOM.render(App,$app);
view.el.append($app);
}
It is unclear if this is an issue with the ipywidget internal or something different we have to do in our JupyterWidgetView react class (perhaps wrapping it in something other than initialize?).
Action Items:
For now, the logger accounts for this by de-duplicating initWidget
events that occur together in too short a timespan.
We should look into this issue closer since this may cause a slowdown as the widget frontend needs to render two times.
To set a visualization as the intent, users currently have to export a visualization of interest and then save it as a variable, then reset it as the intent:
vis = df.get_exported()[0]
df.intent = vis
df
We should add a button that automatically sets the intent as the selected visualization.
Support the ability to delete one or more selected visualizations in the SelectableCard.
Font Icons for Trash
https://fontawesome.com/icons/trash?style=solid
https://fontawesome.com/icons/trash?style=solid
Currently, the export button is active even when no SelectableCard is selected.
We should not allow the user to click on the export button if there are no cards that are selected.
When at least one card is selected, we can change the opacity of the export button icon to be dimmer when nothing is selected, and change to standard color. In addition, we can add a forbidden cursor and hover over text via the HTML title
tag to let users know that they need to select a card before exporting.
The process of compiling to tsx --> index.js that is used for the Jupyter nbextension is quite slow and bottlenecks frontend dev workflow. We should look into whether there is a faster or easier compilation process for rebuilding the extension upon some code change.
Originally posted by @tomsing1 in lux-org/lux#167 (comment)
On the VSCode widget , when the action tabs are clicked. VSCode is tries to open up a new page on the browser with the address https://file+.vscode-resource.vscode-webview.net/
followed by the path location to the ipynb file. This might be resulting from how the tabs are built into React and how this interacts with the VSCode environment, whereas the Toggle button is directly built into ipywidget itself.
Temporary fix suggested by @tomsing1: Shift + arrow
keyboard shortcuts work for moving between the tabs for now.
Clicking on a vis for export takes a few seconds of lag, as well as clicking on the export button
Frontend testing framework with Travis CI by running through notebooks in lux-binder and making sure 1) no errors show up and 2) widget displays as expected.
Add functionality for users to remove visualization from the recommendation widget.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.