ifpen/chalk-it

Drag-and-drop Python webapps

Chalk'it

Welcome to Chalk'it. Chalk'it ambition is to allow technicians, scientists or engineers, not specialists in web technologies, to build their own web applications based on the Python code, JavaScript code or web-services they develop. Watch this 5 minutes video for a quick introduction: https://www.youtube.com/watch?v=vY8I1XwKs9k or this more detailed demo: https://www.youtube.com/watch?v=4O2IfRogeCc.

Currently, Chalk'it allows to export and share standalone HTML apps with Python and/or JavaScript code, thanks to Pyodide. Since version 0.5.0, Chalk'it is able to run standard Python code and host related dashboard as Docker images.

See the demos gallery and templates gallery for examples with code.

For more details, you can browse the online documentation.

Usage

Install

pip install py-chalk-it

Run

chalk-it

Chalk'it will be automatically launched in your web browser.

Your can also use the online hosted version.

Add needed Python (Pyodide) librairies

Add widgets by drag and drop

Use your favorite librairies

Create interaction and orchestration dataflow

Export and share in one click

Roadmap

• 3 clicks dashboard cloud sharing
• Command line interface (project open, render ...)
• PyDeck support

Contributing

If you are a developer, and wish to contribute, please read the contribution rules.

chalk-it's Issues

Chalk'it in the IDE

It is much more pleasant for developers to develop in their favorite IDE. A solution for Chalk'it would be to develop a utility for:

• xprjson to directory
• directory to xprjson

with automatic updates on save...

Plan for the use of the IDE debugger...

Add scheduling display

Add a feature allowing dataNodes scheduling to be displayed.

May be to transform graph view to include the schedule, with accordeon

Fork from main branch

Add position for switch and checkbox

Add right position possibility for the label of switch and checkbox widgets
New parameter labelPosition="left". Default position still labelPosition="right" for these widgets

Add Titillium Web font

Add this font natively like Montserrat.
Useful for Gecoair project dashboards.
Allow its usage by all widgets like the other fonts. Update font demo projet

Regression due to fusion of Python datanodes in integration branch

FileMngr.js:598 Uncaught (in promise) ReferenceError: LoginMngr is not defined
at Object.beforeSend (FileMngr.js:598:21)
at Function.ajax (jquery.js:6:4548)
at GetPythonList (FileMngr.js:590:7)
at Object.getFileList [as GetFileList] (FileMngr.js:518:30)
at python-images.js:144:30
at new Promise ()
at _listPythonFiles (python-images.js:142:20)
at Object.getImages (python-images.js:28:40)
at plugin-python-support.js:90:38
at Object.invoke (angular.js:5141:19)

Case with no server backend (local) to be taken into account

Problem in connection when adding the first select

Handling of a connection after removal of connected dataNode

Bug local project saving

Do not capital-case files

Open file panel capitalizes file names :

We need to keep font case intact.

Secure edit/view switch

Disable this switch just after user click, to prevent user click again when switch takes time

Add security for select widgets with different number of "keys" and "values"

Unable to install 0.3.3

Got this error message when attempting to install via pip install py-chalk-it:

  × python setup.py egg_info did not run successfully.
  │ exit code: 1
  ╰─> [7 lines of output]
      Traceback (most recent call last):
        File "<string>", line 2, in <module>
        File "<pip-setuptools-caller>", line 34, in <module>
        File "/tmp/pip-install-o3wf1rog/py-chalk-it_76d941c24b52465b852a6a5a8863189a/setup.py", line 7, in <module>
          with open("README.MD", "r") as fh:
               ^^^^^^^^^^^^^^^^^^^^^^
      FileNotFoundError: [Errno 2] No such file or directory: 'README.MD'
      [end of output]

I think the file is supposed to be README.md.

close projet after open new one not working

Save projet before opening a new one is not working :

Improve widget's graphical properties tabset

• enable choice lists (combo box)
• enable value validators

Find the good lib for that purpose !

Issue with preview of some templates

Preview of some templates show fonts load issues, may due to CORS or browser security restrictions.
For example, for combo-box:

Rendering does not load fonts:

Error loading iris-tutorial

Loading quick start:
http://localhost:7854/index.html?projectUrl=http://localhost:7854/doc//quick-start/xprjson/iris-tutorial.xprjson#/

In the version of f982fdc

causes this error:

