cmudig · domoritz · Nov 8, 2024 · Feb 14, 2025 · Feb 14, 2025 · Feb 21, 2025
@@ -3,7 +3,14 @@
 <head>
   <title>Mosaic Example Gallery</title>
   <link href="./styles.css" rel="stylesheet">
+  <script type="module" src="../packages/graph_component/client.js"></script>
+  <script src="../packages/graph_component/dark_bright_mode.js" defer></script>
 </head>
+<!-- <head>
+  <link rel="stylesheet" href="styles.css">
+  <script type="module" src="../packages/graph_component/client.js"></script>
+  <script src="../packages/graph_component/dark_bright_mode.js" defer></script>
+</head> -->
 <body>
   <header>
     <span>
@@ -108,6 +115,14 @@
     </details>
   </header>
   <div id="view"></div>
+  <!-- New container for testing the interactive graph component -->
+  <div id="interactive-graph-container" style="margin-top: 2rem;">
+    <h2>Interactive Graph Component Test</h2>
+    <div id="graph" style="width: 1000px; height: 600px; border: 1px solid #ccc; margin-bottom: 1rem;"></div>
+    <div id="histogram" style="width: 1000px; height: 200px; border: 1px solid #ccc; margin-bottom: 1rem;"></div>
+    <div id="search" style="width: 1000px; height: 100px; border: 1px solid #ccc; margin-bottom: 1rem;"></div>
+    <div id="timeline" style="width: 1000px; height: 200px; border: 1px solid #ccc;"></div>
+  </div>
 <script type="module">
   import yaml from '../node_modules/yaml/browser/index.js';
   import { astToDOM, astToESM, clear, parseSpec, setDatabaseConnector, vg } from './setup.js';
@@ -217,6 +232,27 @@
     const url = URL.createObjectURL(blob);
     return (await import(/* @vite-ignore */ url)).default;
   }
+
+  // test for interactive graph component
+  import { CosmographClient } from '../packages/graph_component/cosmoClient.js';
+
+  function testInteractiveGraph() {
+    // Get the containers from the newly added section
+    const graphContainer = document.getElementById('graph');
+    const histogramContainer = document.getElementById('histogram');
+    const searchContainer = document.getElementById('search');
+    const timelineContainer = document.getElementById('timeline');
+
+    // Create a new CosmographClient instance
+    const client = new CosmographClient(graphContainer, histogramContainer, searchContainer, timelineContainer);
+
+    // Set the data and start the simulation
+    client.setData(nodes, links);
+    client.start();
+  }
+
+  // Run the interactive graph test
+  testInteractiveGraph();
 </script>
 </body>
 </html>
@@ -1,5 +1,30 @@
+:root {
+  --background-color: #ffffff;
+  --text-color: #000000;
+  --header-background: #ffffff;
+  --header-text-color: #111;
+  --border-color: #ccc;
+  --hover-background: #eef;
+  --table-header-background: #fff;
+  --table-row-hover: #eef;
+}
+
+.dark-mode {
+  --background-color: #222222;
+  --text-color: #ffffff;
+  --header-background: #333333;
+  --header-text-color: #ffffff;
+  --border-color: #555555;
+  --hover-background: #444;
+  --table-header-background: #333333;
+  --table-row-hover: #444;
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
 }
 
 h1, h2 { font-size: 16px; }
@@ -108,3 +133,36 @@ td {
   color: #444;
   vertical-align: top;
 }
