streamlit-nightly 1.39.1.dev20241003__py2.py3-none-any.whl → 1.39.1.dev20241004__py2.py3-none-any.whl

streamlit/elements/image.py

@@ -30,6 +30,7 @@ from typing import TYPE_CHECKING, Final, Literal, Sequence, Union, cast
 from typing_extensions import TypeAlias
 
 from streamlit import runtime, url_util
+from streamlit.deprecation_util import show_deprecation_warning
 from streamlit.errors import StreamlitAPIException
 from streamlit.proto.Image_pb2 import ImageList as ImageListProto
 from streamlit.runtime import caching
@@ -61,6 +62,8 @@ ImageFormat: TypeAlias = Literal["JPEG", "PNG", "GIF"]
 ImageFormatOrAuto: TypeAlias = Literal[ImageFormat, "auto"]
 
 
+# @see Image.proto
+# @see WidthBehavior on the frontend
 class WidthBehaviour(IntEnum):
     """
     Special values that are recognized by the frontend and allow us to change the
@@ -70,6 +73,8 @@ class WidthBehaviour(IntEnum):
     ORIGINAL = -1
     COLUMN = -2
     AUTO = -3
+    MIN_IMAGE_OR_CONTAINER = -4
+    MAX_IMAGE_OR_CONTAINER = -5
 
 
 WidthBehaviour.ORIGINAL.__doc__ = """Display the image at its original width"""
@@ -94,6 +99,8 @@ class ImageMixin:
         clamp: bool = False,
         channels: Channels = "RGB",
         output_format: ImageFormatOrAuto = "auto",
+        *,
+        use_container_width: bool = False,
     ) -> DeltaGenerator:
         """Display an image or list of images.
 
@@ -120,6 +127,9 @@ class ImageMixin:
             If "always" or True, set the image's width to the column width.
             If "never" or False, set the image's width to its natural size.
             Note: if set, `use_column_width` takes precedence over the `width` parameter.
+        .. deprecated::
+            The `use_column_width` parameter has been deprecated and will be removed in a future release.
+            Please utilize the `use_container_width` parameter instead.
         clamp : bool
             Clamp image pixel values to a valid range ([0-255] per channel).
             This is only meaningful for byte array images; the parameter is
@@ -137,6 +147,15 @@ class ImageMixin:
             while diagrams should use the PNG format for lossless compression.
             Defaults to "auto" which identifies the compression type based
             on the type and format of the image argument.
+        use_container_width : bool
+            Whether to override the figure's native width with the width of the
+            parent container. If ``use_container_width`` is ``True``, Streamlit
+            sets the width of the figure to match the width of the parent
+            container. If ``use_container_width`` is ``False`` (default),
+            Streamlit sets the width of the image to its natural width, up to
+            the width of the parent container.
+            Note: if `use_container_width` is set to `True`, it will take
+            precedence over the `width` parameter
 
         Example
         -------
