Fix broken code from TypeScript PR (#388)

* fix cypress test

* fix margin problem

* restore defaultPropsfor DeckGlChart

* restore padding

* Fixing popover

* Fix sidebar widget z-index without hack

* Center icons

* Fix "for teams" URL

* Temporary fix for graphviz chart alignment.

* Don't use two-letter class name "oi" for open iconic as it can clash with styletron

* Fix sidebar color when screen is narrow

* Fix left and right padding in main content area.

* Fix sidebar expand/collapse icon color.

* Fix VegaLite chart dimensions

* Fix message_deduping e2e test, and rename .stFullScreenFrame to .fullScreenFrame since it's not an st element.

* Make st.dataframe(..., height=foo) work again.

* Fix sidebar media breakpoint in Sidebar.tsx

* Remove all snapshots from repo, except linux/2x (used in circleci)

* Make dataframe sorting chevron great again

* Don't add/remove border when calculating dataframe height.

* Remove unecessary strings from vega_lite_chart e2e test

* Fix statuswidget ellipses vertical alignment

* Update snapshots

.gitignore

@@ -84,6 +84,10 @@ mochawesome-report
 mochawesome
 frontend/mochawesome.json
 
+# Ignore screenshots that don't get used in CircleCI
+frontend/cypress/snapshots/darwin
+frontend/cypress/snapshots/linux/1x
+
 ########################################################################
 # VSCode
 ########################################################################

e2e/scripts/vega_lite_chart.py

@@ -87,8 +87,8 @@
     }
 )
 
-st.write("Putting the `df` inside the spec, as inline `data` (different notation):")
-st.write("**This fails now, but not a big deal. It's a weird notation.**")
+#st.write("Putting the `df` inside the spec, as inline `data` (different notation):")
+#This fails now, but not a big deal. It's a weird notation.
 
 # st.vega_lite_chart({
 #     'data': {'values': df},

e2e/specs/dataframe_dimension_spec.spec.ts

@@ -18,11 +18,12 @@
 /// <reference types="cypress" />
 
 describe("Dataframes with different sizes", () => {
+  // All widths are 2px smaller than actual width we set, due to 1px border.
   const expected = [
-    { width: "695px", height: "300px" },
-    { width: "247px", height: "150px" },
-    { width: "247px", height: "300px" },
-    { width: "695px", height: "150px" }
+    { width: "696px", height: "300px" },
+    { width: "248px", height: "150px" },
+    { width: "248px", height: "300px" },
+    { width: "696px", height: "150px" }
   ];
   before(() => {
     cy.visit("http://localhost:3000/");

e2e/specs/message_deduping.spec.ts

@@ -23,6 +23,13 @@ describe("message_deduping", () => {
   });
 
   it("displays two dataframes", () => {
-    cy.get(".element-container > .stDataFrame").should("have.length", 2);
+    // Hack to make Cypress wait a little bit before searching for stDataFrame.
+    // (This waits for 2 suspense placeholders and 1 st.write() to show)
+    cy.get(".element-container .stText").should("have.length", 3);
+
+    cy.get(".element-container > .fullScreenFrame > .stDataFrame").should(
+      "have.length",
+      2
+    );
   });
 });