Loading Pyodide
pyodide-loader.js:29 End of loading Pyodide
Le nœud est introuvable dans la page active.
pyodide-loader.js:209 Loading standard libraries
pyodide.asm.js:10 Loading scikit-learn, scipy, numpy, clapack, joblib, distutils, threadpoolctl, pandas, python-dateutil, six, pytz, setuptools, pyparsing
pyodide.asm.js:10 Loaded distutils, joblib, threadpoolctl, six, python-dateutil, pytz, pyparsing, setuptools, clapack, numpy, pandas, scipy, scikit-learn
pyodide-loader.js:209 Loading micropip libraries
pyodide.asm.js:10 pyparsing already loaded from default channel
pyodide.asm.js:10 Loading micropip, packaging
pyodide.asm.js:10 Loaded packaging, micropip
pyodide-loader.js:209 End of loading libraries
xdash-main.js:187 TypeError: Cannot read properties of undefined (reading 'icon_type')
    at DatanodeModel.deserialize (DatanodeModel.js:262:60)
    at _createDatanodeInstance (DatanodesListModel.js:221:20)
    at DatanodesListModel.js:106:16
    at _.each._.forEach (underscore.js:186:9)
    at finishLoad (DatanodesListModel.js:104:9)
    at DatanodesListModel.deserialize (DatanodesListModel.js:213:5)
    at DatanodesListModel.load (DatanodesListModel.js:296:10)
    at Object.load (DatanodesManager.js:375:26)
    at deserialize (xdash-main.js:139:28)
    at async loadFn (xdash-main.js:529:13)

gunicorn runtime support

Add support for rendering dashboard using gunicorn, with commands like:

gunicorn -b 0.0.0.0:7854 chlkt.render:app

that load a dashboard.xprjson at current directory.

Reduce Minimum size for combo box

To have a better presentation of the data, the minimum size (which is 30 for the moment) of the combo box should be reduced in order to make smaller elements in the dashboards (15 or 10 should be great)

Upgrade Apache Echarts Version above 5.3.0

According to test done with EChart, the current version included in Chalk it is under 5.3.0. Major correction have been done after 5.3.0, thanks to upgrade the EChart version to have more options availlable

Add runtime rendring option for projects

Add option:

chalk-it --render project.xprjson

Fixes to export options

• Avoid having errors if xDashApi.goToPage is called in edit mode (add security for avoiding execution error)
  

Widget D3 Calendar issues

• Bad rescaling
• All other widgets resize corruption
• Need to add definition of start and end (for undefined dates)

Github Windows runner setup

Upgrade to latest Pyodide

Add new packages if available

File name change not taken into accout in export

In Chalk'it hosted version, file rename is not taken into account when creating xprjson file name

In this example file is saved as Untitled.xprjson instead of new.xprjson

Restore xdsjon file load and save

Restore (reactivate) the feature of xdsjson file load and save for dataNodes

Avoid dashboard distortion

Widget scaling should become fully reversible, regardless of minWidth and minHeight constraints.
One solution is to appy minWidth and minHeight on lower level divs.

Bijectivity is necessary to avoid distortion

Multiselect widget state update at init

The connected variable to a multiselect widget needs to be updated if its containts does not fit actual list.

Example. Multiselect with ["A","B","C"] but selected ["C","D"]. Selected should be corrected to ["C"]

Side effects needs to be carefully studied

Map GeoJSON : display

The aim of this new feature is to provide a more flexible, dynamic, expressive and standardized way of displaying geographic information on Leafet Maps in a pure declarative way. Design rationale is to allow the map render a dynamic array of GeoJSON

• Merge old code into a new branch in GitHub
• Recode existing templates done with the "Leafet Maps" widget into the the "GeoJSON Maps" widget
• Identifiy GeoJSON format extensions (baseLayer/overlay, hover, scale presence, circles drawing ...)
• Implement these extensions
• JavaScript code refactoring into several files to simplify its maintaince
• Upgrade documentation and templates

Followed by @abirEF

Wrong execution

A dataNode with autoStart=false and explicitTrig=true is executed at html page startup.
This is wrong.

Example (to rename to xprjson)
test.json

bad display of table widget

Wrong display of a table
Missing first rows and header (too small scrolling ?)

IssueTable.json

xprjson has been transformed in json for download compatibility with Github

Edit/View/Preview width harmonization

