-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3c2c5ab
commit 1b902dd
Showing
7 changed files
with
817 additions
and
84 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,219 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Interactive Workshop Flowchart</title> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.19.0/cytoscape.min.js"></script> | ||
| <link rel="stylesheet" href="https://bootswatch.com/4/litera/bootstrap.min.css"> | ||
| <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script> | ||
| <link rel="stylesheet" href="static/stylesheets/style.css"> | ||
| <style> | ||
| #cy { | ||
| width: 100%; | ||
| height: 600px; | ||
| border: 1px solid #ccc; | ||
| } | ||
| #prerequisites { | ||
| margin-top: 20px; | ||
| padding: 10px; | ||
| text-align: center; | ||
| background-color: #2C3E50; | ||
| color: #FFFFFF; | ||
| font-family: 'Roboto', sans-serif; | ||
| font-size: 15px; | ||
| } | ||
| h2 { | ||
| text-align: center; | ||
| margin-bottom: 20px; | ||
| font-family: 'Roboto', sans-serif; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body class="w-100 h-100"> | ||
| <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top borderless"> | ||
| <a class="navbar-brand" href="index.html">D-Lab Workshops</a> | ||
| <button class="navbar-toggler borderless" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="collapse navbar-collapse" id="navbarColor01"> | ||
| <ul class="navbar-nav ml-auto"> | ||
| <li class="nav-item"><a class="nav-link active" href="index.html">Home</a></li> | ||
| <li class="nav-item"><a class="nav-link" href="library.html">Library</a></li> | ||
| <li class="nav-item"><a class="nav-link" target="_blank" href="https://dlab.berkeley.edu/">About D-Lab</a></li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <h2 style="text-align: center; padding-top: 70px;">D-Lab R Workshops</h2> | ||
|
|
||
| <div style="display: flex; justify-content: center; align-items: center;"> | ||
| <div id="cy"></div> | ||
| </div> | ||
|
|
||
| <div id="prerequisites">Click on a workshop to see its prerequisites.</div> | ||
|
|
||
| <div style="text-align: center; padding-top: 20px;"> | ||
| <a href="r.html"><button type="button" class="btn btn-warning">Return to default view</button></a> | ||
| <a href="https://dlab.berkeley.edu/training/upcoming-workshops"><button type="button" class="btn btn-info">Book a workshop!</button></a> | ||
| </div> | ||
|
|
||
| <script> | ||
| const elements = [ | ||
| { data: { id: 'A', name: 'R Fundamentals' }, position: { x: 400, y: 0 } }, | ||
| { data: { id: 'B', name: 'R Data Wrangling and Manipulation' }, position: { x: 400, y: 200 } }, | ||
| { data: { id: 'C', name: 'R Machine Learning' }, position: { x: 200, y: 400 } }, | ||
| { data: { id: 'D', name: 'R Deep Learning' }, position: { x: 400, y: 400 } }, | ||
| { data: { id: 'E', name: 'R Geospatial Fundamentals' }, position: { x: 600, y: 400 } }, | ||
| { data: { source: 'A', target: 'B' } }, | ||
| { data: { source: 'B', target: 'C' } }, | ||
| { data: { source: 'B', target: 'D' } }, | ||
| { data: { source: 'B', target: 'E' } } | ||
| ]; | ||
|
|
||
|
|
||
| const cy = cytoscape({ | ||
| container: document.getElementById('cy'), | ||
| elements: elements, | ||
| style: [ | ||
| { | ||
| selector: 'node', | ||
| style: { | ||
| 'background-color': '#3498DB', | ||
| 'label': 'data(name)', | ||
| 'text-valign': 'center', | ||
| 'text-halign': 'center', | ||
| 'color': '#fff', | ||
| 'width': '50px', | ||
| 'height': '50px', | ||
| 'font-size': '16px', | ||
| 'text-outline-width': 2, | ||
| 'text-outline-color': '#2C3E50', | ||
| 'transition-property': 'background-color, width, height, font-size', | ||
| 'transition-duration': '0.2s' | ||
| } | ||
| }, | ||
| { | ||
| selector: 'node:selected', | ||
| style: { | ||
| 'background-color': '#E74C3C' | ||
| } | ||
| }, | ||
| { | ||
| selector: 'node.highlighted', | ||
| style: { | ||
| 'font-size': '24px' // Change the font size to make it larger | ||
| } | ||
| }, | ||
| { | ||
| selector: 'node.hover', | ||
| style: { | ||
| 'width': '80px', | ||
| 'height': '80px', | ||
| } | ||
| }, | ||
| { | ||
| selector: 'node.clicked', | ||
| style: { | ||
| 'background-color': '#2ECC71' | ||
| } | ||
| }, | ||
| { | ||
| selector: '.prerequisite', | ||
| style: { | ||
| 'background-color': '#ffcc66' | ||
| } | ||
| }, | ||
| { | ||
| selector: 'edge', | ||
| style: { | ||
| 'width': 2, | ||
| 'line-color': '#ccc', | ||
| 'target-arrow-color': '#ccc', | ||
| 'target-arrow-shape': 'triangle', | ||
| 'curve-style': 'bezier' | ||
| } | ||
| }, | ||
| { | ||
| selector: 'edge.highlighted', | ||
| style: { | ||
| 'line-color': '#ff6666', | ||
| 'target-arrow-color': '#ff6666', | ||
| 'width': 3 | ||
| } | ||
| }, | ||
| { | ||
| selector: 'node.highlighted', | ||
| style: { | ||
| 'background-color': '#ff6666' | ||
| } | ||
| } | ||
| ], | ||
| layout: { | ||
| name: 'preset' | ||
| }, | ||
| userPanningEnabled: false, // Disable panning | ||
| userZoomingEnabled: false, // Disable zooming | ||
|
|
||
| }); | ||
| cy.nodes().ungrabify(); | ||
|
|
||
| // Add hover event listeners | ||
| cy.on('mouseover', 'node', function(event) { | ||
| event.target.addClass('hover'); | ||
| }); | ||
|
|
||
| cy.on('mouseout', 'node', function(event) { | ||
| event.target.removeClass('hover'); | ||
| }); | ||
|
|
||
| function findAllPrerequisites(node, prerequisites) { | ||
| let edges = node.connectedEdges(`[target="${node.id()}"]`); | ||
| edges.forEach(edge => { | ||
| let sourceNode = edge.source(); | ||
| prerequisites.push(sourceNode.data('name')); | ||
| findAllPrerequisites(sourceNode, prerequisites); | ||
| }); | ||
|
|
||
| } | ||
|
|
||
| cy.on('tap', 'node', function(evt){ | ||
| cy.$('.prerequisite').removeClass('prerequisite'); | ||
| cy.$('edge.highlighted').removeClass('highlighted'); | ||
| cy.$('node.highlighted').removeClass('highlighted'); | ||
| cy.$('node.clicked').removeClass('clicked'); // Remove any existing 'clicked' class | ||
|
|
||
| evt.target.addClass('clicked'); // Add the 'clicked' class to the clicked node | ||
|
|
||
| let prerequisites = []; | ||
| findAllPrerequisites(evt.target, prerequisites); | ||
|
|
||
| // Reverse the prerequisites list just once here | ||
| prerequisites.reverse(); | ||
|
|
||
| if(prerequisites.length > 0) { | ||
| let prerequisiteNames = prerequisites.map(name => `<span class="prerequisite-name">${name}</span>`); | ||
| document.getElementById('prerequisites').innerHTML = `Prerequisites for ${evt.target.data('name')}: ${prerequisiteNames.join(', ')}`; | ||
| } else { | ||
| document.getElementById('prerequisites').textContent = `${evt.target.data('name')} has no prerequisites.`; | ||
| } | ||
|
|
||
|
|
||
| let startNode = evt.target; | ||
|
|
||
| function dfs(node) { | ||
| let incomingEdges = node.connectedEdges(`[target="${node.id()}"]`); | ||
| incomingEdges.forEach(edge => { | ||
| edge.addClass('highlighted'); | ||
| let sourceNode = edge.source(); | ||
| sourceNode.addClass('highlighted'); | ||
| dfs(sourceNode); | ||
| }); | ||
| } | ||
|
|
||
| dfs(startNode); | ||
|
|
||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
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
Oops, something went wrong.