feat:

--ADDED INDEX SIZE UI
	--ADDED LARGES TABLES UI
	--ADDED TUPLE ACTIVITY UI

src/App.tsx

@@ -4,8 +4,11 @@ import './App.css'
 import NodeConnections from './NodeConnections'
 import NodeActiveConnections from './NodeActiveConnections'
 import NodePerformance from './NodePerformance'
+import NodeTupleActivity from './NodeTupleActivity'
 import NodeLocksDeadlocks from './NodeLocksDeadlocks'
 import NodeDatabaseSize from './NodeDatabaseSize'
+import NodeIndexSize from './NodeIndexSize'
+import NodeLargestTables from './NodeLargestTables'
 import NodeHardware from './NodeHardware'
 import ClusterNodeCard from './ClusterNodeCard'
 
@@ -269,13 +272,14 @@ function App() {
       <Route path="/nodes" element={<Workspace page="nodes" />} />
       <Route path="/clusters" element={<Workspace page="clusters" />} />
       <Route path="/clusters/:clusterId" element={<Workspace page="cluster-details" />} />
+      <Route path="/clusters/:clusterId/nodes/:nodeId/largest-tables" element={<Workspace page="largest-tables" />} />
       <Route path="/clusters/:clusterId/nodes/:nodeId" element={<Workspace page="node-details" />} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   )
 }
 
-function Workspace({ page: activePage }: { page: PageId | 'node-details' }) {
+function Workspace({ page: activePage }: { page: PageId | 'node-details' | 'largest-tables' }) {
   const navigate = useNavigate()
   const { clusterId, nodeId } = useParams()
   const isClusterPage = Boolean(useMatch('/clusters/*'))
@@ -634,6 +638,11 @@ function Workspace({ page: activePage }: { page: PageId | 'node-details' }) {
                   nodeId={nodeId}
                   nodeName={clusterDetails.nodes.find((node) => node.uuid === nodeId)!.node_name}
                 />
+                <NodeTupleActivity
+                  key={`tuple-activity/${clusterId}/${nodeId}`}
+                  nodeId={nodeId}
+                  nodeName={clusterDetails.nodes.find((node) => node.uuid === nodeId)!.node_name}
+                />
                 <NodeLocksDeadlocks
                   key={`locks-deadlocks/${clusterId}/${nodeId}`}
                   nodeId={nodeId}
@@ -644,11 +653,35 @@ function Workspace({ page: activePage }: { page: PageId | 'node-details' }) {
                   nodeId={nodeId}
                   nodeName={clusterDetails.nodes.find((node) => node.uuid === nodeId)!.node_name}
                 />
+                <NodeIndexSize
+                  key={`index-size/${clusterId}/${nodeId}`}
+                  nodeId={nodeId}
+                  nodeName={clusterDetails.nodes.find((node) => node.uuid === nodeId)!.node_name}
+                />
+                <NodeLargestTables
+                  key={`tables/${clusterId}/${nodeId}`}
+                  clusterId={clusterId!}
+                  nodeId={nodeId}
+                  nodeName={clusterDetails.nodes.find((node) => node.uuid === nodeId)!.node_name}
+                />
                 <NodeConnections key={`${clusterId}/${nodeId}`} nodeId={nodeId} />
               </>
             )}
           </section>
         )}
+        {activePage === 'largest-tables' && clusterDetails && (
+          <section className="content-panel">
+            {nodeId && clusterDetails.nodes.some((node) => node.uuid === nodeId) ? (
+              <NodeLargestTables
+                key={`tables-page/${clusterId}/${nodeId}`}
+                clusterId={clusterId!}
+                nodeId={nodeId}
+                nodeName={clusterDetails.nodes.find((node) => node.uuid === nodeId)!.node_name}
+                detailed
+              />
+            ) : <h1>Node not found</h1>}
+          </section>
+        )}
         {activePage === 'cluster-details' && clusterDetails && (
           <section className="content-panel" id="cluster-details">
             <div className="page-header">