streamsync-cloud/streamsync

No-code in the front, Python in the back. An open-source framework for creating data apps.

streamsync's Issues

Remove pandas and plotly from dependency

Congratulations on the release!

Is it possible to remove pandas and plotly from dependency?

How to add navigation to sidebar

Cannot figure out how to add a page menu to the sidebar. Do I have to use a HTML element?

Thank you!

Search component id in builder

Discussed in #35

^{Originally posted by jtrungle June 7, 2023}
Currently going into ui.json and trying to match up the ids by clicking around to find usages of an element of the state.

Would be good to have a functionality to search for component id in the builder/ some sort of view to see all the components that are using a particular state element.

Maximum state data size

Dear developer,

Thank you so much for this initiative as I have been frustrated by the slowness of Streamlit, especially after setting everything up. I understand that speed is one of the largest advantages of Streamsync over Streamlit, but what about support for large data files? I usually work with large CSV files that measure by GBs (1-5GBs) that I will need to save into the state variable. Is there a known maximum state size for now?

Add-on: I've experienced noticeable lag for loading the Builder after loading ~2GB worth of DataFrame into the state variable.

Pydantic 2

Do you have a timeline to migrate to pydantic 2? I am using a package that recently migrated, so now I am deadlocked,

Binding don't seem work inside a repeater

(Two way binding like inputs)

It seems that it doesn't differentiate them.

Change max file upload size?

I'd like the ability to change the max file upload size. It appears its hardcoded in CoreFileUpload.vue.

Cannot drag and drop

I tried dragging in an image or a textfield in the page but after dropping it, it does not appear on the page. I have it running on and azure server and call in via --enable-remote-edit in case that makes a difference.

How to run streamsync from cloned source

On a windows computer with python 3.10 and streamsync 0.2.6 installed
The hello app is not starting/loading
see screenshot,

I also tried

streamsync create app1
streamsync edit app1

The builder did not start either

I also went to apps subfolder

streamsync run hello

The hello app did not start

Question:
How to run streamsync from github source locally?

How to change the state first while executing an input field callback?

Hi! Below is the UI of my app:

I have a function which reacts to the "ss-file-change" event by processing the uploaded file. What I'm trying to achieve is to change the text of the message below when the file is uploaded and being processed, so that the user knows something's happening on the background. However, what I noticed is that my callback function would first execute any code not related to the state, and only then proceed with changing the state dictionary. Therefore, while I can inform the user that the file has been processed or there's been an error, I cannot indicate something's going on behind the hood. So my question is, is it possible to achieve the functionality I'm looking for? If yes, then how can I do it?

Adding support for serializing datetime.datetime instances

Discussed in #40

^{Originally posted by jreyesr June 17, 2023}
Hello! I've been exploring Streamsync (awesome tool, BTW!) and I found out that apparently datetime.datetime instances cannot be serialized and sent to the frontend.

Minimal example

import datetime
import streamsync as ss

initial_state = ss.init_state({
  "now": datetime.datetime.now(),
})

This causes the following error to appear:

Error

Serialisation error

