solara-ui 1.45.0__py3-none-any.whl

solara/components/file_drop.py

@@ -0,0 +1,159 @@
+import threading
+import typing
+from typing import Any, Callable, List, Optional, Union, cast
+
+import traitlets
+from ipyvue import Template
+from ipyvuetify.extra import FileInput
+from ipywidgets import widget_serialization
+from typing_extensions import TypedDict
+
+import solara
+import solara.hooks as hooks
+
+
+class FileInfo(TypedDict):
+    name: str
+    size: int
+    file_obj: typing.BinaryIO
+    data: Optional[bytes]
+
+
+class FileDropZone(FileInput):
+    # override to narrow traitlet of FileInput
+    template = traitlets.Instance(Template).tag(sync=True, **widget_serialization)
+    template_file = (__file__, "file_drop.vue")
+    items = traitlets.List(default_value=cast(List[Any], [])).tag(sync=True)
+    label = traitlets.Unicode().tag(sync=True)
+    multiple = traitlets.Bool(True).tag(sync=True)
+
+
+@solara.component
+def _FileDrop(
+    label="Drop file(s) here",
+    on_total_progress: Optional[Callable[[float], None]] = None,
+    on_file: Optional[Callable[[Union[FileInfo, List[FileInfo]]], None]] = None,
+    lazy: bool = True,
+    multiple: bool = False,
+):
+    """Generic implementation used by FileDrop and FileDropMultiple.
+
+    If multiple=True, multiple files can be uploaded.
+    """
+
+    file_info, set_file_info = solara.use_state(None)
+    wired_files, set_wired_files = solara.use_state(cast(Optional[typing.List[FileInfo]], None))
+
+    file_drop = FileDropZone.element(label=label, on_total_progress=on_total_progress, on_file_info=set_file_info, multiple=multiple)  # type: ignore
+
+    def wire_files():
+        if not file_info:
+            return
+
+        real = cast(FileDropZone, solara.get_widget(file_drop))
+
+        # workaround for @observe being cleared
+        real.version += 1
+        real.reset_stats()
+
+        set_wired_files(cast(typing.List[FileInfo], real.get_files()))
+
+    solara.use_effect(wire_files, [file_info])
+
+    def handle_file(cancel: threading.Event):
+        if not wired_files:
+            return
+        if on_file:
+            for i in range(len(wired_files)):
+                if not lazy:
+                    wired_files[i]["data"] = wired_files[i]["file_obj"].read()
+                else:
+                    wired_files[i]["data"] = None
+            if multiple:
+                on_file(wired_files)
+            else:
+                on_file(wired_files[0])
+
+    result: solara.Result = hooks.use_thread(handle_file, [wired_files])
+    if result.error:
+        raise result.error
+
+    return file_drop
+
+
+@solara.component
+def FileDrop(
+    label="Drop file here",
+    on_total_progress: Optional[Callable[[float], None]] = None,
+    on_file: Optional[Callable[[FileInfo], None]] = None,
+    lazy: bool = True,
+):
+    """Region a user can drop a file into for file uploading.
+
+    If lazy=True, no file content will be loaded into memory,
+    nor will any data be transferred by default.
+    If lazy=False, file content will be loaded into memory and passed to the `on_file` callback via the `FileInfo.data` attribute.
+
+
+    A file object is of the following argument type:
+    ```python
+    class FileInfo(typing.TypedDict):
+        name: str  # file name
+        size: int  # file size in bytes
+        file_obj: typing.BinaryIO
+        data: Optional[bytes]: bytes  # only present if lazy=False
+    ```
+
+
+    ## Arguments
+     * `on_total_progress`: Will be called with the progress in % of the file upload.
+     * `on_file`: Will be called with a `FileInfo` object, which contains the file `.name`, `.length` and a `.file_obj` object.
+     * `lazy`: Whether to load the file contents into memory or not. If `False`,
+        the file contents will be loaded into memory via the `.data` attribute of file object(s).
+
+    ## Load into Pandas
+    To load the data into a Pandas DF, set `lazy=False` and use `file['file_obj']` (be careful of memory)<br>
+    You can run this directly in your Jupyter notebook
+
+    ```python
+    import io
+    import pandas as pd
+    import solara
+
+    @solara.component
+    def Page():
+        def load_file_df(file):
+            df = pd.read_csv(file["file_obj"])
+            print("Loaded dataframe:")
+            print(df)
+
+        solara.FileDrop(label="Drop file to see dataframe!", on_file=load_file_df)
+
+    ```
+
+    """
+
+    return _FileDrop(label=label, on_total_progress=on_total_progress, on_file=on_file, lazy=lazy, multiple=False)
+
+
+@solara.component
+def FileDropMultiple(
+    label="Drop files here",
+    on_total_progress: Optional[Callable[[float], None]] = None,
+    on_file: Optional[Callable[[List[FileInfo]], None]] = None,
+    lazy: bool = True,
+):
+    """Region a user can drop multiple files into for file uploading.
+
+    Almost identical to `FileDrop` except that multiple files can be dropped and `on_file` is called
+    with a list of `FileInfo` objects.
+
+    ## Arguments
+     * `on_total_progress`: Will be called with the progress in % of the file(s) upload.
+     * `on_file`: Will be called with a `List[FileInfo]`.
+        Each `FileInfo` contains the file `.name`, `.length`, `.file_obj` object, and `.data` attributes.
+     * `lazy`: Whether to load the file contents into memory or not.
+
+    """
+
+    return _FileDrop(label=label, on_total_progress=on_total_progress, on_file=on_file, lazy=lazy, multiple=True)

