-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #96 from fgnt/viz_improvements
Improve Visualization
- Loading branch information
Showing
11 changed files
with
683 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,151 @@ | ||
|
|
||
| <!DOCTYPE html> | ||
| <html style="height:99%; margin: 0;"> | ||
| <html style="height: 100%; margin: 0;"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>MeetEval: Side by side view</title> | ||
| <style> | ||
| .container { | ||
| display: flex; | ||
| max-width: 100%; | ||
| white-space: nowrap; /* Prevent wrapping and hide overflowing content. */ | ||
| overflow-x: auto; /* Enable horizontal scrolling */ | ||
| white-space: nowrap; /* Prevent line breaks within the container */ | ||
| height: 100%; | ||
| width:100%; | ||
| flex-direction: column; | ||
|
|
||
| } | ||
| .breadcrumb-container { | ||
| display: inline-flex; | ||
| justify-content: flex-end; | ||
| overflow: hidden; | ||
| max-width: min-content; | ||
| } | ||
| .breadcrumb { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #f9f9f9; | ||
| align-items: center; | ||
| padding: 2px 10px; | ||
| background-color: #fff; | ||
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
| border-radius: 6px; | ||
| font-size: 14px; /* Smaller font size */ | ||
| } | ||
| .breadcrumb a { | ||
| color: #3498db; | ||
| text-decoration: none; | ||
| padding: 4px 8px; /* Reduced padding for tighter layout */ | ||
| border-radius: 4px; | ||
| transition: background-color 0.3s; | ||
| } | ||
| .breadcrumb a:hover { | ||
| background-color: #3498db; | ||
| color: #fff; | ||
| } | ||
| .breadcrumb span { | ||
| margin: 0 3px; /* Smaller spacing between arrows and links */ | ||
| color: #555; | ||
| } | ||
|
|
||
| iframe { | ||
| width: 100%; | ||
| flex-grow: 1; | ||
| border: none; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body style="width: 100%; height: 100%; margin: 0; display: flex;"> | ||
| </body> | ||
|
|
||
| <script> | ||
| function createBreadcrumb(url, container, iframe) { | ||
| container.className = 'breadcrumb-container'; | ||
| const breadcrumbContainer = document.createElement('div'); | ||
| breadcrumbContainer.className = 'breadcrumb'; | ||
| container.append(breadcrumbContainer); | ||
| const urlObj = new URL(url); // Create a URL object | ||
| const parts = urlObj.pathname.split('/').filter(Boolean); // Get path parts and filter out empty strings | ||
| let accumulatedPath = urlObj.origin; // Start with the base URL (origin) | ||
|
|
||
| // Add 'Home' link | ||
| breadcrumbContainer.innerHTML += `<a href="${accumulatedPath}">/</a>`; | ||
|
|
||
| // Add a click event listener to the breadcrumb container | ||
| breadcrumbContainer.addEventListener('click', function(event) { | ||
| // Check if the clicked element is a link | ||
| if (event.target.tagName === 'A') { | ||
| event.preventDefault(); // Prevent default link navigation | ||
|
|
||
| const newSrc = event.target.getAttribute('href'); // Get the href of the clicked link | ||
|
|
||
| iframe.src = newSrc; // Change the iframe's source | ||
| } | ||
| }); | ||
|
|
||
| // Loop through each folder and create a link | ||
| parts.forEach((part, index) => { | ||
| accumulatedPath += `/${part}`; | ||
| breadcrumbContainer.innerHTML += `<span>»</span><a href="${accumulatedPath}">${part}</a>`; | ||
| }); | ||
| } | ||
|
|
||
| var urlParams = new URLSearchParams(window.location.search); | ||
| const iframes = [] | ||
| const breadcrumbs = [] | ||
| const body = document.getElementsByTagName('body')[0]; | ||
| var sync = true; | ||
| const new_url_params = []; | ||
| const other_new_url_params = {}; | ||
| urlParams.forEach((value, key) => { | ||
| if (!value) { | ||
| // Value is none when no key is given (e.g., ?systemA&systemB vs ?sync=True) | ||
| value = key; | ||
|
|
||
| // Preprocess file path | ||
| if (!value.endsWith('.html') && !value.endsWith('.htm')) { | ||
| value += '.html'; | ||
| } | ||
| const iframe = document.createElement('iframe'); | ||
| iframe.src = value; | ||
| iframe.width = "100%"; | ||
| iframe.height = "100%"; | ||
| iframe.style.border = "none"; | ||
| iframes.push(iframe); | ||
| const div = document.createElement('div') | ||
| div.style = "flex-grow: 1;"; | ||
| div.append(iframe) | ||
| div.className = 'container'; | ||
| const breadcrumbContainer = document.createElement('div'); | ||
| div.append(breadcrumbContainer); | ||
| breadcrumbs.push(breadcrumbContainer); | ||
| console.log(value); | ||
| createBreadcrumb('file://' + value, breadcrumbContainer, iframe); | ||
| div.append(iframe); | ||
| body.append(div); | ||
| new_url_params.push(value); | ||
| } else if (key === "sync") { | ||
| sync = value === "true"; | ||
| other_new_url_params[key] = value; | ||
| } | ||
| }) | ||
| var url = new URL(window.location.href); | ||
| url.search = new_url_params.join('&') + '&' + new URLSearchParams(other_new_url_params).toString(); | ||
| history.replaceState(null, null, url); | ||
| console.log(url.searchParams) | ||
|
|
||
| if (sync) { | ||
| window.addEventListener("message", event => { | ||
| iframes.forEach(iframe => { | ||
| if (iframe.contentWindow !== event.source) { | ||
| iframe.contentWindow.postMessage(event.data, '*'); | ||
| } | ||
| }) | ||
| }) | ||
| } | ||
| window.addEventListener("message", event => { | ||
| if (event.data.type === 'url') { | ||
| // This is the only way to get the location of the page in the iframe | ||
| // We can't access iframe.contentWindow.location.href directly due to CORS | ||
| // This is also the reason why the breadcrumbs and URL are not updated | ||
| // when navigating the directory structure of the iframe | ||
| let index = iframes.findIndex(iframe => iframe.contentWindow === event.source); | ||
| new_url_params[index] = event.data.url.replace('file://', ''); | ||
| breadcrumbs[index].innerHTML = ''; | ||
| createBreadcrumb(event.data.url, breadcrumbs[index], iframes[index]); | ||
| var url = new URL(window.location.href); | ||
| url.search = new_url_params.join('&') + '&' + new URLSearchParams(other_new_url_params).toString(); | ||
| history.replaceState(null, null, url); | ||
| } else if (sync) { | ||
| iframes.forEach(iframe => { | ||
| if (iframe.contentWindow !== event.source) { | ||
| iframe.contentWindow.postMessage(event.data, '*'); | ||
| } | ||
| }) | ||
| } | ||
| }) | ||
| </script> | ||
| </html> |
Oops, something went wrong.