@@ -149,21 +168,45 @@ class ImageMixin:
 
         """
 
-        if use_column_width == "auto" or (use_column_width is None and width is None):
-            width = WidthBehaviour.AUTO
-        elif use_column_width == "always" or use_column_width is True:
-            width = WidthBehaviour.COLUMN
-        elif width is None:
-            width = WidthBehaviour.ORIGINAL
-        elif width <= 0:
-            raise StreamlitAPIException("Image width must be positive.")
+        if use_container_width is True and use_column_width is not None:
+            raise StreamlitAPIException(
+                "`use_container_width` and `use_column_width` cannot be set at the same time.",
+                "Please utilize `use_container_width` since `use_column_width` is deprecated.",
+            )
+
+        image_width: int = (
+            WidthBehaviour.ORIGINAL if (width is None or width <= 0) else width
+        )
+
+        if use_column_width is not None:
+            show_deprecation_warning(
+                "The `use_column_width` parameter has been deprecated and will be removed "
+                "in a future release. Please utilize the `use_container_width` parameter instead."
+            )
+
+            if use_column_width == "auto":
+                image_width = WidthBehaviour.AUTO
+            elif use_column_width == "always" or use_column_width is True:
+                image_width = WidthBehaviour.COLUMN
+            elif use_column_width == "never" or use_column_width is False:
+                image_width = WidthBehaviour.ORIGINAL
+
+        else:
+            if use_container_width is True:
+                image_width = WidthBehaviour.MAX_IMAGE_OR_CONTAINER
+            elif image_width is not None and image_width > 0:
+                # Use the given width. It will be capped on the frontend if it
+                # exceeds the container width.
+                pass
+            elif use_container_width is False:
+                image_width = WidthBehaviour.MIN_IMAGE_OR_CONTAINER
 
         image_list_proto = ImageListProto()
         marshall_images(
             self.dg._get_delta_path_str(),
             image,
             caption,
-            width,
+            image_width,
             image_list_proto,
             clamp,
             channels,

streamlit/proto/Image_pb2.pyi

@@ -61,11 +61,15 @@ class ImageList(google.protobuf.message.Message):
     IMGS_FIELD_NUMBER: builtins.int
     WIDTH_FIELD_NUMBER: builtins.int
     width: builtins.int
-    """The width of each image.
+    """@see WidthBehaviour on the backend
+    @see WidthBehavior on the frontend
+    The width of each image.
     >0 sets the image width explicitly
     -1 means use the image width
-    -2 means use the column width
-    -3 means use the smaller of image width & column width
+    -2 means use the column width (deprecated)
+    -3 means use the smaller of image width & column width (deprecated)
+    -4 means use the smaller of image width & container width
+    -5 means use the larger of image width & container width
     """
     @property
     def imgs(self) -> google.protobuf.internal.containers.RepeatedCompositeFieldContainer[global___Image]: ...

streamlit/static/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "./static/css/main.5513bd04.css",
-    "main.js": "./static/js/main.57346aee.js",
+    "main.js": "./static/js/main.fb185886.js",
     "static/js/6679.265ca09c.chunk.js": "./static/js/6679.265ca09c.chunk.js",
     "static/js/9464.7e9a3c0a.chunk.js": "./static/js/9464.7e9a3c0a.chunk.js",
     "static/js/9077.e0a8db2a.chunk.js": "./static/js/9077.e0a8db2a.chunk.js",
@@ -15,7 +15,7 @@
     "static/js/3710.b80be2b0.chunk.js": "./static/js/3710.b80be2b0.chunk.js",
     "static/js/8148.f51df66c.chunk.js": "./static/js/8148.f51df66c.chunk.js",
     "static/js/84.414fa87b.chunk.js": "./static/js/84.414fa87b.chunk.js",
-    "static/js/9923.7061d124.chunk.js": "./static/js/9923.7061d124.chunk.js",
+    "static/js/9923.790a85e7.chunk.js": "./static/js/9923.790a85e7.chunk.js",
     "static/js/583.61ac7fde.chunk.js": "./static/js/583.61ac7fde.chunk.js",
     "static/js/4827.f9cb5fa3.chunk.js": "./static/js/4827.f9cb5fa3.chunk.js",
     "static/js/8237.b58252d4.chunk.js": "./static/js/8237.b58252d4.chunk.js",
@@ -156,6 +156,6 @@
   },
   "entrypoints": [
     "static/css/main.5513bd04.css",
-    "static/js/main.57346aee.js"
+    "static/js/main.fb185886.js"
   ]
 }

streamlit/static/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><link rel="shortcut icon" href="./favicon.png"/><link rel="preload" href="./static/media/SourceSansPro-Regular.0d69e5ff5e92ac64a0c9.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="./static/media/SourceSansPro-SemiBold.abed79cd0df1827e18cf.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="./static/media/SourceSansPro-Bold.118dea98980e20a81ced.woff2" as="font" type="font/woff2" crossorigin><title>Streamlit</title><script>window.prerenderReady=!1</script><script defer="defer" src="./static/js/main.57346aee.js"></script><link href="./static/css/main.5513bd04.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><link rel="shortcut icon" href="./favicon.png"/><link rel="preload" href="./static/media/SourceSansPro-Regular.0d69e5ff5e92ac64a0c9.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="./static/media/SourceSansPro-SemiBold.abed79cd0df1827e18cf.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="./static/media/SourceSansPro-Bold.118dea98980e20a81ced.woff2" as="font" type="font/woff2" crossorigin><title>Streamlit</title><script>window.prerenderReady=!1</script><script defer="defer" src="./static/js/main.fb185886.js"></script><link href="./static/css/main.5513bd04.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

