CCMModel/index.html at main · drdebmath/CCMModel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Simulation of Agents in a Network</title>

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            accent:  '#f97316',
            darkbg:  '#0f172a',
            darkcard:'#1e293b',
            darktext:'#e2e8f0',
          },
          fontFamily: {
            sans: ['Inter','ui-sans-serif','system-ui']
          },
          boxShadow: {
            card: '0 4px 20px rgba(0,0,0,.08)'
          }
        }
      }
    }
  </script>

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
  <script src="https://unpkg.com/cytoscape@3.24.0/dist/cytoscape.min.js"></script>
  <script src="https://cdn.jsdelivr.net/pyodide/v0.27.5/full/pyodide.js"></script>

  <style>
    html{scroll-behavior:smooth}
    button:disabled{opacity:.4;cursor:not-allowed}
    body::before{content:"";position:fixed;inset:0;z-index:-1;background-image:radial-gradient(rgba(59,130,246,.05)1px,transparent 1px);background-size:20px 20px}
    html.dark body::before{background-image:radial-gradient(rgba(255,255,255,.04)1px,transparent 1px)}
  </style>
</head>
<body class="min-h-screen flex flex-col bg-gray-50 text-gray-900 dark:bg-darkbg dark:text-darktext font-sans">
  <header class="bg-gradient-to-r from-primary to-accent text-white shadow-md sticky top-0 z-[100]">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-lg sm:text-2xl font-semibold tracking-wide">Simulation of Agents in a Network</h1>
      <div class="flex items-center gap-3">
        <button id="togglePanelBtn"
  class="fixed sm:static
         top-4 left-4 sm:top-auto sm:left-auto
         z-[65]
         rounded-full sm:rounded-lg
         p-3 sm:px-3 sm:py-1.5
         bg-primary text-white
         sm:bg-white/10 hover:sm:bg-white/20
         active:scale-95 transition text-xs sm:text-sm">
  ☰
</button>
        <a href="https://drdebmath.github.io" class="rounded-lg px-3 py-1.5 text-xs sm:text-sm hover:bg-white/10 active:scale-95 transition">Home</a>
        <button id="darkModeToggle" class="rounded-lg px-3 py-1.5 text-xs sm:text-sm bg-white/10 hover:bg-white/20 active:scale-95 transition">🌙 Dark</button>
      </div>
    </div>
  </header>

  <div class="flex flex-1 relative"> <!-- Removed overflow-hidden -->
    <!-- ❷ replace the existing class string on <aside id="controlPanel"> -->
    <aside id="controlPanel"
