Skip to content
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.

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

HTML frontend #178

Merged
merged 3 commits into from
Nov 28, 2024
Merged

HTML frontend #178

merged 3 commits into from
Nov 28, 2024

Conversation

Hoshi-Okami
Copy link
Collaborator

Fixes #175

what has changed: updated the frontend to display and link HTML files in a new browser tab.

why was it changed: It provides users with direct access to HTML reports to enhance the usability of the dashboard.

how was it changed: I adjusted the getFolderContents to include htmlFiles when fetching data and updated ReportDashboard.jsx to include clickable links for each HTML file in the AccordionDetails section.

Copy link
Member

@mohamdlog mohamdlog left a comment

Choose a reason for hiding this comment

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

Good work with integrating the interactable HTMLs. Updating the backend to handle nested paths and ensuring the URLs work properly was spot on, and the way you added the new section on the frontend feels seamless and consistent with the rest of the design.

Comment on lines +1357 to +1383
<Box sx={{ display: 'flex', flexWrap: 'wrap', m: 1 }}>
<Paper elevation={3} sx={{ margin: '25px', padding: 2, width: '100%' }}>
<Typography variant="h5" component="h2" sx={{ fontFamily: 'sans-serif', fontWeight: 700 }}>
Interactable HTMLs
</Typography>
<ul>
{resp.htmlFiles && resp.htmlFiles.length > 0 ? (
resp.htmlFiles.map((htmlFile, index) => (
<li key={index}>
<Link
href={`http://localhost:5000${encodeURI(htmlFile.url)}`}
target="_blank"
rel="noopener noreferrer"
sx={{ textDecoration: 'none', color: 'blue' }}
>
{htmlFile.name}
</Link>
</li>
))
) : (
<Typography variant="body1" sx={{ fontStyle: 'italic' }}>
No HTML files available for interaction.
</Typography>
)}
</ul>
</Paper>
</Box>
Copy link
Member

Choose a reason for hiding this comment

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

This looks good. It's consistent with the other details on the frontend, and has its own "Interactable HTMLs" section.

Comment on lines +148 to +157
# After processing all blobs, collect HTML files at any depth
html_blobs = bucket.list_blobs(prefix=prefix)
for html_blob in html_blobs:
if html_blob.name.endswith('.html'):
file_name = os.path.basename(html_blob.name)
# Create a proxy URL for the HTML file
proxy_url = f"/serve-html/{folder_name}/{file_name}"
relative_path = os.path.relpath(html_blob.name, prefix)
# Ensure URL is properly formatted
proxy_url = f"/serve-html/{folder_name}/{relative_path.replace(os.sep, '/')}"
result["htmlFiles"].append({
"name": file_name,
"name": os.path.basename(html_blob.name),
"path": relative_path.replace(os.sep, '/'), # Relative path within the folder
Copy link
Member

Choose a reason for hiding this comment

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

This is needed for HTML's in nested files. Looks good.

@mohamdlog mohamdlog merged commit 8f4de86 into main Nov 28, 2024
2 checks passed
@mohamdlog mohamdlog deleted the issue175 branch November 29, 2024 08:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add Support for Displaying and Linking Interactive HTML Files
2 participants