streamlit/static/static/js/9923.790a85e7.chunk.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_streamlit_app=self.webpackChunk_streamlit_app||[]).push([[9923],{19923:(e,t,n)=>{n.r(t),n.d(t,{default:()=>c});n(58878);var i=n(22044),o=n(89653);const s=(0,o.A)("div",{target:"e115fcil2"})((e=>{let{theme:t}=e;return{display:"flex",flexDirection:"row",flexWrap:"wrap",rowGap:t.spacing.lg}}),""),r=(0,o.A)("div",{target:"e115fcil1"})((()=>({display:"flex",flexDirection:"column",alignItems:"stretch",width:"auto",flexGrow:0})),""),l=(0,o.A)("div",{target:"e115fcil0"})((e=>{let{theme:t}=e;return{fontFamily:t.genericFonts.bodyFont,fontSize:t.fontSizes.sm,color:t.colors.fadedText60,textAlign:"center",marginTop:t.spacing.xs,wordWrap:"break-word",padding:t.spacing.threeXS}}),"");var a,d=n(90782);!function(e){e[e.OriginalWidth=-1]="OriginalWidth",e[e.ColumnWidth=-2]="ColumnWidth",e[e.AutoWidth=-3]="AutoWidth",e[e.MinImageOrContainer=-4]="MinImageOrContainer",e[e.MaxImageOrContainer=-5]="MaxImageOrContainer"}(a||(a={}));const c=(0,i.A)((function(e){let t,{width:n,isFullScreen:i,element:o,height:c,endpoints:h}=e;const m=o.width;if([a.OriginalWidth,a.AutoWidth,a.MinImageOrContainer].includes(m))t=void 0;else if([a.ColumnWidth,a.MaxImageOrContainer].includes(m))t=n;else{if(!(m>0))throw Error(`Invalid image width: ${m}`);t=m}const u={};return c&&i?(u.maxHeight=c,u.objectFit="contain"):(u.width=t,u.maxWidth="100%"),(0,d.jsx)(s,{className:"stImage","data-testid":"stImage",style:{width:n},children:o.imgs.map(((e,t)=>{const n=e;return(0,d.jsxs)(r,{"data-testid":"stImageContainer",children:[(0,d.jsx)("img",{style:u,src:h.buildMediaURL(n.url),alt:t.toString()}),n.caption&&(0,d.jsx)(l,{"data-testid":"stImageCaption",style:u,children:` ${n.caption} `})]},t)}))})}))},22044:(e,t,n)=>{n.d(t,{A:()=>f});var i=n(58878),o=n(53124),s=n.n(o),r=n(8151),l=n(41514),a=n(67214),d=n(64611),c=n(84152),h=n(89653);const m=(0,h.A)("button",{target:"e1vs0wn31"})((e=>{let{isExpanded:t,theme:n}=e;const i=t?{right:"0.4rem",top:"0.5rem",backgroundColor:"transparent"}:{right:"-3.0rem",top:"-0.375rem",opacity:0,transform:"scale(0)",backgroundColor:n.colors.lightenedBg05};return{position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",zIndex:n.zIndices.sidebar+1,height:"2.5rem",width:"2.5rem",transition:"opacity 300ms 150ms, transform 300ms 150ms",border:"none",color:n.colors.fadedText60,borderRadius:"50%",...i,"&:focus":{outline:"none"},"&:active, &:focus-visible, &:hover":{opacity:1,outline:"none",transform:"scale(1)",color:n.colors.bodyText,transition:"none"}}}),""),u=(0,h.A)("div",{target:"e1vs0wn30"})((e=>{let{theme:t,isExpanded:n}=e;return{"&:hover":{[m]:{opacity:1,transform:"scale(1)",transition:"none"}},...n?{position:"fixed",top:0,left:0,bottom:0,right:0,background:t.colors.bgColor,zIndex:t.zIndices.fullscreenWrapper,padding:t.spacing.md,paddingTop:t.sizes.fullScreenHeaderHeight,overflow:["auto","overlay"],display:"flex",alignItems:"center",justifyContent:"center"}:{}}}),"");var p=n(90782);class g extends i.PureComponent{constructor(e){super(e),this.context=void 0,this.controlKeys=e=>{const{expanded:t}=this.state;27===e.keyCode&&t&&this.zoomOut()},this.zoomIn=()=>{document.body.style.overflow="hidden",this.context.setFullScreen(!0),this.setState({expanded:!0})},this.zoomOut=()=>{document.body.style.overflow="unset",this.context.setFullScreen(!1),this.setState({expanded:!1})},this.convertScssRemValueToPixels=e=>parseFloat(e)*parseFloat(getComputedStyle(document.documentElement).fontSize),this.getWindowDimensions=()=>{const e=this.convertScssRemValueToPixels(this.props.theme.spacing.md),t=this.convertScssRemValueToPixels(this.props.theme.sizes.fullScreenHeaderHeight);return{fullWidth:window.innerWidth-2*e,fullHeight:window.innerHeight-(e+t)}},this.updateWindowDimensions=()=>{this.setState(this.getWindowDimensions())},this.state={expanded:!1,...this.getWindowDimensions()}}componentDidMount(){window.addEventListener("resize",this.updateWindowDimensions),document.addEventListener("keydown",this.controlKeys,!1)}componentWillUnmount(){window.removeEventListener("resize",this.updateWindowDimensions),document.removeEventListener("keydown",this.controlKeys,!1)}render(){const{expanded:e,fullWidth:t,fullHeight:n}=this.state,{children:i,width:o,height:s,disableFullscreenMode:r}=this.props;let c=l.u,h=this.zoomIn,g="View fullscreen";return e&&(c=a.Q,h=this.zoomOut,g="Exit fullscreen"),(0,p.jsxs)(u,{isExpanded:e,"data-testid":"stFullScreenFrame",children:[!r&&(0,p.jsx)(m,{"data-testid":"StyledFullScreenButton",onClick:h,title:g,isExpanded:e,children:(0,p.jsx)(d.A,{content:c})}),i(e?{width:t,height:n,expanded:e,expand:this.zoomIn,collapse:this.zoomOut}:{width:o,height:s,expanded:e,expand:this.zoomIn,collapse:this.zoomOut})]})}}g.contextType=c.n;const x=(0,r.b)(g);const f=function(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];class n extends i.PureComponent{constructor(){super(...arguments),this.render=()=>{const{width:n,height:i,disableFullscreenMode:o}=this.props;return(0,p.jsx)(x,{width:n,height:i,disableFullscreenMode:t||o,children:t=>{let{width:n,height:i,expanded:o,expand:s,collapse:r}=t;return(0,p.jsx)(e,{...this.props,width:n,height:i,isFullScreen:o,expand:s,collapse:r})}})}}}return n.displayName=`withFullScreenWrapper(${e.displayName||e.name})`,s()(n,e)}},41514:(e,t,n)=>{n.d(t,{u:()=>r});var i=n(68102),o=n(58878),s=n(68622),r=o.forwardRef((function(e,t){return o.createElement(s.I,(0,i.A)({iconAttrs:{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},iconVerticalAlign:"middle",iconViewBox:"0 0 8 8"},e,{ref:t}),o.createElement("path",{d:"M0 0v4l1.5-1.5L3 4l1-1-1.5-1.5L4 0H0zm5 4L4 5l1.5 1.5L4 8h4V4L6.5 5.5 5 4z"}))}));r.displayName="FullscreenEnter"},67214:(e,t,n)=>{n.d(t,{Q:()=>r});var i=n(68102),o=n(58878),s=n(68622),r=o.forwardRef((function(e,t){return o.createElement(s.I,(0,i.A)({iconAttrs:{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},iconVerticalAlign:"middle",iconViewBox:"0 0 8 8"},e,{ref:t}),o.createElement("path",{d:"M1 0L0 1l1.5 1.5L0 4h4V0L2.5 1.5 1 0zm3 4v4l1.5-1.5L7 8l1-1-1.5-1.5L8 4H4z"}))}));r.displayName="FullscreenExit"}}]);