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
<!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">
        <h2>PubMed Articles</h2>
        <table id="data-table">
          <colgroup>
            <col style="width: 30%">  <!-- Title -->
            <col style="width: 5%">   <!-- Select -->
            <col style="width: 15%">  <!-- Notes -->
            <col style="width: 5%">   <!-- Rating -->
            <col style="width: 10%">  <!-- Tags -->
            <col style="width: 20%">  <!-- MeSH Terms -->
            <col style="width: 15%">  <!-- Keywords -->
          </colgroup>
          <thead>
            <tr>
              <th>Title</th>
              <th>Select</th>
              <th>Notes</th>
              <th>Rating</th>
              <th>Tags</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>
      <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 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">
      <!-- Existing buttons -->
      <button class="action-button delete" id="delete-btn">Delete</button>
      <button class="action-button" id="download-btn">Download</button>

      <!-- Add these new view control buttons -->
      <div class="view-controls">
        <button class="view-button" onclick="setPositionMode(PositionModes.GRID)">
          <span class="icon">◼</span> Grid
        </button>
        <button class="view-button" onclick="setPositionMode(PositionModes.YEAR)">
          <span class="icon">📅</span> Year
        </button>
        <button class="view-button" onclick="setPositionMode(PositionModes.JOURNAL)">
          <span class="icon">📚</span> Journal
        </button>
        <button class="view-button" onclick="setPositionMode(PositionModes.CITATIONS)">
          <span class="icon">⭐</span> Citations
        </button>
      </div>
    </div>

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