feat: add encode size comparison widget

PHILLIPS71 · May 11, 2024 · d5f813e · d5f813e
1 parent 97a5606
commit d5f813e
Show file tree

Hide file tree

Showing 5 changed files with 354 additions and 7 deletions.
diff --git a/app/package.json b/app/package.json
@@ -44,6 +44,7 @@
     "react-intersection-observer": "^9.10.2",
     "react-relay": "^16.2.0",
     "react-syntax-highlighter": "^15.5.0",
+    "recharts": "^2.12.7",
     "relay-runtime": "^16.2.0",
     "tailwindcss": "^3.4.3",
     "zod": "^3.23.6"

diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
diff --git a/app/src/components/interfaces/dashboard/encode-dialog/EncodeDialog.tsx b/app/src/components/interfaces/dashboard/encode-dialog/EncodeDialog.tsx
@@ -27,6 +27,7 @@ const FRAGMENT = graphql`
     }
     ...EncodeStatusBadgeFragment
     ...EncodeScriptPanelFragment
+    ...EncodeAnalyticsPanelFragment
   }
 `
 
@@ -57,7 +58,7 @@ const EncodeDialog: React.FC<EncodeDialogProps> = ({ children, $key }) => {
         return <EncodeDialogScript $key={data} />
 
       case EncodeDialogPanel.ANALYTICS:
-        return <EncodeAnalyticsPanel />
+        return <EncodeAnalyticsPanel $key={data} />
 
       default:
         throw new Error(`unexpected panel value ${context.panel} was provided.`)
@@ -86,7 +87,14 @@ const EncodeDialog: React.FC<EncodeDialogProps> = ({ children, $key }) => {
                     </div>
 
                     <div className="flex items-center gap-3">
-                      <Button color="transparent" size="xs" onPress={close}>
+                      <Button
+                        color="transparent"
+                        size="xs"
+                        onPress={() => {
+                          context.setPanel(EncodeDialogPanel.SCRIPT)
+                          close()
+                        }}
+                      >
                         <IconX size={16} strokeWidth={1} />
                       </Button>
                     </div>