From 7cc1a1246e1244e5b139a9e8fbc57cd0b6f9a544 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Thu, 27 Apr 2023 07:28:41 -0700
Subject: [PATCH] Process Bloks derived components

Reviewed By: lblasa

Differential Revision: D45079131

fbshipit-source-id: 363f5ed2fedc6183130ef0185f8ff5bf58579c10
---
 desktop/plugins/public/ui-debugger/components/Tree.tsx | 2 ++
 desktop/plugins/public/ui-debugger/index.tsx           | 2 +-
 desktop/plugins/public/ui-debugger/types.tsx           | 5 +++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index a84496ab8..e86274c7d 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx
@@ -394,6 +394,8 @@ function nodeIcon(node: UINode) {
     return <DecorationImage src="icons/ck-logo.png" />;
   } else if (node.tags.includes('BloksBoundTree')) {
     return <DecorationImage src="facebook/bloks-logo-orange.png" />;
+  } else if (node.tags.includes('BloksDerived')) {
+    return <DecorationImage src="facebook/bloks-logo-blue.png" />;
   }
 }
 
diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx
index 8c348f19c..b97c00e2a 100644
--- a/desktop/plugins/public/ui-debugger/index.tsx
+++ b/desktop/plugins/public/ui-debugger/index.tsx
@@ -338,7 +338,7 @@ type UIActions = {
   onSelectNode: (node?: Id) => void;
   onExpandNode: (node: Id) => void;
   onCollapseNode: (node: Id) => void;
-  setVisualiserWidth: (width: Id) => void;
+  setVisualiserWidth: (width: number) => void;
 };
 
 function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
diff --git a/desktop/plugins/public/ui-debugger/types.tsx b/desktop/plugins/public/ui-debugger/types.tsx
index 447e4fda4..e27310780 100644
--- a/desktop/plugins/public/ui-debugger/types.tsx
+++ b/desktop/plugins/public/ui-debugger/types.tsx
@@ -174,7 +174,7 @@ export type Color = {
 };
 
 export type Snapshot = string;
-export type Id = number;
+export type Id = number | string;
 
 export type MetadataId = number;
 export type TreeState = {expandedNodes: Id[]};
@@ -186,7 +186,8 @@ export type Tag =
   | 'Litho'
   | 'CK'
   | 'iOS'
-  | 'BloksBoundTree';
+  | 'BloksBoundTree'
+  | 'BloksDerived';
 
 export type Inspectable =
   | InspectableObject