Traceback (most recent call last):
  File "/home/reyes/.local/lib/python3.10/site-packages/streamsync/core.py", line 239, in to_dict
    serialised_value = state_serialiser.serialise(value)
  File "/home/reyes/.local/lib/python3.10/site-packages/streamsync/core.py", line 129, in serialise
    raise StateSerialiserException(
streamsync.core.StateSerialiserException: Object of type <class 'datetime.datetime'> (MRO: ['datetime.datetime', 'datetime.date', 'builtins.object']) cannot be serialised.

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/home/reyes/.local/lib/python3.10/site-packages/streamsync/app_runner.py", line 120, in _handle_session_init
    user_state = session.session_state.user_state.to_dict()
  File "/home/reyes/.local/lib/python3.10/site-packages/streamsync/core.py", line 241, in to_dict
    raise ValueError(
ValueError: Couldn't serialise value of type "<class 'datetime.datetime'>" for key "now".

As far as I can tell, this is due to the serialization code not supporting datetime.datetime instances

Background: I ran across this when trying to replicate Streamlit's starter tutorial in Streamsync. This tutorial has a Pandas DataFrame with a datetime column (it's a special Pandas datetime class, but it eventually inherits from Python's datetime.datetime)

Adding support for this would let users display data that has timestamp-style columns, such as "created on", "event time" and such.

Is there any interest in letting users pass datetime instances to the FE? I don't see any issues or discussions mentioning it, but it may be because Streamsync is fairly new. Any ideas?

add state explorer

The layout explorer for UI elements is very powerful and intuitive,
When going to property panel, for value and event handler, one has to mentally remember all the states defined in the code, and knows which is which.
It would be great to add a similar explorer for state.

Selectbox and Multiselect Inputs

Some things that I do miss from Streamlit when I'm using this library are the Selectbox and Multiselect widgets. Particularly the ability to type what you're looking for and easily select it.

Is there any scope for including some similar widgets in Streamsync?

I'm wondering if you've considered using any component libraries to help you with this project? For example the Quasar library has many Vue components with lots of options that might be easy to integrate into Streamsync. For example the select component with autocomplete could be a good substitute for the Selectbox: https://quasar.dev/vue-components/select#filtering-and-autocomplete

Let me know what you think 😊

Code editor for full app

While the visual editor is fantastic, I find that I prefer doing it both the backend and the frontend on my code editor.

From your first article about Streamsync, I can see that this was the initial way you chose. However, you went with the visual editor. Maybe there are drawbacks to the first approach, would really like to have your input.

If not, do you plan on having this interface back? Thanks

You can add "root" to the tree structure of the "page". It looks like a bug

I understand that this is more of a typo in the code than a full-fledged bug, but I decided that it should be noticed.

Overall, I really like the idea and architecture of streamsync. I think it will be a very powerful tool in the future and it already looks very cool!

I always wanted such a tool for my work and projects, and I will try to participate in the development and testing

Plotly graph fullscreen

Hi,

How can I make a plotly graph take the whole screen on a page. Maybe you can add a way to modify that in the component properties in the future with the builder ?

Flesh out component documentation

This is such a brilliant project; thank you for creating it!

It might help adoption for the component documentation to look more similar to that of streamlit.

I know the page says

Streamsync Builder displays this data in context, when selecting a component.

This page mainly intended towards those exploring the framework before installing it.

and that the best way to explore components is to run the builder, but it's more likely users would start using streamsync if they could immediately visualize the project's value.

Conda package

I tried to install it using conda anc conda package but the package cannot be found. Please make it available there

Thank you for creating this awesome package!

Docker image does not run on local Macbook M1 Pro

I am having some issues running the docker container for the hello app. Would appreciate some help, maybe you can try to reproduce it?

Steps to Reproduce

1. Create the hello app
2. Build the hello docker image docker build -t streamsync-hello:local .
3. Run the image locally docker run -p 5000:5000 streamsync-hello:local

Observations

1. Nothing is printed out in the console after the docker image has been run
2. When accessing https://localhost:5000, no data is loaded, and there are error notifications

Environment
MacBook Pro
Chip: Apple M1 Pro
OS: macOS Monterey

is there a documentation?

No documentation is available. do you support pyplot figures? what other widgets do you support?

add Help to top menu bar

Can you add a new item called "Help" which links to

• GitHub source - https://github.com/streamsync-cloud/streamsync
• Documentation - https://www.streamsync.cloud/getting-started.html
• Community Forum ??
• Demo apps

I am not very familiar with the codebase yet, but willing to help with such simple feature enhancement

Create a video tutorial

It'd be really helpful if you could record a youtube tutorial on how to create and locally run a simple webapp and add this tutorial to the docs under a "tutorials" section. You might demo a webapp that allows users to chat with chatgpt using OpenAI API. This will make the package much more approachable.

Also allow contributors to create and share tutorials to the docs

Support for keyboard/mouse events

Hi, just wanted to see if this something you would consider supporting.

My use case is that I wanted to use Streamsync to build a tool kit for managing datasets. Keyboard events, such as using arrow keys or the scroll wheel to move through entries, would make this much more usable.

Thanks!

Message don't works with combined with repeater

I tried to use the 'repeater' component with the 'message' component inside. My goal is to set the visibility of the message based on variables in the state dictionary, but it doesn't work.

I have attempted different approaches to set the visibility, but none of them have worked.

I have attached the full code for reproduction.
test.zip

pip install?

why there is no proper pip installation rather than using heavy docker?

Create a demo for LLMs.

Hi again.

LLMs are the craze now. I think if someone can create a clean and simple ui for chatting with LLMs and make a tutorial and post the tutorial on the docs, this will make this project much more popular.

Maybe something like oobaboga text gen web ui but simpler and cleaner?

I can help with this but I have little knowlege of front end stuff, I can help with the backend (setting up the model as an api call, etc)

Let me know if someone is willing to cooperate.

Expanding Editor to multiple files

I was wondering what your thoughts are on expanding the editor to multiple files, It seems like it's currently intended for quick edits and so this might not be something you're interested in.

However, being able to do all of your required edits in the Builder would make a very complete app building experience. I've never been a fan of hopping around between windows a lot when trying to build something.

Enable Asynchronous Execution of Python Functions with Timer Component

Hello,

I am thoroughly enjoying this library and appreciate how seamlessly it functions. Currently, I'm utilizing the timer component to perform a classification task on an entire dataset, updating a pie chart based on the results. However, I'm facing a concern regarding potential blocking of the application during this process.

I have implemented a use case where the timer component is employed to perform a classification task on a sizable dataset. As a result, the pie chart gets updated based on the classification results. While this works well, I'm concerned about the potential for blocking the application during the execution of this task.

Desired Feature:
I'm wondering if it would be possible to extend the functionality of the timer component to allow for the asynchronous execution of Python functions. This would enable my classification task to run in the background, ensuring that it doesn't block other essential processes or user interactions within the application.

Additional Information:
Any suggestions or best practices on how to achieve asynchronous execution within the current library would be greatly appreciated.

I'm open to discussing potential implementation ideas or strategies that could make this feature feasible.

Library Version: 0.1.12

Please add data editor

hey man, this would be great if we can edit the dataframe... thx

Implement Streamsync Addon

What is the easyest way to integrate plugin for streamsync like auth?

For example streamlit have:

• streamlit-keycloack
• streamlit-authenticator

But also other complex element have plugin like seqviz or ketchersa that cases can be covered with Web Component? In what way?

Q: How can I limit the number input boxes to some value?

I'm trying to limit the number input box to only allow numbers >=0 and have a simple event handler that does this, but it won't keep the value at 0 if I use the arrows in the box or enter a new value < 0.

import streamsync as ss

# This is a placeholder to get you started or refresh your memory.
# Delete it or adapt it as necessary.
# Documentation is available at https://streamsync.cloud

# Shows in the log when the app starts
print("Hello world!")

initial_state = ss.init_state({
    "my_app": {
        "title": "RNAyx"
    },
    "comparison": "~ Genotype",
    "fdr_cutoff": 0.001,
    "minimal_base_mean": 0,
    "minimal_abs_lfc": 0,
    "k_means_groups": 2,
})

def generate_heatmap(state):
    print("We are generating the heatmap")

def check_minimal_base_mean(state, payload):
    state['minimal_base_mean'] = max(0, payload)

And I have defined the placeholder for the value as @{minimal_base_mean}

I also tried binding (in addition to the event handler) but it does not seem to work.
Is there a way to limit the input values and represent that in the UI as well...The state is actually never going below 0, but the UI does not get updated

Editable dataframe component or AGgrid component

This package looks great and I would like to try it. One thing that stops me from using this is the lack of dataframe manipulation. A lot of data in the corporate world is from excel or in tabular format. Being able to copy-paste data as input, and modifying it in place would have great value. Have you considered something like this?

Currently streamlit supports editable dataframes after it was much requested. Also AGGrid supports it, which is natively supported by NiceGUI. Would love to see something similar in this.

Custom dataframe formatting (e.g. wrap text in cell)

Thank you for your awesome work on this tool!

Is there any functionality to apply more flexible, custom styling on dataframe elements?

More specifically, I am looking to apply text wrapping on a dataframe column so that very long strings are completely visible in the column's cells. At the moment, the string is not completely visible if it exceeds the max width of the column.

Is this project going to remain active in the foreseeable future?

Hey guys. thanks for the amazing project. I'm working on a project and I don't like some things about streamlit so I was thinking of moving to this. I just wanted to confirm if this project will be actively developed and maintained before starting to develop using this. Thanks!

Event handler in different files

Hi,
How can I add event handler functions in other files than main.py ?

Q: Can I completely replace the sylesheet? Trying to use bootstrap

I am trying to change the look and feel of my app to use bootstrap, but adding bootstrap CSS to the /static directory only allows me partial changing the style of the components.

THis is likely due to what you describe here: https://www.streamsync.cloud/stylesheets.html#tips-for-effective-stylesheets in that it is not using the important flag, but does that mean we are always going to have to make our own stylesheet and cannot use existing ones, like bootstrap for streamsync apps?

Couple of questions / features in creating a LLM Application

Hi,

I am seriously enjoying your library while creating an application together with the python package for LangChain; currently focussing on analysing documents by uploading a batch of PDFs and then processing them.
Goals are creating quick scientific paper reviews, and smartly searching through a batch of scientific papers.

I have the following questions:

• Rendering a PDF in a HTML Element following https://stackoverflow.com/questions/17784037/how-to-display-pdf-file-in-html does not seem to work yet. A separate element for this would be wonderful.
• I have the issue where a dropdown element is larger than the sidebar, I cannot seem to figure out how to set the width for either component.
• Having a way to copy text to clipboard (then I can create a view plane with Markdown text + a copy to clipboard button)
• How do I update a state before the end of a function is reached? aka set state variable to "loading...." then call load function and when finished set variable to "loaded"

Again, I am seriously enjoying the library and I find it very intuitive to use 👍

Best regards,
Caspar

Support for Tailwind

I have taken a look at the project and it's quite mind-blowing. it sure has a lot of potential and I will be looking to explore it over the next weeks.

Is it possible to add support for TailwindCSS styling? It's one of the most popular tools for styling in the web dev world and something that I think could be integrated into the visual editor quite well.

How to use State from custom Web Component or JS?

I'm trying to include SeqViz component into my project here the source code.

The question is: how can I interact with the state from custom JS?

My solution

I create an HTML element of type script with the src of the component, after another HTML of type DIV with the variables into attr, and after another HTML element of type script that load static js that read variables from attr with following code:

setTimeout(function () {
    console.log("Readed: " + core.getComponentById("c79e92e2-ce45-4532-849f-704391de6224").content.attrs)
    var attrs = JSON.parse(core.getComponentById("c79e92e2-ce45-4532-849f-704391de6224").content.attrs)

    window.seqviz
        .Viewer("seqviz", {
            name: attrs.name,
            seq: attrs.seq,
            style: { height: "50vh", width: "100%" },
            annotations: [{ name: "promoter", start: 0, end: 34, direction: 1 }],
            highlights: [{ start: 0, end: 10 }],
            enzymes: ['Q']
        })
        .render();
}, 500);

Problems

• the timeout seams necessary during the streramsyc run but not during the streamsync edit probably because the js is just loaded when I click preview
• It read correctly the attrs if I put it directly but If I use a variable like @{dna} that I define In my python code I read '@{dna}' from that variable and not the value from the state.
• I do not have idea about how to change some state variable or stimulate event to the python

So how can I resolve that situation?

PydanticUserError

After installation of streamsync through pip install "streamsync[ds]" and running streamsync hello PydanticUserError is raised:

File "C:\term\venv\Lib\site-packages\pydantic_internal_generate_schema.py", line 800, in _typed_dict_schema
raise PydanticUserError(
pydantic.errors.PydanticUserError: Please use typing_extensions.TypedDict instead of typing.TypedDict on Python < 3.12.

(I'm using Python 3.11)

DataFrame Object Wont Display Last Row

Issue:

In main.py, when creating a pandas DataFrame and displaying it inside Streamsync, the last row is typically cut off from the display. I'm currently appending a blank row at the end of the DataFrame to display everything properly, but it would be more efficient not to have to do this workaround.

Steamsync Version: 1.10

Steps to Reproduce:

Create a pandas DataFrame in main.py.
Display the DataFrame in Streamsync.
Observe that the last row is missing from the display.
Expected Behavior:
All rows of the DataFrame should be displayed without the need to append a blank row.

Actual Behavior:
The last row of the DataFrame is cut off from the display.

Automatically refresh image container when source changes

Hi,
Firstly thank you so much for creating this!! Excellent work.

Is there any way to trigger refreshing an image container if the link or photo changes? I have two instances where this would be ideal:

1. I am grabbing an image from a security camera every 10 secs and copying it to the static folder (static/current_photo.jpg). I'm hoping to always display the most current image without forcing a page refresh.
2. I have a dropdown list of image paths but when I choose a new image and update the state with the new location, I have to refresh the page to see the selected image

Interestingly for the second option, if I'm in the "user interface" tab in builder and I click on the image it refreshes correctly. This doesn't happen when deployed.

Thanks again and any help would be appreciated. Great work!!!

Production/Future ?

Hello,

I'm genuinely impressed with StreamSync and am considering it for developing an interactive dashboard for my company. Before I commit, I'd like to understand the long-term support plan for this library. Can you assure regular updates and consistent support? It's essential for us not to integrate tools that might become obsolete or unsupported in the near future.

Thank you.

Add option to allow cross origin for builder

I've been trying this out locally and it works great, I'm having lots of trouble when I try to use a remote environment however.

For example if you try to run streamsync in Github Codespaces you cannot connect to the builder due to the request origin restriction.

Instructions to re-produce:

1. Open a repo with a streamsync app in Github Codespaces
2. Install requirements
3. Run app with streamsync edit <path_to_folder>
4. Try to open the builder by clicking "Open with Browser" on the proxy popup

You will get a Connection rejected. on the page and the following in the terminal:

ERROR:root:A session request with origin https://xxxxxx-3006.preview.app.github.dev was rejected. For security reasons, only local origins are allowed in edit mode.

I understand the need for this to be the default but it would be great to be able to turn this off if you're handling the auth separately and you're confident that it is secure.

For example it would be great to add an argument so that you could do something like:

streamsync edit --allow-cross-origin <my_path>

And then it could flash up a warning whilst it's running that looks something like:

WARNING: Allowing cross origin is not recommended - only use this argument if you're securing the end point with another service

Being able to edit these apps in Github Codespaces would be great way to test out the library with minimal local setup required.

Let me know what you think 😊

Unexpected behaviour when `@{dict}` keys have period characters (`"."`)

I'm really liking the app so far! I just wanted to log this in case it would be helpful - feel free to close if its not a priority.

Bug Overview

The string keys of dictionaries used in radio input components appear to have unexpected behaviour when they contain periods ("."), forward slashes ("/"), or similar path-like values.

EDIT: I have a hunch that there may be some strange logic with .split(".") calls. This bug might only be due to "." characters, rather than forward slashes. See:

• https://github.com/ramedina86/streamsync/blob/master/src/streamsync/core.py#L609
• https://github.com/ramedina86/streamsync/blob/master/src/streamsync/core.py#L621

Short Example

This is the initial state of the dashboard UI when I initialize the application:

• Refresh button: triggers the standard update function on click.
• Radio items: maps to the state["files"] variable with @{files}, triggers _select_file_handler on click.
• Top header "Selected Files": "None" if nothing is selected, otherwise it is the value of the selected item from the state["files"] dictionary.

If I have a period or forward slash character in my radio input dictionary, then after clicking on a radio item (which I've mapped to a handler) or hitting the "refresh" button (which I have mapped to the standard update function), it silently breaks the list of radio inputs and shows something else:

By "radio input dictionary", I mean to say the input of the radio input is @{files} and I have defined a key called files in the state: StreamsyncState object as follows:

state["files"] = {"../data/hello_world.txt": "../data/hello_world.txt"}

Note that the issue above is only related to the dictionary keys - the dictionary values can be any arbitrary string without issue.

All source code to produce this error is attached below.

Ideal Outcome

I would like to use strings with path characters (i.e. periods, forward slashes) in my radio item keys so that I can have users select a particular file they might like to load. I can work around this behaviour, but I think that at the very least I think this behaviour should be documented, as I can't see anything in the documentation stating that this causes issues.

Reproducible Example

I have included a minimal reproducible example as a streamsync folder that can be run and checked against. Please see the README in this .zip file for more details as I have broken down some of the error cases as best I can.

Once a virtual environment is activated, you should be able to reproduce the issue described in the README file when running either streamsync run app or streamsync edit app.

main.py file

The entry point main.py file is printed below:

"""Entry point script for the streamsync dashboard application."""

from pathlib import Path
from typing import Iterable

import streamsync as ss
from streamsync.core import StreamsyncSession, StreamsyncState

DATA_DIR = "../data"


def update(state: StreamsyncState, session: StreamsyncSession):
    """Updates the application state."""
    _update_files(state)


def _update_files(state: StreamsyncState):
    """Updates the list of discovered data files in the application state."""
    paths: Iterable[Path] = Path(state["data_dir"]).glob("*.txt")
    state["files"]: dict[str, str] = {str(path): path.name for path in paths}


def file_select_handler(state: StreamsyncState, payload: str):
    """Handler function when a file select component is interacted with."""
    state["selected_file"] = payload


# Initialise the dashboard application state
initial_state = ss.init_state(
    {
        "my_app": {"title": "Streamsync Dashboard"},
        "data_dir": DATA_DIR,
        "files": {},
        "selected_file": "None",
    }
)

update(initial_state, None)

Compressed Project as a Zip File

The full project is attached here: bug_report.zip

Project File Contents

A screenshot of the folder contents is shown below:

X,y of click event in Image component

Hi

Thanks for the fantastic work. I really like this tool, but I have one suggestion about features, the ability to read the xy coordinates of a click event on the image component would be useful. Maybe should be passed to function by context parameter.

Bunch of questions and suggestions

Hi Everybody,

WOW, this is an absolutely stunning project and I am more then impressed of the builder tool which could evolve to THE Python UI lib.
Of course this project is just starting up but you already have a documentation, which is something other projects are lacking for years.

Please understand this post as a summary of questions, findings and suggestions. You can take them into account or leave them alone.

I played around a little with the builder and I like the style of implementing functions and linking them to the suitable functions. Right from the start I tried to organize the logic for different views in different files in a subfolder of the app. From the main.py I imported simply the logic folder and in it's init.py all included modules are imported. It turns out that it is not easy identify the right function inside the builder because the builder only takes the function name but not the module name. So if you got two modules with functions named equally like handle_ok_button() then you can only guess which one is the right one. Maybe you should show the complete module name like logic.view1.handle_button_click to make it more clear. As a workaround I put the view name into the function name which isn't very pretty (like view1_handle_button_click).

I love the idea of linking the functions to events which could make creating UI's even as easy as it was with VB :-)
Unfortunately there are very few events right now. This leads to some problems. For example you can only handle the "ss-change" event for a textbox. This is not very handy because normally you need the value of the textbox as soon as the user has finished entering it. If I want to change for example a setpoint temperature to 21.5 degrees I will get 4 event calls for the 2, the 1, the Point and the 5. But I just need it once when the box looses the focus. So basically here I would prefer the onblur event.

Maybe it would be a good idea to implement all events the html specification has for a certain kind of control.
I use the pub/sub principle in many of my projects as well. Maybe it would be a good idea to give the user a function to fire custom events which can be used to run functions (e.g. fire_event("user_logon").

Furthermore it should be possible to style the elements with CSS in order to change the font, the color, the look of the border etc.
I think this should be possible to all controls and also to even change the CSS from the backend (hiding, changing color).

Also I was wondering if it is somehow possible to change the content the controls (innerhtml) from the backend without using a binding to the states dictionary. The state dictionary is a great idea but could be complicated to maintain for bigger projects. Having a second possibilty to change controls from python side would be great.

The html control could maybe be something you had in mind for this stuff, but I do not understand how to bind data or change the value of an abritrary html control. Maybe it is possible and I didn't find it in the docs or got it wrong.

My last two ideas are more or less feature requests.

I would love to make dialogues possible. Yes, you can switch to another view and use the view as a dialoge, but it would also be great to pop up a normal view as a dialogue which could be a small box. The dialogue could be separated from the underlying view with a half transparent separating layer. This would be great for Disclaimer boxes, teasers etc.

Last but not least your tool would be perfect for home automation or let's say visualization purposes. Here is often a use case for containers with absolute positioning of elements inside it. Normally you take a picture of a plant or a floor plan and then place controls which are holding the information on top of it. flet has a component like that and it's nice and easy to use but it would be absolutely amazing to design such things with a graphical drag and drop tool like the builder.

I am keen how yor project will evolve but the start is very very promising.
So please keep up the great work and grab the ideas you like from my post and throw the rest into the bin :-)

regards
Chris

A question about interacting with the selected region of a graph

Hello,
StreamSync is indeed a very useful visualization tool!
I encountered an issue while using StreamSync: I want to change the color (or perform other interactions) of the data within the selected region when displaying a graph using the Plotly Graph tool. I tried using scatter.on_selection(selection_fn) and defined the selection_fn function to change the color of the selected region. This method worked successfully in the notebook, but it doesn't achieve the desired effect in StreamSync. Can StreamSync achieve the effect I want, and how should I adjust the code?

Missing CONTRIBUTING.md

Discussed in https://github.com/ramedina86/streamsync/discussions/19

^{Originally posted by Wazarr94 May 5, 2023}
Is it possible to have a CONTRIBUTING.md file in the project?

The steps to make the right environment aren't really obvious and I am not sure about the conventions/tools you used.
Thanks.

Expose tree navigator

Internally UI editor has the tree navigator to explore layout and ui elements,
how about exposing this tree navigator as an independent UI element so end-user may take advantage of it