Merge branch 'master' into enable-user-select-perspective

quiltdata · Jun 13, 2023 · 4160738 · 4160738
2 parents 9ec4e39 + 4b268b3
commit 4160738
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 16 deletions.
diff --git a/catalog/app/components/JsonEditor/JsonEditor.tsx b/catalog/app/components/JsonEditor/JsonEditor.tsx
@@ -13,6 +13,14 @@ import Column from './Column'
 import State, { StateRenderProps } from './State'
 import { JsonValue, RowData, ValidationErrors } from './constants'
 
+const useEmptyStateCaseStyles = M.makeStyles((t) => ({
+  icon: {
+    position: 'absolute',
+    right: t.spacing(2),
+    top: t.spacing(2),
+  },
+}))
+
 interface EmptyStateCaseProps {
   children: React.ReactNode
   className: string
@@ -21,6 +29,8 @@ interface EmptyStateCaseProps {
 }
 
 function EmptyStateCase({ children, className, title, video }: EmptyStateCaseProps) {
+  const classes = useEmptyStateCaseStyles()
+  const [expanded, setExpanded] = React.useState(false)
   const videoRef = React.useRef<HTMLVideoElement | null>(null)
   const togglePlayback = React.useCallback(() => {
     const el = videoRef?.current
@@ -30,21 +40,29 @@ function EmptyStateCase({ children, className, title, video }: EmptyStateCasePro
       el?.pause()
     }
   }, [videoRef])
+  const toggle = React.useCallback(() => setExpanded((x) => !x), [])
   return (
-    <M.Card className={className}>
-      <M.CardContent>
-        <M.Typography variant="h5">{title}</M.Typography>
-        <M.Typography variant="body1">{children}</M.Typography>
-        <video
-          ref={videoRef}
-          src={video}
-          width="100%"
-          autoPlay
-          loop
-          onClick={togglePlayback}
-        />
-      </M.CardContent>
-    </M.Card>
+    <div className={className}>
+      <M.Grow in={expanded}>
+        <M.Card>
+          <M.CardContent>
+            <M.Typography variant="h5">{title}</M.Typography>
+            <M.Typography variant="body1">{children}</M.Typography>
+            <video
+              ref={videoRef}
+              src={video}
+              width="100%"
+              autoPlay
+              loop
+              onClick={togglePlayback}
+            />
+          </M.CardContent>
+        </M.Card>
+      </M.Grow>
+      <M.IconButton onClick={toggle} size="small" className={classes.icon}>
+        <M.Icon fontSize="small">{expanded ? 'close' : 'help_outline'}</M.Icon>
+      </M.IconButton>
+    </div>
   )
 }
 

diff --git a/docs/Catalog/VisualizationDashboards.md b/docs/Catalog/VisualizationDashboards.md
@@ -406,8 +406,8 @@ All filters and columns will be restored:
       {
         "name": "perspective",
         "config": {
-          "columns": ["name", "value"],
-          "group_by": ["value"],
+          "columns": ["YOUR_COLUMN_0", "YOUR_COLUMN_1"],
+          "group_by": ["YOUR_COLUMN_1"],
           "settings": true,
           "theme": "Material Light Mono"
         }