-
Notifications
You must be signed in to change notification settings - Fork 2
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
HTML frontend #178
Conversation
There was a problem hiding this 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.
<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> |
There was a problem hiding this comment.
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.
# 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 |
There was a problem hiding this comment.
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.
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.