Skip to content

feat: Add collapsible blob list in DA Explorer #3033

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tac0turtle merged 2 commits into from
Jan 29, 2026
Merged

feat: Add collapsible blob list in DA Explorer #3033

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4fd08a6
feat: Add collapsible blob list in DA Explorer
tac0turtle Jan 29, 2026
fd8ee60
Merge branch 'main' into feat/collapsible-blob-ids
tac0turtle Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions pkg/rpc/server/da_visualization.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -503,6 +503,8 @@ func (s *DAVisualizationServer) handleDAVisualizationHTML(w http.ResponseWriter,
switch v := items.(type) {
case []DASubmissionInfo:
return len(v)
case []string:
return len(v)
case struct {
Submissions []DASubmissionInfo
LastUpdate string
Expand All @@ -513,6 +515,15 @@ func (s *DAVisualizationServer) handleDAVisualizationHTML(w http.ResponseWriter,
return 0
}
},
"subtract": func(a, b int) int {
return a - b
},
"lt": func(a, b int) bool {
return a < b
},
"le": func(a, b int) bool {
return a <= b
},
}).Parse(daVisualizationHTML)

if err != nil {
Expand Down
42 changes: 41 additions & 1 deletion pkg/rpc/server/templates/da_visualization.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@
.method-post { background-color: #49cc90; color: white; }
.example-link { color: #007cba; text-decoration: none; font-size: 13px; }
.example-link:hover { text-decoration: underline; }
.blob-ids { margin-top: 5px; }
.blob-ids-preview { display: inline; }
.blob-ids-full { display: none; max-height: 200px; overflow-y: auto; margin-top: 5px; padding: 5px; background: #fafafa; border-radius: 3px; }
.blob-ids-full.expanded { display: block; }
.blob-toggle { background: none; border: 1px solid #007cba; color: #007cba; padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; margin-left: 5px; }
.blob-toggle:hover { background: #007cba; color: white; }
</style>
</head>
<body>
Expand Down Expand Up @@ -177,12 +183,27 @@ <h2>Recent Submissions</h2>
<td>
{{.NumBlobs}}
{{if .BlobIDs}}
{{$namespace := .Namespace}}
{{$numBlobs := len .BlobIDs}}
{{if le $numBlobs 5}}
<div class="blob-ids">
{{$namespace := .Namespace}}
{{range .BlobIDs}}
<a href="/da/blob?id={{.}}&namespace={{$namespace}}" class="blob-link blob-id" title="Click to view blob details">{{slice . 0 8}}...</a>
{{end}}
</div>
{{else}}
<div class="blob-ids">
<span class="blob-ids-preview">
{{range $i, $id := .BlobIDs}}{{if lt $i 3}}<a href="/da/blob?id={{$id}}&namespace={{$namespace}}" class="blob-link blob-id" title="Click to view blob details">{{slice $id 0 8}}...</a>{{end}}{{end}}
</span>
<button class="blob-toggle" onclick="toggleBlobs(this)">+{{subtract $numBlobs 3}} more</button>
<div class="blob-ids-full">
{{range .BlobIDs}}
<a href="/da/blob?id={{.}}&namespace={{$namespace}}" class="blob-link blob-id" title="Click to view blob details">{{slice . 0 8}}...</a>
{{end}}
</div>
</div>
{{end}}
Comment on lines +188 to +206
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The HTML for rendering a blob link is duplicated in three places within this block (for <=5 blobs, for the preview of >5 blobs, and for the full list of >5 blobs). This could lead to inconsistencies if the link format needs to be changed in the future.

To improve maintainability, you could define a reusable template for the link using {{define}}. For example, you could add this somewhere in your template file (e.g., at the top):

{{define "blobLink"}}<a href="/da/blob?id={{.id}}&namespace={{.namespace}}" class="blob-link blob-id" title="Click to view blob details">{{slice .id 0 8}}...</a>{{end}}

Then, you can replace each instance of the <a> tag with a call to this template, for example:

{{range .BlobIDs}}{{template "blobLink" (dict "id" . "namespace" $namespace)}}{{end}}

This change would centralize the blob link's HTML, making it easier to update.

{{end}}
</td>
<td>{{.BlobSize}}</td>
Expand Down Expand Up @@ -215,6 +236,25 @@ <h2>Node Information</h2>
location.reload();
}
}, 1000);

// Toggle blob list expansion
function toggleBlobs(btn) {
const container = btn.parentElement;
const fullList = container.querySelector('.blob-ids-full');
const preview = container.querySelector('.blob-ids-preview');
const isExpanded = fullList.classList.contains('expanded');

if (isExpanded) {
fullList.classList.remove('expanded');
preview.style.display = 'inline';
btn.textContent = btn.dataset.expandText;
} else {
fullList.classList.add('expanded');
preview.style.display = 'none';
btn.dataset.expandText = btn.textContent;
btn.textContent = 'Show less';
}
}
Comment on lines +241 to +257
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The toggleBlobs function can be made more concise by using classList.toggle() and simplifying the logic. The current implementation is correct, but a more streamlined version would be easier to read and maintain.

Suggested change
function toggleBlobs(btn) {
const container = btn.parentElement;
const fullList = container.querySelector('.blob-ids-full');
const preview = container.querySelector('.blob-ids-preview');
const isExpanded = fullList.classList.contains('expanded');
if (isExpanded) {
fullList.classList.remove('expanded');
preview.style.display = 'inline';
btn.textContent = btn.dataset.expandText;
} else {
fullList.classList.add('expanded');
preview.style.display = 'none';
btn.dataset.expandText = btn.textContent;
btn.textContent = 'Show less';
}
}
function toggleBlobs(btn) {
const container = btn.parentElement;
const fullList = container.querySelector('.blob-ids-full');
const preview = container.querySelector('.blob-ids-preview');
const isNowExpanded = fullList.classList.toggle('expanded');
preview.style.display = isNowExpanded ? 'none' : 'inline';
if (isNowExpanded) {
btn.dataset.expandText = btn.textContent;
btn.textContent = 'Show less';
} else {
btn.textContent = btn.dataset.expandText;
}
}

</script>
</body>
</html>
Loading