VSCode Loading

[JosuaCarl]

I keep getting the "Loading" message when displaying tables with itables

I already followed the Quick Help guide.

[JosuaCarl]

It turns out, you I needed to reload the Jupyter Extension by:

1. disabling it
2. reloading it
3. enabling it again

Maybe add this to the frequent error list, or just leave this here for people to find.

Works like a charm not, thanks for the useful package :)

[Norlandz]

general problem

I face the same issue quite often.

Often times I need to close the file & reopen it. Some table may load, some may still not.

Or, when I scroll away or exec some other cell, some table may become normal again... -- just bit buggy.

(- Or, sometimes some table with long rows, will instead have a huge height.)

current workaround

Later I just found a better workaround for "refresh", under more actions of the cell

But still it should be fixed...

potential problem

internet?

I once suspected may be internet issue? But doesnt seems like it. And I tried init_notebook_mode(all_interactive=True, connected=False), from related issue https://github.com/mwouts/itables/issues/75 or help page https://mwouts.github.io/itables/troubleshooting.html, no luck.

some errors; promise?

I tried @command:workbench.action.webview.openDeveloperTools in vscode.

Found some errors, not sure came from which extension or what

Uncaught Error: Model is disposed!

Uncaught (in promise) TypeError: $(...).DataTable is not a function
    at <anonymous>:15:60

Uncaught ReferenceError: IPython is not defined

VM446:19 
VS Code Renderer failed to render output ReferenceError: IPython is not defined

preload.js:2156 
Uncaught TypeError: Cannot read properties of undefined (reading 'then')

I suspect it can be: Ipython kernel is not loaded & some async promise in js fail? idk...

---

@JosuaCarl Maybe reopen the issue?

[mwouts]

Hey @Norlandz , thank you for following up on this. Actually the connected mode has a simpler implementation, would you mind trying connected=True in init_notebook_mode? Please let us know if that works any better. Thanks!

[Norlandz]

@mwouts

trying connected=True in init_notebook_mode? https://github.com/mwouts/itables/issues/216#issuecomment-1913322969

Im not sure, but I dont think connected=True is the solve.

-- I use connected=False always. Because I want my notebook to work in offline

(--ie: after I run the notebook, get the output, close it, and open the ipynb in another computer with no internet, I should still able to see the output & interact with it -- should I use connected=True for this?).

-- The problem is: sometimes, some of the table just keeps in Loading state. I have to close and reopen the file in vscode, so that they get refreshed & may load properly.

-- Do you want me to try anyways?

[mwouts]

Hey @Norlandz , yes I do understand that you have a preference for connected=False on the long term (me too, and that's why I made it the default).

Still, if connected=True happened to works more reliably than connected=False in VS Code in the current version of itables, that could mean that https://github.com/mwouts/itables/blob/main/itables/html/initialize_offline_datatable.html does not work as expected in VS Code, so we could probably try and see how to make that part of the code work more consistently.

[mwouts]

Hey @JosuaCarl , @Norlandz , would you mind giving a try at this development version, and let me know whether it solves the loading issue in VS Code?

pip install git+https://github.com/mwouts/itables.git@version_1.7.0

[Norlandz]

@mwouts

Hey @JosuaCarl , @Norlandz , would you mind giving a try at this development version, and let me know whether it solves the loading issue in VS Code?

pip install git+https://github.com/mwouts/itables.git@version_1.7.0

Sure.

--

Some notes:

For 1.6.3 (prev experience):

• The loading issue only happens occasionally.
• (I tried to run and close the file couple times / spam my file to print many long df / plot graph / use ipywidgets, but I cannot reliably reproduce the error.)
• connected=True or not doesnt seem to effect the result.
• I suspect there may (or may not) be something related to: Large dataset / ipywidgets in vscode or jupyter. Not sure.

For 1.7.0:

• (need some time to try and see)
• seems like the custom css itables.options.css = doesnt work in dev version?
  • (I need this though) With css No css
  • it seems the names are changed to something with arbitrary string, like itables_4cca4179_45bc_441e_a100_320ac87082bd_wrapper

[mwouts]

seems like the custom css itables.options.css = doesnt work in dev version?

Oh I see, this should be restored now (on the same branch, please re-do the pip install git+https://github.com/mwouts/itables.git@version_1.7.0)

[Norlandz]

@mwouts

• This issue still persists.

  Happens occasionally.

  Unable to reliably reproduce.

  (A late reply, havent heavily use ipynb for some time. ) (I may look into this again a some later time.)

• I always use init_notebook_mode(all_interactive=True, connected=False).

• I look into the debug view of vscode @command:workbench.action.webview.openDeveloperTools, found this. (I think before was some other error.)

  const { DataTable, jQuery: $ } = await import(window._datatables_src_for_itables_2_2_3);
  
  Uncaught TypeError: Failed to resolve module specifier 'undefined'
  

  

• It can be that some tables get loaded, some do not.

  

• The trick of "refresh" by under more actions of the cell > change representation still works.

[Norlandz]

@mwouts

Maybe you can look into this debug info?

itables's visualization is good. But itables only occasionally works (for me, since i use it, idk why). Every time i reopen the file tab, or restart the kernel, or rerun the code, it has a chance to fail to load the data (or css).

It seem i just cannot use init_notebook_mode(all_interactive=True, connected=False), but have to use init_notebook_mode(all_interactive=True, connected=True).

Ignore error above ---------------------, focus on error below, which pops up when i open ipynb file with itables.

const {ITable, jQuery: $} = await import(window._datatables_src_for_itables_2_4_4);

document.querySelectorAll("#itables_6765fcbc_d1b7_4cec_9d21_648eb0b3cd92:not(.dataTable)").forEach(table => {
    if (!(table instanceof HTMLTableElement))
        return;

    let dt_args = {
        "layout": {
            "topStart": "pageLength",
            "topEnd": "search",
            "bottomStart": "info",
            "bottomEnd": "paging"
        },
        "lengthMenu": [5, 15, 30, 100, 200],
        "style": {
            "width": "100%",
            "float": "left"
        },
        "classes": ["display", "nowrap", "compact"],
        "text_in_header_can_be_selected": true,
        "order": [],
        "downsampling_warning": "<a href=\"https://mwouts.github.io/itables/downsampling.html\">downsampled</a> from 35,092x14 to 32x14 as maxBytes=10240",
        "filtered_row_count": 35060,
        "table_html": "<table><thead>\n    <tr style=\"text-align: right;\">\n      \n      <th>ip</th>\n      <th>user</th>\n      <th>timestamp</th>\n      <th>method</th>\n      <th>uri</th>\n      <th>protocol</th>\n      <th>status</th>\n      <th>size</th>\n      <th>referer</th>\n      <th>user_agent</th>\n      <th>uri_cleaned</th>\n      <th>size_mb</th>\n      <th>date</th>\n      <th>uri_short</th>\n    </tr>\n  </thead></table>",
        "data_json": "[[\"117. omitted ]]"
    };
    new ITable(table,dt_args);
}
);

PS: My trick doesnt work anymore.

(PS: I thought my last post was long ago. )

[mwouts]

Thank you @Norlandz for pointing this out. It might be that the scripts in the VS Code cells are not always executed in order. I will see what I can do about that.

[mwouts]

I will follow up on the issue with the offline mode in VS code at #424