Merge branch 'develop' into tim/FormProto

* develop:
  ✨ Support "auto" as the new default for st.image's `use_column_width` (streamlit#2635)
  fix branch name in pr-preview (streamlit#2644)
  ♻️ Remove "_proto" from "exception_proto.py" (streamlit#2638)
  ♻️ Remove "_proto" from "media_proto.py" and "iframe_proto.py" (streamlit#2639)
  Refactor: remove "_proto" from "image_proto.py" (streamlit#2626)
  correct info on url shortening behavior (streamlit#2576)
  Set "overflow:visible" on st.expander (streamlit#2611)
  Revert "Revert "Add anchors to Markdown headers (streamlit#2513)""
  Fix file uploader docs + change to getvalue (streamlit#2628)
  Update change log
  Update notices
  Up version to 0.75.0
  Revert "Add anchors to Markdown headers (streamlit#2513)"
  Speed up Cypress tests (streamlit#2600)
  Remove "beta feature" notice on st.color_picker (streamlit#2625)
  Deflake multiselect snapshot test by waiting for stale-element (streamlit#2624)
  Rerender Maybe components when they're first disabled (streamlit#2617)
  Increase side padding to 5rem when app is in wide mode (streamlit#2613)

.circleci/config.yml

@@ -127,8 +127,8 @@ commands:
             fi
             if [ ! -d frontend/node_modules ] ; then
               source "$HOME/.nvm/nvm.sh"
+              make react-init
             fi
-            make react-init
             echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
             echo 'source "$NVM_DIR/nvm.sh"' >> $BASH_ENV
 
@@ -363,6 +363,7 @@ jobs:
           paths:
             - ~/.nvm
             - ~/.cache
+            - frontend/node_modules
 
       - when:
           condition: <<pipeline.git.tag>>
@@ -560,11 +561,12 @@ jobs:
       - run:
           name: Ready to deploy!
           command: |
-            echo -e "https://share.streamlit.io/deploy?repository=streamlit/core-previews&branch=pr-${CIRCLE_PR_NUMBER}&mainModule=streamlit_app.py"
+            echo -e "https://share.streamlit.io/deploy?repository=streamlit/core-previews&branch=${PREVIEW_BRANCH}&mainModule=streamlit_app.py"
 
   cypress:
     docker:
       - image: circleci/python:3.7.4-stretch
+    parallelism: 10
 
     resource_class: xlarge
 
@@ -614,32 +616,54 @@ jobs:
           steps:
             - run:
                 name: Cypress
+                # See comment below, in the "unless << parameters.flaky >>".
                 command: |
                   cd frontend
-                  yarn run cy:serve-and-run-all-flaky
+                  TEST=$(circleci tests glob ../e2e/specs/*.spec.js | circleci tests split --split-by=timings)
+                  ../scripts/run_e2e_tests.py -a -f $TEST
 
       - unless:
           condition: << parameters.flaky >>
           steps:
             - run:
                 name: Cypress
+                # Need to run from frontend directory, because
+                # cypress-circleci-reporter reports paths relative to there.
+                #
+                # `circleci tests split` splits our long-running Cypress e2e
+                # tests into N different parallel jobs, so that they finish
+                # much faster than if we run them in sequence. CircleCI makes
+                # sure each container that calls `circleci test split` receives
+                # its share of the test files.
                 command: |
                   cd frontend
-                  yarn run cy:serve-and-run-all
+                  TEST=$(circleci tests glob ../e2e/specs/*.spec.js | circleci tests split --total=9 --split-by=timings)
+                  ../scripts/run_e2e_tests.py -a $TEST
 
       - store_test_results: &store_results
-          path: frontend/test-reports
+          path: frontend/test_results/cypress
           when: always
 
-      - store_artifacts: &store_report
-          path: frontend/mochawesome-report
-
       - store_artifacts: &store_videos
           path: frontend/cypress/videos
 
       - store_artifacts: &store_snapshots
           path: frontend/cypress/snapshots
 
+      - save_cache:
+          name: Save virtualenv to cache
+          key: v13-python-venv-{{ checksum "~/python_cache_key.md5" }}
+          paths:
+            - venv
+
+      - save_cache:
+          name: Save nvm and node_modules to cache
+          key: v13-nvm_node_modules-{{ checksum "~/yarn.lock.md5" }}
+          paths:
+            - ~/.nvm
+            - ~/.cache
+            - frontend/node_modules
+
       - when:
           condition: <<pipeline.git.tag>>
           steps:

.dockerignore

@@ -5,7 +5,5 @@ docker-compose.yml
 .git
 .gitignore
 frontend/node_modules
-frontend/cypress/mochawesome
-frontend/mochawesome-report
-frontend/mochawesome.json
+frontend/test_results
 venv

.gitignore

@@ -91,9 +91,7 @@ docs/_static/css/custom.css
 frontend/cypress/videos
 __diff_output__
 cypress.env.json
-mochawesome-report
-mochawesome
-frontend/mochawesome.json
+frontend/test_results
 
 # Ignore screenshots that don't get used in CircleCI
 frontend/cypress/snapshots/darwin

Makefile

@@ -362,7 +362,6 @@ build-circleci:
 .PHONY: run-circleci
 # Run circleci image with volume mounts
 run-circleci:
-	mkdir -p frontend/mochawesome-report
 	docker-compose \
 		-f e2e/docker-compose.yml \
 		run \

docs/changelog.md

@@ -16,6 +16,18 @@ This page lists highlights, bug fixes, and known issues for official Streamlit r
       $ pip install --upgrade streamlit
 ```
 
+## Version 0.75.0
+
+_Release date: January 21, 2021_
+
+**Notable Changes**
+
+- 🕳 [`st.empty`](https://docs.streamlit.io/en/0.75.0/api.html#streamlit.empty)
+  previously would clear the component at the end of the script. It has now been
+  updated to clear the component instantly.
+- 🛹 Previously in wide mode, we had thin margins around the webpage. This has
+  now been increased to provide a better user experience.
+
 ## Version 0.74.0
 
 _Release date: January 6, 2021_

docs/deploy_streamlit_app.md

@@ -56,7 +56,7 @@ for example:
 http://share.streamlit.io/streamlit/demo-self-driving/master/streamlit_app.py
 ```
 
-Most times, your app is also given a shortened URL of the form `https://share.streamlit.io/[user name]/[repo name]`. The only time you need the full URL is when you deployed multiple apps from the same repo. So you can also reach the example URL above at the short URL [http://share.streamlit.io/streamlit/demo-self-driving](http://share.streamlit.io/streamlit/demo-self-driving).
+If your app has name `streamlit_app.py` and your branch is `master`, your app is also given a shortened URL of the form `https://share.streamlit.io/[user name]/[repo name]`. The only time you need the full URL is when you deployed multiple apps from the same repo. So you can also reach the example URL above at the short URL [http://share.streamlit.io/streamlit/demo-self-driving](http://share.streamlit.io/streamlit/demo-self-driving).
 
 ## Share, update, and collaborate
 

docs/troubleshooting/sanity-checks.md

@@ -35,7 +35,7 @@ pip install --upgrade streamlit
 streamlit version
 ```
 
-...and then verify that the version number printed is `0.74.1`.
+...and then verify that the version number printed is `0.75.0`.
 
 **Try reproducing the issue now.** If not fixed, keep reading on.
 

e2e/docker-compose.yml

@@ -13,8 +13,8 @@ services:
         source: ../frontend/cypress
         target: /home/circleci/repo/frontend/cypress
       - type: bind
-        source: ../frontend/mochawesome-report
-        target: /home/circleci/repo/frontend/mochawesome-report
+        source: ../frontend/test_results
+        target: /home/circleci/repo/frontend/test_results
       - type: bind
         source: ../frontend/src
         target: /home/circleci/repo/frontend/src

e2e/scripts/st_expander.py

@@ -19,6 +19,8 @@
 
 expander = st.beta_expander("Collapse me!", expanded=True)
 expander.write("I can collapse")
+expander.slider("I don't get cut off")
+expander.button("I'm also not cut off (while focused)")
 
 collapsed = st.beta_expander("Expand me!")
 collapsed.write("I am already collapsed")

e2e/scripts/st_image.py

@@ -15,8 +15,10 @@
 import streamlit as st
 import numpy as np
 
-st.set_option("deprecation.showImageFormat", True)
 img = np.repeat(0, 10000).reshape(100, 100)
+img800 = np.repeat(0, 640000).reshape(800, 800)
+
+st.set_option("deprecation.showImageFormat", True)
 st.image(img, caption="Black Square with deprecated format", format="JPEG", width=100)
 
 st.set_option("deprecation.showImageFormat", False)
@@ -30,3 +32,15 @@
 
 transparent_img = np.zeros((100, 100, 4), dtype=np.uint8)
 st.image(transparent_img, caption="Transparent Black Square", width=100)
+
+col1, col2, col3 = st.beta_columns(3)
+col2.image(img)  # 100
+col2.image(img, use_column_width="auto")  # 100
+
+col2.image(img, use_column_width="never")  # 100
+col2.image(img, use_column_width=False)  # 100
+
+col2.image(img, use_column_width="always")  # column
+col2.image(img, use_column_width=True)  # column
+
+col2.image(img800, use_column_width="auto")  # column

e2e/specs/st_expander.spec.js

@@ -47,6 +47,9 @@ describe("st.expander", () => {
   });
 
   it("displays correctly", () => {
+    // Focus the button, then ensure it's not cut off
+    // See https://github.com/streamlit/streamlit/issues/2437
+    cy.get(".stButton button").focus();
     cy.get(".main").matchImageSnapshot("expanders-in-main");
     cy.get("[data-testid='stSidebar']").matchImageSnapshot(
       "expanders-in-sidebar"

e2e/specs/st_image.spec.js

@@ -75,4 +75,20 @@ describe("st.image", () => {
       .should("have.attr", "src")
       .should("match", /^.*\.png$/);
   });
+
+  it("displays a 100x100 image when use_column_width is default, 'auto', 'never', or False", () => {
+    for (const index of [6, 7, 8, 9]) {
+      cy.get(".element-container [data-testid='stImage'] img")
+        .eq(index)
+        .matchImageSnapshot("black-square-100px");
+    }
+  });
+
+  it("displays a column-width image when use_column_width is 'always', True, or size > column", () => {
+    for (const index of [10, 11, 12]) {
+      cy.get(".element-container [data-testid='stImage'] img")
+        .eq(index)
+        .matchImageSnapshot("black-square-column");
+    }
+  });
 });

e2e/specs/st_multiselect.spec.js

@@ -113,6 +113,13 @@ describe("st.multiselect", () => {
       cy.get(".stMultiSelect span")
         .eq(1)
         .should("have.text", "Female");
+
+      // Wait for 'stale-element' class to go away, so the snapshot looks right.
+      cy.get(".stMultiSelect")
+        .eq(1)
+        .parent()
+        .should("not.have.class", "stale-element");
+
       cy.get(".stMultiSelect")
         .eq(1)
         .then(el => {

e2e/specs/st_set_page_config.spec.js

@@ -45,4 +45,10 @@ describe("st.set_page_config", () => {
       "wide"
     );
   });
+
+  it("displays in wide mode", () => {
+    cy.get("[data-testid='stReportViewContainer']").matchImageSnapshot(
+      "wide-mode"
+    );
+  });
 });

frontend/craco.config.js

@@ -21,10 +21,14 @@ module.exports = {
     configure: webpackConfig => {
       webpackConfig.resolve.mainFields = ["main", "module"]
 
-      // HardSourceWebpackPlugin adds aggressive build caching
-      // to speed up our slow builds.
-      // https://github.com/mzgoddard/hard-source-webpack-plugin
-      webpackConfig.plugins.unshift(new HardSourceWebpackPlugin())
+      // hardsource appears to make React app server start more slowly in our
+      // end-to-end tests, so adding an environment variable to disable it
+      if (!process.env.DISABLE_HARDSOURCE_CACHING) {
+        // HardSourceWebpackPlugin adds aggressive build caching
+        // to speed up our slow builds.
+        // https://github.com/mzgoddard/hard-source-webpack-plugin
+        webpackConfig.plugins.unshift(new HardSourceWebpackPlugin())
+      }
 
       const minimizerIndex = webpackConfig.optimization.minimizer.findIndex(
         item => item.options.terserOptions

frontend/cypress.json

@@ -1,10 +1,5 @@
 {
-  "reporter": "mocha-multi-reporters",
-  "reporterOptions": {
-    "configFile": "reporter-config.json"
-  },
   "integrationFolder": "../e2e/specs",
-  "screenshotsFolder": "mochawesome-report/assets",
   "trashAssetsBeforeRuns": false,
   "viewportWidth": 1366,
   "viewportHeight": 768,

frontend/cypress/support/index.js

@@ -15,8 +15,6 @@
 
 import "./commands"
 
-const addContext = require("mochawesome/addContext")
-
 // Thiago has anti-aliasing setup on his machine so we match it in the tests
 const isStyleLoaded = head => head.find("#st-font-antialiased").length > 0
 
@@ -36,11 +34,3 @@ beforeEach(() => {
     `<style type="text/css" id="st-font-antialiased">\n${css}</style>`
   )
 })
-
-// Add screenshots from failed tests to the Mochawesome report
-Cypress.on("test:after:run", (test, runnable) => {
-  if (test.state === "failed") {
-    const screenshotFileName = `${runnable.parent.title} -- ${test.title} (failed).png`
-    addContext({ test }, `assets/${Cypress.spec.name}/${screenshotFileName}`)
-  }
-})

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "streamlit-browser",
-  "version": "0.74.1",
+  "version": "0.75.0",
   "private": true,
   "homepage": "./",
   "scripts": {
@@ -12,11 +12,6 @@
     "cy:open": "unset NODE_OPTIONS && cypress open --env devicePixelRatio=1",
     "cy:run": "unset NODE_OPTIONS && cypress run",
     "cy:run-flaky": "yarn cy:run --config integrationFolder=../e2e_flaky/specs",
-    "cy:run-all": "../scripts/run_e2e_tests.py -a",
-    "cy:run-all-flaky": "yarn cy:run-all -f",
-    "_cy:serve-and-run": "NODE_OPTIONS=--max_old_space_size=8192 start-server-and-test start http://localhost:3000",
-    "cy:serve-and-run-all": "yarn _cy:serve-and-run -- cy:run-all",
-    "cy:serve-and-run-all-flaky": "yarn _cy:serve-and-run -- cy:run-all-flaky",
     "typecheck": "tsc --noEmit"
   },
   "jest": {
@@ -52,6 +47,7 @@
     "clipboard": "^2.0.6",
     "color2k": "^1.1.0",
     "copy-to-clipboard": "^3.3.1",
+    "cypress-circleci-reporter": "^0.1.2",
     "d3": "^5.16.0",
     "d3-graphviz": "^2.6.1",
     "deck.gl": "^8.2.5",
@@ -158,9 +154,6 @@
     "mocha": "5.2.0",
     "mocha-junit-reporter": "^1.23.3",
     "mocha-multi-reporters": "^1.1.7",
-    "mochawesome": "^4.0.1",
-    "mochawesome-merge": "^2.0.1",
-    "mochawesome-report-generator": "^4.0.1",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
     "react-scripts": "4.0.1",

frontend/src/components/core/Maybe/Maybe.test.tsx

@@ -56,6 +56,17 @@ describe("The Maybe component", () => {
       expect(spyShouldComponentUpdate).toHaveBeenCalled()
       expect(spyRender).toHaveBeenCalled()
     })
+
+    it("should call render() when a Maybe is first disabled", () => {
+      const spyShouldComponentUpdate = jest.spyOn(
+        Maybe.prototype,
+        "shouldComponentUpdate"
+      )
+      const spyRender = jest.spyOn(Maybe.prototype, "render")
+      component.setProps({ name: "new name", enable: false })
+      expect(spyShouldComponentUpdate).toHaveBeenCalled()
+      expect(spyRender).toHaveBeenCalled()
+    })
   })
 
   describe("when enable is false", () => {

frontend/src/components/core/Maybe/Maybe.tsx

@@ -30,7 +30,10 @@ class Maybe extends React.Component<Props, State> {
     nextState: Readonly<State>,
     nextContext: any
   ): boolean {
-    return nextProps.enable
+    // We have our component update if either props.enable or nextProps.enable
+    // is true to ensure that we rerender in the case that an Element is
+    // removed by replacing it with an empty one (so goes from enabled->disabled).
+    return this.props.enable || nextProps.enable
   }
 
   public render(): React.ReactNode {