solara/components/file_drop.vue

@@ -0,0 +1,83 @@
+<template>
+  <div ref="dropzone" class="solara-file-drop" effectAllowed="move">
+    <template v-if="file_info && file_info.length > 0">
+      <template v-if="multiple">
+        <div v-for="file in file_info">
+          {{ file.name }}
+        </div>
+      </template>
+      <template v-else>
+        {{ file_info[0].name }}
+      </template>
+    </template>
+    <template v-else>
+      {{ label }}
+    </template>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  mounted() {
+    this.chunk_size = 2 * 1024 * 1024;
+    this.$refs.dropzone.addEventListener('dragover', event => {
+      event.preventDefault();
+    });
+
+    this.$refs.dropzone.addEventListener('drop', async event => {
+      event.preventDefault();
+      const items = await Promise.all([...event.dataTransfer.items]);
+      const files = items.map(i => i.webkitGetAsEntry())
+      const fileHolders = files.filter(f => f.isFile)
+      const nativeFilesPromises = fileHolders.map(fileHolder => new Promise((rs, rj) => fileHolder.file(rs, rj)))
+      const nativeFiles = await Promise.all(nativeFilesPromises)
+
+      this.native_file_info = nativeFiles
+      this.file_info = this.native_file_info.map(
+        ({name, size}) => ({
+          name,
+          isFile: true,
+          size,
+        }));
+    });
+  },
+  methods: {
+    jupyter_clear() {
+      this.native_file_info = [];
+      this.file_info = [];
+    },
+    jupyter_read(chunk) {
+      const {id, file_index, offset, length} = chunk;
+      let to_do = length;
+      let sub_offset = offset;
+
+      (async () => {
+        while (to_do > 0) {
+          console.log(this.chunk_size, to_do);
+          const sub_length = Math.min(to_do, this.chunk_size);
+
+          const file = this.native_file_info[file_index];
+          const blob = file.slice(sub_offset, sub_offset + sub_length);
+          const buff = await blob.arrayBuffer();
+
+          const msg = {id, file_index, offset: sub_offset, length: sub_length}
+          this.upload(msg, [buff]);
+
+          to_do -= sub_length
+          sub_offset += sub_length
+        }
+      })();
+    }
+  }
+}
+</script>
+
+<style id="solara-file-drop">
+.solara-file-drop {
+  height: 100px;
+  border: 1px dashed gray;
+  margin: 8px 0;
+  padding: 8px;
+  overflow: auto;
+}
+</style>

