HyperCube/index.html at main · ZBZFirst/HyperCube · 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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <title>3D PubMed Viewer</title>
  <link rel="icon" href="data:,">
  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
        "three/examples/jsm/": "https://unpkg.com/three@0.158.0/examples/jsm/"
      }
    }
  </script>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="app-container">
    <div id="main-content">
      <!-- Data Table Container -->
      <div id="data-container">
        <div class="panel-header">
          <h2>PubMed Articles</h2>
        </div>
        <div id="fullscreen-browse-list" aria-label="Fullscreen article browser"></div>
        <table id="data-table">
          <colgroup>
            <col style="width: 14%">  <!-- Research Question -->
            <col style="width: 12%">  <!-- Search Terms -->
            <col style="width: 18%">  <!-- Title -->
            <col style="width: 5%">   <!-- Select -->
            <col style="width: 8%">   <!-- Include -->
            <col style="width: 18%">  <!-- Rationale -->
            <col style="width: 13%">  <!-- MeSH Terms -->
            <col style="width: 12%">  <!-- Keywords -->
          </colgroup>
          <thead>
            <tr>
              <th>Research Question</th>
              <th>Search Terms</th>
              <th>Title</th>
              <th>Select</th>
              <th>Include?</th>
              <th>Rationale For Inclusion</th>
              <th>MeSH Terms</th>
              <th>Keywords</th>
            </tr>
          </thead>
          <tbody>
            <!-- Will be populated by JavaScript -->
          </tbody>
        </table>
      </div>

      <!-- Vertical Splitter -->
      <div id="vertical-splitter" class="splitter"></div>

      <!-- Graphics Container -->
      <div id="graphics-container">
        <canvas id="canvas"></canvas>
        <div id="fullscreen-overlay-controls" aria-label="Fullscreen overlay controls">
          <div class="overlay-topbar">
            <div class="overlay-brand">HyperCube Viewer</div>
            <div class="overlay-actions">
              <button class="overlay-toggle active" data-panel-target="data-container">Browse</button>
              <button class="overlay-toggle" data-panel-target="text-container">Details</button>
              <button class="overlay-toggle" data-panel-target="button-container">Controls</button>
              <button class="overlay-toggle overlay-exit" id="overlay-exit-fullscreen-btn">Exit</button>
            </div>
          </div>
        </div>
      </div>
      <div id="pointer-lock-hint" style="position: absolute; top: 200px; left: 900px; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: white; padding: 20px; border-radius: 5px; text-align: center; z-index: 100">
      Click on the 3D view to enable movement controls. (Mouse to Look, WASD to Move, Ctrl for Down, Space for Up, G to Shoot, Esc for Exiting 3D Control Mode)
      </div>
      <!-- Horizontal Splitter -->
      <div id="horizontal-splitter" class="splitter"></div>

      <div id="text-container">
        <div class="panel-header">
          <h2>Article Details</h2>
        </div>
        <div id="selected-title">No article selected</div>
        <div class="metadata-row">
          <span class="metadata-label">PMID:</span>
          <span id="pmid-text">-</span>
        </div>
        <div class="metadata-row">
          <span class="metadata-label">PubYear:</span>
          <span id="year-text">-</span>
        </div>
        <div class="metadata-row">
          <span class="metadata-label">Source:</span>
          <span id="source-text">-</span>
        </div>
        <div class="metadata-row">
          <span class="metadata-label">DOI Link:</span>
          <a id="doi-link" target="_blank">-</a>
        </div>
        <div class="metadata-row">
          <span class="metadata-label">PMC Link:</span>
          <a id="pmc-link" target="_blank">-</a>
        </div>
        <div id="abstract-text">Select an article to view its abstract</div>
      </div>
    </div>

    <!-- Button Zone -->
    <div id="button-container">
      <div class="panel-header controls-header">
        <h2>Controls</h2>
      </div>
      <div class="controls-shell">
        <div class="controls-card query-card">
          <div class="query-panel">
            <div class="query-panel-header">
              <div class="query-panel-title">Query Workspace</div>
            </div>
            <div class="query-stack">
              <label class="compact-field compact-field-search" for="pubmed-search-input">
                <span class="compact-label">PubMed Query</span>
                <input id="pubmed-search-input" class="query-input query-search" type="text" placeholder="Search term or phrase" />
              </label>
              <label class="compact-field compact-field-rq" for="research-question-input">
                <span class="compact-label">Research Question</span>
                <input id="research-question-input" class="query-input query-rq" type="text" placeholder="Question added to each row" />
              </label>
              <label class="compact-field compact-field-key" for="pubmed-api-input">
                <span class="compact-label">NCBI API Key</span>
                <input id="pubmed-api-input" class="query-input query-key" type="password" placeholder="Optional" />
                <label class="remember-key-toggle" for="remember-pubmed-key">
                  <input id="remember-pubmed-key" type="checkbox" />
                  <span>Remember API key on this device</span>
                </label>
              </label>
            </div>
            <div class="query-actions">
              <button class="action-button query-run-btn" onclick="runPubMedQueryToCsv()">Run Query</button>
              <span id="query-status" class="query-status" aria-live="polite"></span>
            </div>
          </div>
        </div>

        <div class="controls-card actions-card">
          <div class="controls-card-header">
            <div class="controls-card-title">Workspace Actions</div>
          </div>
          <div class="button-cluster primary-actions">
            <button class="action-button delete" id="delete-btn">Delete</button>
            <button class="action-button" id="download-btn">Download</button>
            <button class="action-button" id="apply-research-question-btn">Change Research Question</button>
            <button class="action-button fullscreen-btn" id="fullscreen-btn">Fullscreen</button>
          </div>
        </div>

        <div class="controls-card view-card">
          <div class="controls-card-header">
            <div class="controls-card-title">View Controls</div>
          </div>
          <div class="controls-groups">
            <div class="control-group">
              <button class="view-button group-toggle" onclick="toggleControlGroup('scale-geometry-options')">
                <span class="icon">📏</span> Scale
              </button>
              <div class="control-options" id="scale-geometry-options">
                <button class="view-button" data-scale-mode="author_count" onclick="applyGeometryScaleMode('author_count')">
                  Author count
                </button>
                <button class="view-button" data-scale-mode="mesh_count" onclick="applyGeometryScaleMode('mesh_count')">
                  MeSH count
                </button>
                <button class="view-button" data-scale-mode="none" onclick="applyGeometryScaleMode('none')">
                  None
                </button>
              </div>
            </div>

            <div class="control-group">
              <button class="view-button group-toggle" onclick="toggleControlGroup('sort-by-options')">
                <span class="icon">↕️</span> Sort
              </button>
              <div class="control-options" id="sort-by-options">
                <button class="view-button" data-sort-mode="grid" onclick="applySortMode('GRID')">
                  <span class="icon">◼</span> Grid
                </button>
                <button class="view-button" data-sort-mode="year" onclick="applySortMode('YEAR')">
                  <span class="icon">📅</span> Year
                </button>
                <button class="view-button" data-sort-mode="journal" onclick="applySortMode('JOURNAL')">
                  <span class="icon">📚</span> Journal
                </button>
                <button class="view-button" data-sort-mode="citations" onclick="applySortMode('CITATIONS')">
                  <span class="icon">⭐</span> Citations
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="module" src="script.js"></script>
  </div>
</body>
</html>