Display more details. (#4305)

## Motivation

Currently only a few fields (from the header, body or messages) are
stored in a denormalized way in a database – ie they are stored in
dedicated fields – while the whole block is stored as a blob data. We
want to show more details to user, this could be done in one of the two
ways:
1. load the blob, deserialize in frontend
2. store in denormalized way and load directly in frontend

## Proposal

Implement the approach `#2` – add more fields to database tables and
store block's details directly there. Also, use the new data to show on
the frontend of the explorer.


Some refactoring was done as part of the PR:
- add a dedicated type `ExpandableSection` that shows only the metadata
of the section and expands on click to show more
- add `CopyableHash` to present a text that can be copied.

## Test Plan

Manual

## Release Plan

- Nothing to do / These changes follow the usual release cycle.

## Links

- [reviewer
checklist](https://github.com/linera-io/linera-protocol/blob/main/CONTRIBUTING.md#reviewer-checklist)

Author: deuszx

.github/workflows/rust.yml

@@ -181,7 +181,7 @@ jobs:
     needs: changed-files
     if: needs.changed-files.outputs.should-run == 'true'
     runs-on: ubuntu-latest
-    timeout-minutes: 30
+    timeout-minutes: 40
 
     steps:
     - uses: actions/checkout@v4

Cargo.lock

@@ -945,6 +945,17 @@ pub enum MessageKind {
     Bouncing,
 }
 
+impl Display for MessageKind {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            MessageKind::Simple => write!(f, "Simple"),
+            MessageKind::Protected => write!(f, "Protected"),
+            MessageKind::Tracked => write!(f, "Tracked"),
+            MessageKind::Bouncing => write!(f, "Bouncing"),
+        }
+    }
+}
+
 /// A posted message together with routing information.
 #[derive(Debug, PartialEq, Eq, Hash, Clone, Serialize, Deserialize, SimpleObject)]
 pub struct OutgoingMessage {

linera-execution/src/lib.rs

@@ -8,6 +8,7 @@ mod tests;
 
 use std::{
     collections::{BTreeMap, BTreeSet, HashSet},
+    fmt::{Display, Formatter},
     mem,
 };
 
@@ -269,6 +270,15 @@ impl Recipient {
     }
 }
 