solara/components/file_list_widget.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-sheet class="solara-file-list" ref="scrollpane"
+      @click="clicked = null"
+  >
+    <v-list
+      @click="clicked = null"
+    >
+      <v-list-item
+          v-for="{name, is_file, size} in files"
+          :key="name + '|' + is_file"
+          @click.stop="clicked = { name, is_file }"
+          @dblclick="double_clicked = { name, is_file }"
+          :class="(clicked && clicked.name == name) ? 'solara-file-list-selected': ''"
+      >
+        <v-list-item-icon>
+          <v-icon>{{ name === '..' ? 'mdi-keyboard-backspace' : is_file ? 'mdi-file-document' : 'mdi-folder' }}</v-icon>
+        </v-list-item-icon>
+
+        <v-list-item-content>
+          <v-list-item-title :class="'solara-file-list-' + (is_file ? 'file' : 'dir')">
+            {{ name }}<span v-if="size"> - {{ size }}</span>
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </v-sheet>
+</template>
+
+<script>
+module.exports = {
+  mounted() {
+    const element = this.$refs.scrollpane.$el
+    element.scrollTop = this.scroll_pos
+
+    this._scrollListener = _.debounce((e) => {
+      this.scroll_pos = Math.round(element.scrollTop)
+    }, 50)
+    element.addEventListener('scroll', this._scrollListener)
+  },
+  watch: {
+    scroll_pos(v) {
+      this.$nextTick(() => this.$refs.scrollpane.$el.scrollTop = v);
+    }
+  }
+}
+</script>
+
+<style id="solara-file-list">
+.solara-file-list {
+  height: 400px;
+  overflow: auto;
+}
+
+.solara-file-list-dir {
+  font-weight: bold;
+}
+
+.solara-file-list-selected {
+  background-color: #3333;
+
+}
+
+.solara-file-list .v-list-item__icon,
+.solara-file-list .v-list-item__list {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.v-application--is-ltr .solara-file-list .v-list-item__icon {
+  margin-right: 8px;
+}
+
+.solara-file-list .v-list-item {
+  height: 28px;
+  min-height: 0;
+  padding-left: 0;
+}
+</style>

solara/components/head.py

@@ -0,0 +1,27 @@
+from typing import List
+
+import reacton
+import solara
+
+
+@reacton.component
+def Head(children: List[reacton.core.Element] = []):
+    """A component that manager the "head" tag of the page to avoid duplicate tags, such as titles.
+
+    Currently only supports the [title](/documentation/components/page/title) tag as child, e.g.:
+
+    ```python
+    import solara
+
+    @solara.component
+    def Page():
+        with solara.VBox() as main:
+            MyAwesomeComponent()
+            with solara.Head():
+                solara.Title("My page title")
+        return main
+
+    ```
+
+    """
+    return solara.Div(children=children, style="display; none")

solara/components/head_tag.py

@@ -0,0 +1,49 @@
+from typing import Optional
+
+import ipyvuetify as vy
+import reacton.core
+import solara
+import traitlets
+
+
+class HeadTagWidget(vy.VuetifyTemplate):
+    template_file = (__file__, "head_tag.vue")
+    tagname = traitlets.Unicode().tag(sync=True)
+    key = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+    attributes = traitlets.Dict().tag(sync=True)
+    level = traitlets.Int().tag(sync=True)
+
+
+@solara.component
+def HeadTag(tagname: str, key=None, attributes: Optional[dict] = None):
+    """Add a child element to head element, or replace a meta tag with the same tagname and key.
+
+    This component should be used inside a [Head](/documentation/components/page/head) component, e.g.:
+
+    ```python
+    import solara
+
+    @solara.component
+    def Page():
+        with solara.VBox() as main:
+            MyAwesomeComponent()
+            with solara.Head():
+                solara.HeadTag(tagname="meta", attributes={"name": "description", "content": "My page description"})
+        return main
+    ```
+
+    If multiple HeadTag components are used with the same key, the 'deepest' child will take precedence.
+
+    ## Arguments
+
+     * tagname: the tagname of the element (e.g. 'meta', 'link', 'script')
+     * attributes: a dictionary of attributes to set on the element.
+    """
+    level = 0
+    rc = reacton.core.get_render_context()
+    context = rc.context
+    while context and context.parent:
+        level += 1
+        context = context.parent
+    attributes = attributes or {}
+    return HeadTagWidget.element(tagname=tagname, key=key, attributes=attributes, level=level)

solara/components/head_tag.vue

@@ -0,0 +1,60 @@
+<template><span></span></template>
+
+<script>
+module.exports = {
+  mounted() {
+    if (window._solaraHeadTags === undefined) {
+      window._solaraHeadTags = {};
+    }
+    if (window._solaraHeadTags[this.key] === undefined) {
+      window._solaraHeadTags[this.key] = [];
+    }
+    window._solaraHeadTags[this.key].push(this);
+    this.updateElement();
+  },
+  destroyed() {
+    const tags = window._solaraHeadTags[this.key];
+    tags.splice(tags.indexOf(this), 1);
+    // ask another headtag to update the element
+    if (tags.length) {
+      tags[0].updateElement();
+    }
+  },
+  watch: {
+    tagname() {
+      this.updateElement();
+    },
+    attributes() {
+      this.updateElement();
+    },
+    level() {
+      this.updateElement();
+    },
+  },
+  methods: {
+    updateElement() {
+      const tags = window._solaraHeadTags[this.key];
+      let deepestTag = tags[0];
+      for (let i = 1; i < tags.length; i++) {
+        if (tags[i].level > deepestTag.level) {
+          deepestTag = tags[i];
+        }
+      }
+      let el = document.head.querySelector(`[data-solara-head-key="${deepestTag.tagname}-${deepestTag.key}"]`);
+      if (el === null) {
+        el = document.createElement(deepestTag.tagname);
+        document.head.appendChild(el);
+      } else {
+        el.innerHTML = '';
+        while (el.attributes.length > 0) {
+          el.removeAttribute(el.attributes[0].name);
+        }
+      }
+      Object.keys(deepestTag.attributes).forEach((key) => {
+        el.setAttribute(key, deepestTag.attributes[key]);
+      });
+      el.setAttribute('data-solara-head-key', `${deepestTag.tagname}-${deepestTag.key}`);
+    }
+  },
+};
+</script>

solara/components/image.py

@@ -0,0 +1,173 @@
+import typing
+from io import BytesIO
+from pathlib import Path
+from typing import List, Optional, Union
+
+import solara
+from solara.alias import rw
+
+if typing.TYPE_CHECKING:
+    import numpy as np
+    import PIL.Image
+
+
+@solara.component
+def Image(
+    image: Union[str, Path, "np.ndarray", bytes, "PIL.Image.Image"],
+    width: Optional[str] = None,
+    format="png",
+    classes: List[str] = [],
+):
+    """Displays an image from a URL, Path, numpy data, bytes or PIL image.
+
+    If passed as bytes, the image is assumed to be in the format specified by the `format` argument.
+
+    ## Examples
+
+    ### Displaying an image from a Path
+
+    ```solara
+    import solara
+    import solara.website
+    from pathlib import Path
+
+
+    image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
+
+    @solara.component
+    def Page():
+        solara.Image(image_path)
+    ```
+
+    ### Displaying an image from a URL
+
+    ```solara
+    import solara
+
+
+    image_url = "/static/public/beach.jpeg"
+
+    @solara.component
+    def Page():
+        solara.Image(image_url)
+        display(image_url)
+
+    ```
+
+    ### Displaying an image from a numpy array
+
+    ```solara
+
+    import solara
+    import solara.website
+    from pathlib import Path
+    import numpy as np
+    import PIL.Image
+
+
+    image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
+    image_ndarray = np.asarray(PIL.Image.open(image_path))
+
+    @solara.component
+    def Page():
+        solara.Image(image_ndarray)
+        display(image_ndarray)
+    ```
+
+    ### Displaying an image from bytes
+
+    ```solara
+
+    import solara
+    import solara.website
+    from pathlib import Path
+    import PIL.Image
+
+
+    image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
+    image_bytes = image_path.read_bytes()
+
+    @solara.component
+    def Page():
+        solara.Image(image_bytes, format="jpeg")
+        display(image_bytes[:100])
+    ```
+
+    ### Displaying an image from a PIL Image
+
+    ```solara
+
+    import solara
+    import solara.website
+    from pathlib import Path
+    import PIL.Image
+
+
+    image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
+    image = PIL.Image.open(image_path)
+
+    @solara.component
+    def Page():
+        solara.Image(image)
+    ```
+
+
+    ## Arguments
+     * `image`: URL, Path, numpy data, bytes or PIL Image.
+     * `width`: Width of the image, by default (None) the image is displayed at its original size.
+        Other options are: "100%" (to full its parent size), "100px" (to display it at 100 pixels wide),
+        or any other CSS width value.
+     * `format`: Format of the image, only used when image is of type bytes, or a PIL Image is passed.
+     * `classes`: List of CSS classes to add to the image.
+    """
+    layout = {}
+    if width:
+        layout["width"] = width
+    classes = ["solara-image"] + classes
+    if isinstance(image, (str, Path)):
+        path = Path(image)
+        if path.exists():
+            import ipywidgets
+
+            format = ipywidgets.Image._guess_format("image", str(path))
+            value = ipywidgets.Image._load_file_value(str(path))
+            return rw.Image(
+                value=value,
+                format=format,
+                _dom_classes=classes,  # type: ignore
+                layout=layout,
+            )
+        elif isinstance(image, str):
+            url_data = image.encode("utf8")
+            return rw.Image(
+                value=url_data,
+                format="url",
+                _dom_classes=classes,  # type: ignore
+                layout=layout,
+            )
+    elif isinstance(image, bytes):
+        return rw.Image(
+            value=image,
+            format=format,
+            _dom_classes=classes,  # type: ignore
+            layout=layout,
+        )
+    elif solara.util.isinstanceof(image, "PIL.Image:Image"):
+        f = BytesIO()
+        image.save(f, format=format)  # type: ignore
+        value = f.getvalue()
+        return rw.Image(
+            value=value,
+            format="png",
+            _dom_classes=classes,  # type: ignore
+            layout=layout,
+        )
+    elif solara.util.isinstanceof(image, "numpy:ndarray"):
+        value = solara.util.numpy_to_image(image, format="png")  # type: ignore
+        return rw.Image(
+            value=value,
+            format="png",
+            _dom_classes=classes,  # type: ignore
+            layout=layout,
+        )
+    raise TypeError(f"Only support URL, path or numpy array, not {image}")