lux-org / lux-widget Goto Github PK

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.

Hello -

TL;DR

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

Symptoms

When I click on the Toggle Pandas/Lux button, I get either Error displaying widget: model not found or Loading widget...

Details

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:

• https://github.com/lux-org/lux-widget/blob/v0.1.6/luxwidget/nbextension/package.json

@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?

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.

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.

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.

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.

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

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.

Update development workflow and CONTRIBUTING.md to incorporate flake8 and black for refactoring and improving code style.

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).

Add functionality for users to remove visualization from the recommendation widget.

The tooltip arrow at the top of the tooltip is not showing. We should be seeing something like this:

But even changing the margin-top of #intent_str doesn't fix things, neither does changing the CSS class .tooltip.bottom .tooltip-arrow.

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 scrollbar in the Jupyter Notebook is missing. I believe this is a rendering issue. Could you take a look at this issue?

• Add UI capability for users to drag and rearrange the ordering of tabs.

• Add UI capability for users to cancel and clear certain tabs.

I'm not being able to use the widget on jupyter lab.
The dataframe is shown, but not the Toggle button.
I'm using Python 3.9.9 on WSL2.

Here is the debug info, which shows that the widget is correctly installed:

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.

Supporting lux-widget for newly-released Jupyter Lab 3

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.

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, 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:

• Possibel Font Icon for expanding.
• For the expanded window, it might make sense to have the code editor and expanded vis side-by-side to allow interactive editing and save this back to the widget.
• One simple alternative is to rely on Vega Embed's option panel, which opens the vis into a separate Vega-Lite Editor.

Clicking on a vis for export takes a few seconds of lag, as well as clicking on the export button

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.

1. Is there a component similar to <Vega ... /> in Matplotlib? If so, we can use that component in the frontend and use that instead of generating an SVG.
2. Is there a way to only tweak the frontend using Flexbox styling? If so, we can use plotting_scale from the backend similar to how scaling is accomplished for Altair charts.

lux does not show toggle button under windows environment

It seems like when the current vis is a VisList, the widget UI is not rendering properly and has overlapping elements in the top left corner, see the screenshot below from the binder

Lux version: 0.3.0
luxwidget version: 0.1.5