+impl Display for Recipient {
+    fn fmt(&self, f: &mut Formatter) -> std::fmt::Result {
+        match self {
+            Recipient::Burn => write!(f, "burn"),
+            Recipient::Account(account) => write!(f, "{}", account),
+        }
+    }
+}
+
 impl From<ChainId> for Recipient {
     fn from(chain_id: ChainId) -> Self {
         Recipient::chain(chain_id)

linera-execution/src/system.rs

@@ -60,16 +60,105 @@ export class BlockchainDatabase {
     return stmt.all(blockHash);
   }
 
-  // Get posted messages for a bundle
+  // Get posted messages for a bundle with SystemMessage fields
   getPostedMessages(bundleId) {
     const stmt = this.db.prepare(`
-      SELECT * FROM posted_messages 
+      SELECT *, system_target, system_amount, system_source, system_owner, system_recipient,
+             message_type, application_id, system_message_type
+      FROM posted_messages 
       WHERE bundle_id = ? 
       ORDER BY message_index ASC
     `);
     return stmt.all(bundleId);
   }
 
+  // Get block with all bundles and their messages in a single query
+  getBlockWithBundlesAndMessages(blockHash) {
+    const stmt = this.db.prepare(`
+      SELECT 
+        ib.id as bundle_id,
+        ib.bundle_index,
+        ib.origin_chain_id,
+        ib.action,
+        ib.source_height,
+        ib.source_timestamp,
+        ib.source_cert_hash,
+        ib.transaction_index as bundle_transaction_index,
+        ib.created_at as bundle_created_at,
+        pm.id as message_id,
+        pm.message_index,
+        pm.authenticated_signer,
+        pm.grant_amount,
+        pm.refund_grant_to,
+        pm.message_kind,
+        pm.message_type,
+        pm.application_id,
+        pm.system_message_type,
+        pm.system_target,
+        pm.system_amount,
+        pm.system_source,
+        pm.system_owner,
+        pm.system_recipient,
+        pm.message_data,
+        pm.created_at as message_created_at
+      FROM incoming_bundles ib
+      LEFT JOIN posted_messages pm ON ib.id = pm.bundle_id
+      WHERE ib.block_hash = ?
+      ORDER BY ib.bundle_index, pm.message_index
+    `);
+    
+    const rows = stmt.all(blockHash);
+    
+    // Group results by bundle
+    const bundlesMap = new Map();
+    
+    for (const row of rows) {
+      const bundleId = row.bundle_id;
+      
+      if (!bundlesMap.has(bundleId)) {
+        bundlesMap.set(bundleId, {
+          id: bundleId,
+          block_hash: blockHash,
+          bundle_index: row.bundle_index,
+          origin_chain_id: row.origin_chain_id,
+          action: row.action,
+          source_height: row.source_height,
+          source_timestamp: row.source_timestamp,
+          source_cert_hash: row.source_cert_hash,
+          transaction_index: row.bundle_transaction_index,
+          created_at: row.bundle_created_at,
+          messages: []
+        });
+      }
+      
+      // Add message if it exists (LEFT JOIN may produce NULL messages)
+      if (row.message_id) {
+        const bundle = bundlesMap.get(bundleId);
+        bundle.messages.push({
+          id: row.message_id,
+          bundle_id: bundleId,
+          message_index: row.message_index,
+          authenticated_signer: row.authenticated_signer,
+          grant_amount: row.grant_amount,
+          refund_grant_to: row.refund_grant_to,
+          message_kind: row.message_kind,
+          message_type: row.message_type,
+          application_id: row.application_id,
+          system_message_type: row.system_message_type,
+          system_target: row.system_target,
+          system_amount: row.system_amount,
+          system_source: row.system_source,
+          system_owner: row.system_owner,
+          system_recipient: row.system_recipient,
+          message_data: row.message_data ? Buffer.from(row.message_data).toString('base64') : null,
+          created_at: row.message_created_at
+        });
+      }
+    }
+    
+    return Array.from(bundlesMap.values());
+  }
+
   // Get all unique chains with stats
   getChains() {
     const stmt = this.db.prepare(`
@@ -104,6 +193,71 @@ export class BlockchainDatabase {
     return result.count;
   }
 
+  // Get operations for a block
+  getOperations(blockHash) {
+    const stmt = this.db.prepare(`
+      SELECT * FROM operations 
+      WHERE block_hash = ? 
+      ORDER BY operation_index ASC
+    `);
+    const operations = stmt.all(blockHash);
+    
+    // Convert binary data to base64 for JSON transport
+    return operations.map(op => ({
+      ...op,
+      data: op.data ? Buffer.from(op.data).toString('base64') : null
+    }));
+  }
+
+  // Get messages for a block
+  getMessages(blockHash) {
+    const stmt = this.db.prepare(`
+      SELECT *, system_target, system_amount, system_source, system_owner, system_recipient FROM outgoing_messages 
+      WHERE block_hash = ? 
+      ORDER BY transaction_index ASC, message_index ASC
+    `);
+    const messages = stmt.all(blockHash);
+    
+    // Convert binary data to base64 for JSON transport
+    return messages.map(msg => ({
+      ...msg,
+      data: msg.data ? Buffer.from(msg.data).toString('base64') : null
+    }));
+  }
+
+  // Get events for a block
+  getEvents(blockHash) {
+    const stmt = this.db.prepare(`
+      SELECT * FROM events 
+      WHERE block_hash = ? 
+      ORDER BY transaction_index ASC, event_index ASC
+    `);
+    const events = stmt.all(blockHash);
+    
+    // Convert binary data to base64 for JSON transport
+    return events.map(event => ({
+      ...event,
+      data: event.data ? Buffer.from(event.data).toString('base64') : null
+    }));
+  }
+
+  // Get oracle responses for a block
+  getOracleResponses(blockHash) {
+    const stmt = this.db.prepare(`
+      SELECT * FROM oracle_responses 
+      WHERE block_hash = ? 
+      ORDER BY transaction_index ASC, response_index ASC
+    `);
+    const responses = stmt.all(blockHash);
+    
+    // Convert binary data to base64 for JSON transport
+    return responses.map(resp => ({
+      ...resp,
+      data: resp.data ? Buffer.from(resp.data).toString('base64') : null
+    }));
+  }
+
+
   close() {
     this.db.close();
   }

linera-explorer-new/server/database.js

@@ -75,6 +75,30 @@ app.get('/api/blocks/:hash/bundles', (req, res) => {
   }
 });
 
+// Get bundles with messages - optimized single query
+app.get('/api/blocks/:hash/bundles-with-messages', (req, res) => {
+  try {
+    const { hash } = req.params;
+    const bundlesWithMessages = db.getBlockWithBundlesAndMessages(hash);
+    
+    // Convert binary data to base64 for JSON transport
+    bundlesWithMessages.forEach(bundle => {
+      bundle.messages.forEach(message => {
+        if (message.authenticated_signer) {
+          message.authenticated_signer = Buffer.from(message.authenticated_signer).toString('base64');
+        }
+        if (message.refund_grant_to) {
+          message.refund_grant_to = Buffer.from(message.refund_grant_to).toString('base64');
+        }
+      });
+    });
+    
+    res.json(bundlesWithMessages);
+  } catch (error) {
+    handleError(res, error, 'Failed to fetch bundles with messages');
+  }
+});
+
 // Get posted messages for a bundle
 app.get('/api/bundles/:id/messages', (req, res) => {
   try {
@@ -156,6 +180,51 @@ app.get('/api/stats', (req, res) => {
   }
 });
 
+// Get operations for a block
+app.get('/api/blocks/:hash/operations', (req, res) => {
+  try {
+    const { hash } = req.params;
+    const operations = db.getOperations(hash);
+    res.json(operations);
+  } catch (error) {
+    handleError(res, error, 'Failed to fetch operations');
+  }
+});
+
+// Get messages for a block
+app.get('/api/blocks/:hash/messages', (req, res) => {
+  try {
+    const { hash } = req.params;
+    const messages = db.getMessages(hash);
+    res.json(messages);
+  } catch (error) {
+    handleError(res, error, 'Failed to fetch messages');
+  }
+});
+
+// Get events for a block
+app.get('/api/blocks/:hash/events', (req, res) => {
+  try {
+    const { hash } = req.params;
+    const events = db.getEvents(hash);
+    res.json(events);
+  } catch (error) {
+    handleError(res, error, 'Failed to fetch events');
+  }
+});
+
+// Get oracle responses for a block
+app.get('/api/blocks/:hash/oracle-responses', (req, res) => {
+  try {
+    const { hash } = req.params;
+    const oracleResponses = db.getOracleResponses(hash);
+    res.json(oracleResponses);
+  } catch (error) {
+    handleError(res, error, 'Failed to fetch oracle responses');
+  }
+});
+
+
 // Health check
 app.get('/api/health', (req, res) => {
   res.json({ status: 'OK', timestamp: new Date().toISOString() });

linera-explorer-new/server/index.js

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+
+interface BinaryDataSectionProps {
+  data: Uint8Array;
+  title: string;
+  maxDisplayBytes?: number;
+  className?: string;
+}
+
+export const BinaryDataSection: React.FC<BinaryDataSectionProps> = ({
+  data,
+  title,
+  maxDisplayBytes = 400,
+  className = ''
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const formatBytes = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const copyToClipboard = async () => {
+    try {
+      const hexString = Array.from(data).map(byte => byte.toString(16).padStart(2, '0')).join('');
+      await navigator.clipboard.writeText(hexString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy binary data: ', err);
+    }
+  };
+
+  const displayData = data.slice(0, maxDisplayBytes);
+  const hexString = Array.from(displayData)
+    .map(byte => byte.toString(16).padStart(2, '0'))
+    .join(' ')
+    .replace(/(.{48})/g, '$1\n'); // Add line breaks every 48 characters (16 bytes)
+
+  return (
+    <div className={`mt-3 pt-3 border-t border-linera-border/30 ${className}`}>
+      <span className="text-sm text-linera-gray-light block mb-2">{title}</span>
+      <div className="bg-linera-darker/50 rounded-lg border border-linera-border/50 p-4 font-mono text-xs overflow-x-auto">
+        <div className="text-linera-gray-light mb-4 flex items-center justify-between">
+          <div>
+            <span>Size: {formatBytes(data.length)}</span>
+            <span className="mx-2">•</span>
+            <span>Type: Binary Data</span>
+          </div>
+          <button
+            onClick={copyToClipboard}
+            className="text-linera-gray-medium hover:text-linera-red transition-colors"
+            title={copied ? 'Copied!' : 'Copy to clipboard'}
+          >
+            {copied ? (
+              <Check className="w-4 h-4 text-green-400" />
+            ) : (
+              <Copy className="w-4 h-4" />
+            )}
+          </button>
+        </div>
+        <div className="text-linera-gray-light leading-relaxed max-h-32 overflow-y-auto">
+          {hexString}
+          {data.length > maxDisplayBytes && (
+            <div className="text-linera-gray-medium mt-4">
+              ... and {data.length - maxDisplayBytes} more bytes
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};