class="fixed sm:relative
       top-16 sm:top-0
       bottom-0 left-0
       -translate-x-full sm:translate-x-0
       z-50 w-64 sm:w-72 lg:w-80
       bg-white dark:bg-darkcard border-r dark:border-darkcard/40
       overflow-y-auto
       transition-transform duration-300 ease-in-out">

      <div class="p-4 flex flex-col gap-6 lg:gap-8">
        <div class="flex flex-col gap-3 bg-white dark:bg-darkcard shadow-card rounded-xl p-4">
          <h3 class="text-sm font-semibold border-b dark:border-gray-700 pb-1">Parameters</h3>
          <div class="flex flex-col gap-2 text-sm">
            <label class="flex justify-between items-center"><span>Nodes</span><input id="nodeCountInput" type="number" min="1" value="26" class="w-24 text-center rounded dark:bg-gray-700 dark:border-gray-600"/></label>
            <label class="flex justify-between items-center"><span>Max Deg</span><input id="maxDegreeInput" type="number" min="1" value="4" class="w-24 text-center rounded dark:bg-gray-700 dark:border-gray-600"/></label>
            <label class="flex justify-between items-center"><span>Agents</span><input id="agentCountInput" type="number" min="1" value="26" class="w-24 text-center rounded dark:bg-gray-700 dark:border-gray-600"/></label>
            <label class="flex justify-between items-center"><span>Start Nodes</span><input id="startingPositionsInput" type="number" min="1" value="5" class="w-24 text-center rounded dark:bg-gray-700 dark:border-gray-600"/></label>
            <label class="flex justify-between items-center"><span>Seed</span><input id="seedInput" type="number" value="42" class="w-24 text-center rounded dark:bg-gray-700 dark:border-gray-600"/></label>
          </div>
        </div>
        <div class="flex flex-col gap-3 bg-white dark:bg-darkcard shadow-card rounded-xl p-4">
          <h3 class="text-sm font-semibold border-b dark:border-gray-700 pb-1">Animation</h3>
          <label class="flex justify-between items-center text-sm"><span>Step Speed (ms)</span><input id="animationDurationInput" type="number" min="50" step="50" value="300" class="w-24 text-center rounded dark:bg-gray-700 dark:border-gray-600"/></label>
          <div class="flex gap-3 mt-3">
            <button id="prevStepBtn" class="flex-1 px-3 py-1.5 bg-primary/90 hover:bg-primary text-white rounded-lg text-xs transition" disabled>◀◀ Prev</button>
            <button id="playPauseBtn" class="flex-1 px-3 py-1.5 bg-primary/90 hover:bg-primary text-white rounded-lg text-xs transition" disabled>▶️ Play</button>
            <button id="nextStepBtn" class="flex-1 px-3 py-1.5 bg-primary/90 hover:bg-primary text-white rounded-lg text-xs transition" disabled>Next ▶▶</button>
          </div>
          <div class="border-t pt-3 mt-2 dark:border-gray-700">
            <h4 class="text-xs font-semibold mb-1">Display Options</h4>
            <div class="flex flex-col gap-1 text-xs">
              <label class="flex items-center gap-2"><input id="showAgentsCheck" type="checkbox" class="h-4 w-4 text-primary rounded focus:ring-primary" checked/><span>Show Agents</span></label>
              <label class="flex items-center gap-2"><input id="showScoutCheck" type="checkbox" class="h-4 w-4 text-primary rounded focus:ring-primary" checked/><span>Show Scout</span></label>
              <label class="flex items-center gap-2"><input id="showChaseCheck" type="checkbox" class="h-4 w-4 text-primary rounded focus:ring-primary" checked/><span>Show Chase</span></label>
              <label class="flex items-center gap-2"><input id="showFollowCheck" type="checkbox" class="h-4 w-4 text-primary rounded focus:ring-primary" checked/><span>Show Follow</span></label>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center gap-2 bg-white dark:bg-darkcard shadow-card rounded-xl p-4">
          <button id="runBtn" class="bg-accent hover:bg-orange-600 text-white px-5 py-2 rounded-lg text-sm font-semibold shadow-lg transition">▶️ Run Simulation</button>
          <button id="saveDataBtn" class="w-full bg-gray-500 hover:bg-gray-600 text-white px-3 py-1.5 rounded-lg text-sm font-semibold transition mt-2" disabled>💾 Save Data</button>
          <div class="flex flex-col gap-2 text-sm w-full mt-3 border-t pt-3 dark:border-gray-700">
              <label for="jsonFileInput" class="block text-xs font-semibold">Load from JSON File:</label>
              <input type="file" id="jsonFileInput" accept=".json" class="block w-full text-xs text-gray-900 dark:text-gray-300
                  file:mr-4 file:py-1 file:px-2
                  file:rounded-md file:border-0
                  file:text-xs file:font-semibold
                  file:bg-blue-50 dark:file:bg-blue-900
                  file:text-blue-700 dark:file:text-blue-300
                  hover:file:bg-blue-100 dark:hover:file:bg-blue-800
              "/>
              <button id="loadJsonBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white px-3 py-1.5 rounded-lg text-sm font-semibold transition">Load & Visualize</button>
          </div>
          <div id="output" class="text-xs italic text-center max-w-[10rem] mt-3">Click "Run Simulation" or "Load & Visualize" to start.</div>
        </div>
      </div>
    </aside>

    <div id="backdrop" class="fixed inset-0 bg-black/40 z-40 opacity-0 pointer-events-none transition-opacity duration-300 sm:hidden"></div>

    <main class="flex-1 min-w-0 flex flex-col"> <!-- Removed overflow-hidden -->
      <div id="round-display" class="text-base sm:text-lg font-semibold text-center bg-white dark:bg-darkcard shadow-card py-2">Status: Idle</div>
      <div class="flex flex-wrap justify-center items-center gap-4 text-xs bg-white/60 dark:bg-darkcard/60 p-3 shadow-card">
        <span class="font-semibold">Agent Status:</span>
        <div class="flex items-center gap-1"><span class="w-3 h-3 rounded-full border-2 border-green-600 dark:border-green-400 bg-gray-400/30"></span><span>SETTLED</span></div>
        <div class="flex items-center gap-1"><span class="w-3 h-3 rounded-full border-2 border-dashed border-amber-600 dark:border-amber-400 bg-gray-400/30"></span><span>SETTLED_WAIT</span></div>
        <div class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-gray-400/50"></span><span>UNSETTLED</span></div>
        <span class="font-semibold">Node:</span>
        <div class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-blue-300 dark:bg-blue-600"></span><span>Idle</span></div>
        <div class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-yellow-400 dark:bg-yellow-500"></span><span>Has Unsettled</span></div>
        <span class="italic text-gray-500 dark:text-gray-400">(Agent hue ≈ Leader/Level)</span>
      </div>
      <div id="cy-container" class="flex-1 min-h-[300px] sm:min-h-[450px] bg-white dark:bg-darkcard"> <!-- New container -->
         <div id="cy" class="w-full h-full"></div> <!-- cy element inside new container -->
      </div>
      <div id="node-tooltip" class="hidden absolute z-50 p-2 bg-white dark:bg-darkcard border dark:border-gray-600 rounded-lg shadow-card text-xs pointer-events-none max-w-xs break-words"></div>
    </main>
  </div>

  <footer class="bg-gray-100 dark:bg-darkcard py-6 text-center text-xs text-gray-600 dark:text-gray-400">
    <p>Developed by <a href="https://drdebmath.github.io" class="underline hover:text-primary">Debasish Pattanayak</a> · Powered by
      <a href="https://pyodide.org" class="underline hover:text-primary">Pyodide</a> and
      <a href="https://cytoscape.org" class="underline hover:text-primary">Cytoscape.js</a> ·
      With the help of
      <a href="https://chatgpt.com/" class="underline hover:text-primary">ChatGPT</a>,
      <a href="https://aistudio.google.com" class="underline hover:text-primary">Gemini</a>, and
      <a href="https://code.visualstudio.com" class="underline hover:text-primary">VS Code</a> ✨
    </p>
  </footer>

  <script type="module" src="./main.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded',()=>{
      const html=document.documentElement;
      const darkBtn=document.getElementById('darkModeToggle');
      const panelBtn=document.getElementById('togglePanelBtn');
      const panel=document.getElementById('controlPanel');
      const backdrop=document.getElementById('backdrop');

      const applyDark=(d)=>{html.classList.toggle('dark',d);darkBtn.textContent=d?'☀️ Light':'🌙 Dark'};
      const saved=localStorage.getItem('darkMode');
      const prefers=window.matchMedia('(prefers-color-scheme:dark)').matches;
      applyDark(saved==='true'||(saved===null&&prefers));
      darkBtn.addEventListener('click',()=>{const d=!html.classList.contains('dark');localStorage.setItem('darkMode',d);applyDark(d)});

      function togglePanel(){const open=panel.classList.toggle('-translate-x-full');backdrop.classList.toggle('opacity-0',!open);backdrop.classList.toggle('pointer-events-none',!open)}
      panelBtn.addEventListener('click',togglePanel);
      backdrop.addEventListener('click',togglePanel);
    });
  </script>
</body>
</html>