+
+/* Button Styling */
+button {
+  padding: 10px 15px;
+  border: none;
+  cursor: pointer;
+  margin: 10px;
+  background-color: #007BFF;
+  color: white;
+  border-radius: 5px;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+/* Theme Toggle Button */
+#theme-toggle {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  background-color: #007BFF;
+  color: white;
+  padding: 10px 15px;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+  z-index: 1000;
+}
+
+#theme-toggle:hover {
+  background-color: #0056b3;
+}
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mosaic Cosmo Example</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <h2>Mosaic Cosmo Example</h2>
+    <div id="controls" style="margin-bottom: 10px; font-size: 1rem;">
+      <a href="#" id="start-link">Start</a> |
+      <a href="#" id="pause-link">Pause</a> |
+      <a href="#" id="fit-link">Fit View</a> 
+    </div>
+    <div id="app">
+        <div id="graph"></div>
+        <div id="cosmo-tooltip" style="position: absolute; display: none; background: #222; color: #fff; padding: 4px 8px; border-radius: 4px; pointer-events: none; z-index: 1000; font-size: 0.9em;"></div>
+        <div id="labels"></div>
+    </div>
+    <script type="module" src="src/main.js"></script>
+</body>
+</html>
@@ -0,0 +1,24 @@
+{
+    "name": "mosaic-cosmo-example",
+    "private": true,
+    "version": "0.12.2",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "devDependencies": {
+        "vite": "^6.0.11"
+    },
+    "dependencies": {
+        "@cosmos.gl/graph": "^2.3.0",
+        "@interacta/css-labels": "^0.1.2",
+        "@uwdata/mosaic-core": "^0.12.2",
+        "@uwdata/mosaic-sql": "^0.12.2",
+        "@uwdata/vgplot": "^0.12.2",
+        "vega": "^5.31.0",
+        "vega-embed": "^6.29.0",
+        "vega-lite": "^5.23.0"
+    }
+}
@@ -0,0 +1,12 @@
+matchId,season,date,source,target,home_clearances,home_corners,home_fouls_conceded,home_offsides,home_passes,home_possession,home_red_cards,home_shots,home_shots_on_target,home_tackles,home_touches,home_yellow_cards,away_clearances,away_corners,away_fouls_conceded,away_offsides,away_passes,away_possession,away_red_cards,away_shots,away_shots_on_target,away_tackles,away_touches,away_yellow_cards,goal_home_ft,goal_away_ft,sg_match_ft,result
+0,10/11,2010-11-01,Blackpool,West Bromwich Albion,15,8,16,2,550,65.4,0,26,5,19,740,2,25,2,13,3,280,34.6,2,14,4,15,472,3,2,1,1,win
+1,10/11,2011-04-11,Liverpool,Manchester City,16,6,6,5,527,53.1,0,21,5,31,750,1,17,2,3,0,465,46.9,0,12,2,27,687,0,3,0,3,win
+2,10/11,2010-12-13,Manchester United,Arsenal,26,5,9,3,430,46.1,0,17,6,27,635,0,33,4,17,0,499,53.9,0,11,5,20,737,4,1,0,1,win
+3,10/11,2010-09-13,Stoke City,Aston Villa,26,8,12,2,277,43.3,0,21,9,16,495,1,49,7,14,1,382,56.7,0,11,5,20,599,2,2,1,1,win
+4,10/11,2011-02-14,Fulham,Chelsea,50,4,11,1,333,37.4,0,13,5,32,576,2,21,6,13,3,580,62.6,0,25,3,23,837,1,0,0,0,draw
+5,10/11,2010-08-16,Manchester United,Newcastle United,15,5,9,4,609,65.6,0,19,4,23,820,2,32,3,7,0,313,34.4,0,9,4,21,527,2,3,0,3,win
+6,10/11,2010-10-18,Blackburn Rovers,Sunderland,30,5,12,6,312,43.0,1,9,2,15,517,2,44,3,14,2,428,57.0,0,17,4,10,635,1,0,0,0,draw
+7,10/11,2010-12-20,Manchester City,Everton,9,10,10,2,615,68.2,1,33,7,26,833,2,37,0,13,2,286,31.8,1,6,2,22,515,1,1,2,-1,lose
+8,10/11,2010-11-22,Sunderland,Everton,44,4,6,2,395,45.3,0,14,4,20,622,0,33,4,8,5,459,54.7,0,13,7,23,679,2,2,2,0,draw
+9,10/11,2010-08-23,Manchester City,Liverpool,24,5,13,1,492,54.4,0,12,3,30,690,1,24,4,13,3,400,45.6,0,17,5,16,603,1,3,0,3,win
+10,10/11,2011-01-24,Bolton Wanderers,Chelsea,28,4,8,4,444,47.9,0,12,4,29,680,0,38,3,5,2,500,52.1,0,16,9,22,747,0,0,4,-4,lose