neuDiff/index.html at main · reiserlab/neuDiff · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>neuDiff Viewer</title>
  <link rel="stylesheet" href="styles/plume-all.css" />
  <link rel="stylesheet" href="styles/main.css" />
</head>
<body class="plume pm-surface pm-font-primary">
  <header class="viewer-header">
    <a class="pm-button pm-btn-primary primary-link primary-link--left" href="index.html" aria-current="page">neuDiff</a>

    <div class="viewer-controls">
      <div class="selector">
        <label for="viewerA-dataset-select">Dataset A</label>
        <select id="viewerA-dataset-select" class="pm-input" disabled>
          <option value="">Choose dataset</option>
        </select>
      </div>
      <div class="selector">
        <label for="viewerA-neuron-select">Cell Type A</label>
        <select id="viewerA-neuron-select" class="pm-input" disabled>
          <option value="">Choose cell type</option>
        </select>
      </div>
      <div class="selector">
        <label for="viewerA-hemisphere-select">Hemisphere A</label>
        <select id="viewerA-hemisphere-select" class="pm-input" disabled>
          <option value="">Choose hemisphere</option>
        </select>
      </div>
      <div class="selector">
        <label for="viewerB-dataset-select">Dataset B</label>
        <select id="viewerB-dataset-select" class="pm-input" disabled>
          <option value="">Choose dataset</option>
        </select>
      </div>
      <div class="selector">
        <label for="viewerB-neuron-select">Cell Type B</label>
        <select id="viewerB-neuron-select" class="pm-input" disabled>
          <option value="">Choose cell type</option>
        </select>
      </div>
      <div class="selector">
        <label for="viewerB-hemisphere-select">Hemisphere B</label>
        <select id="viewerB-hemisphere-select" class="pm-input" disabled>
          <option value="">Choose hemisphere</option>
        </select>
      </div>
    </div>
  </header>

  <main class="viewer-split" aria-label="Cell Type previews">
    <nav id="nav-line" class="nav-line is-hidden" aria-label="Section Navigation">
      <svg class="nav-line-svg" viewBox="0 0 15 600" preserveAspectRatio="xMidYMid meet">
        <line x1="7.5" y1="0" x2="7.5" y2="600" stroke="rgba(80, 80, 80, 0.8)" stroke-width="0.5" stroke-dasharray="2 2" vector-effect="non-scaling-stroke"/>
        <circle class="nav-circle" data-anchor="top" cx="7.5" cy="5" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
          <title>Top</title>
        </circle>
        <circle class="nav-circle" data-anchor="layer-stats" cx="7.5" cy="100" r="7.5" fill="rgba(90, 90, 90, 0.4)" vector-effect="non-scaling-stroke">
          <title>Synapse count per Layer (if available)</title>
        </circle>
        <circle class="nav-circle" data-anchor="eyemaps" cx="7.5" cy="200" r="7.5" fill="rgba(90, 90, 90, 0.4)" vector-effect="non-scaling-stroke">
          <title>Eye Maps (if available)</title>
        </circle>
        <circle class="nav-circle" data-anchor="neuron-visualization" cx="7.5" cy="300" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
          <title>Neuron Visualization</title>
        </circle>
        <circle class="nav-circle" data-anchor="roi-innervation" cx="7.5" cy="400" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
          <title>ROI Innervation</title>
        </circle>
        <circle class="nav-circle" data-anchor="s-c-i" cx="7.5" cy="500" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
          <title>Synaptic Connectivity Inputs</title>
        </circle>
        <circle class="nav-circle" data-anchor="s-c-o" cx="7.5" cy="595" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
          <title>Synaptic Connectivity Outputs</title>
        </circle>
      </svg>
    </nav>
    <section id="welcome-screen" class="welcome-screen" aria-label="Welcome and Instructions">
      <div class="welcome-content">
        <h1>Welcome to neuDiff</h1>
        <p>
          <strong>neuDiff</strong> is a comparative visualization tool designed to help you explore and compare
          cell type pages from the <span class="highlight">Janelia Cell Type Catalogues</span>.
        </p>

        <h2>How It Works</h2>
        <p>
          This tool allows you to view two cell types side-by-side for detailed comparison.
          You can compare:
        </p>
        <ul>
          <li>Different cell types within the <strong>same dataset</strong></li>
          <li>The same cell type across <strong>different datasets</strong></li>
          <li>Different cell types from <strong>different datasets</strong></li>
        </ul>

        <h2>Getting Started</h2>
        <p>
          Use the dropdown menus at the top of the page to select your comparisons:
        </p>
        <ul>
          <li><strong>Dataset A</strong> and <strong>Dataset B</strong>: Choose which datasets to explore</li>
          <li><strong>Cell Type A</strong> and <strong>Cell Type B</strong>: Select specific cell types to compare</li>
        </ul>
        <p>
          Once you've made your selections, the interactive visualizations will appear in split view,
          allowing you to examine morphology, connectivity, and other properties side-by-side.
        </p>

        <div class="note">
          <p>
            <strong>Tip:</strong> Click the <span class="highlight">neuDiff</span> button in the top-left corner
            at any time to reset your selections and return to this welcome screen.
          </p>
        </div>

        <div class="note">
          <p>
            <strong>Keyboard Navigation:</strong> When a cell type dropdown is open, you can quickly navigate to
            specific entries by typing on your keyboard. For example, instead of scrolling through thousands of
            cell types, simply type <kbd>V</kbd><kbd>S</kbd> to jump directly to cell types starting with "VS".
            This works with any letter combination to help you find what you're looking for faster.
          </p>
        </div>

        <div class="note">
          <p>
            <strong>Display Recommendation:</strong> neuDiff works best on wide monitors where you can view
            both cell types side-by-side. If you're using a smaller screen or tablet, we recommend opening
            the different cell type pages in separate browser tabs and then switching between them for a better viewing experience.
          </p>
        </div>
      </div>
    </section>
    <section id="viewerA-preview" class="pane is-hidden" aria-label="Viewer A">
      <iframe id="viewerA-frame" title="Viewer A cell type preview" src="about:blank" loading="lazy"></iframe>
    </section>
    <section id="viewerB-preview" class="pane is-hidden" aria-label="Viewer B">
      <iframe id="viewerB-frame" title="Viewer B cell type preview" src="about:blank" loading="lazy"></iframe>
    </section>
  </main>

  <script src="scripts/neuview-iframe-controller.js"></script>
  <script src="scripts/main.js"></script>
</body>
</html>