Need to fix the width in view and preview as in edit.
Otherwise blank space is shown.

In edit, reference width:

In view, after xDash 2.xx modifications:

Wrong checkbox alignement

When checkboxSize is increased

bug in button with spinner

access to undefined property

Fix button vertical alignment

Adding icons feature to buttons caused this issue :

Text vertical alignement when no icon is present is to be fixed.

Error in preview

In the integration branch: when you try to preview a project, nothing is displayed and you get this error :

Add closure to projects

issue when opening templates

In hosted version, exported page name should be identical to project name

Here project name is Scipy but exported HTML is Untiteled.html

Provide better error message when Flask server has stopped

When the user inadvertently shuts down the chalk-it.exe Flask server, or if it stops for another reason, the user gets the following error message :

A better error message is advisable, to invite the user check and restart the command line

New widget : spinner status

Need for a new widget : a spinner indicating the pending status of a dataNode.

Useful when a click action triggers a somewhat long dataNode computation.

Insert custom CSS

Add a new widget property allowing to include custom CSS into widget main div.
Interesting for adding shadow, or custumising border

Implementation should be generic (to be included in widget-base.js class)

Unable to change variabilized colors

Color change is not taken into accout, for var-based colors.
For example here :

To be fixed.

Followed by @abirEF

Problem in runtime with year calendar widget

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'CalendarValues')
at calendarD3Widget.render (body-all-js-runtime-2.830.8588.min.js:216:663)
at new calendarD3Widget (body-all-js-runtime-2.830.8588.min.js:216:7225)
at calendarD3WidgetPluginClass.createWidget (body-all-js-runtime-2.830.8588.min.js:205:295)
at Object.createWidget (body-all-js-runtime-2.830.8588.min.js:200:428)
at body-all-js-runtime-2.830.8588.min.js:236:1025
at v.each.v.forEach (body-all-js-runtime-2.830.8588.min.js:19:1934)
at Object.C [as renderDashboardWidgets] (body-all-js-runtime-2.830.8588.min.js:236:877)
at Object.loadDashboard (body-all-js-runtime-2.830.8588.min.js:243:3480)

Hormonize and increase colorway

• Enforce the same colorway for Plotly JavaScript, Plotly Python, EChartes and Leaflet
• Current colorway has only 4 color stops. Increase to 10 keeping coherent graphical style

DataPoints concept

In integration branch.
In order to reduce the "frictions" for the Python user, introduce the DataPoints notion that contains the result of dataNode execution

File name duplicated in file loader

After loading a file, its content is duplicated :

Test done in integration branch. Check main branch also

open template regression

In Integration branch, open template function regressed

For example : http://localhost:7854/index.html?template=base64-image-py#/

angular.js:15567  Error: transition superseded
    at $StateProvider.$get (angular-ui-router.js:2967:37)
    at Object.invoke (angular.js:5141:19)
    at angular.js:4930:37
    at Object.getService [as get] (angular.js:5084:32)
    at angular-ui-router.js:3762:17
    at Object.invoke (angular.js:5141:19)
    at angular.js:4940:62
    at forEach (angular.js:387:20)
    at createInjector (angular.js:4940:3)
    at doBootstrap (angular.js:1960:20) 'Possibly unhandled rejection: {}'

Improve Python build scripts

• Enforce single-source of truth rule for all build variables
• Check to use the right front-end build directory with the right version
• Better handle templates referencing in dev and prod
• Automatically build templates from documentation scan
• Generalize main Python build to build either for pip or for hosted version

Problem with file loader widget at exported dashboard

body-all-js-runtime-2.820.8583.min.js:228 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'outputFile')
at loadFileWidget.render (body-all-js-runtime-2.820.8583.min.js:228:8095)
at new loadFileWidget (body-all-js-runtime-2.820.8583.min.js:228:11869)
at loadFileWidgetsPluginClass.createWidget (body-all-js-runtime-2.820.8583.min.js:209:295)
at Object.createWidget (body-all-js-runtime-2.820.8583.min.js:204:428)
at body-all-js-runtime-2.820.8583.min.js:241:1025
at v.each.v.forEach (body-all-js-runtime-2.820.8583.min.js:19:1934)
at Object.C [as renderDashboardWidgets] (body-all-js-runtime-2.820.8583.min.js:241:877)
at Object.loadDashboard (body-all-js-runtime-2.820.8583.min.js:248:3473)