HTD/views/classify/classify.ejs at main · dgegen/HTD · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scatter Plot</title>
  <script type="module" src="/js/dataManager.js"></script>
  <!-- <script src="https://d3js.org/d3.v5.min.js"></script>> -->
  <script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/pako@2.0.4/dist/pako_inflate.min.js"></script>
  <%- include('../partials/header.ejs', {authenticated:true}) %>
  <link rel="stylesheet" type="text/css" href="/css/styles.css">
  <link rel="stylesheet" type="text/css" href="/css/lightcurveplot.css">
</head>
<body>
  <div id="chart-container" style="margin: 0 auto; text-align: center; width: 90vw; height: 80vh;">
    <div id="chart" style="padding: 5px"></div>

    <!-- <button type="button" onclick="submitFunction(getFileId)" style="width: 1000px; padding: 10px 20px;">Submit</button> -->
    <!-- Info button -->

    <!-- Buttons for different confidence levels -->
    <div class="button-container">
    <h2 class="container-title">Submission</h2>
    <button type="button" onclick="graph.submitFunction(1)" style="width: 30%; padding: 10px 8px;">Ambiguous</button>
    <button type="button" onclick="graph.submitFunction(2)" style="width: 30%; padding: 10px 8px;">Somewhat sure</button>
    <button type="button" onclick="graph.submitFunction(3)" style="width: 30%; padding: 10px 8px;">Certain</button>
    <!-- <button class="info-button" onclick="openInfoPopup()" style="width: 43px; padding: 10px 8px;">?</button> -->
    </div>

    <div class="svg-container" id="svg-container" style="margin: 0 auto; text-align: center; width: 90vw; height: 69vh; padding-top: 10px;">
      <svg id="scatter-plot" width="100%" height="100%" style="min-height: 420px;" aria-label="Scatter Plot"></svg>
    </div>

    <!-- Info pop-up -->
    <div id="info-popup" class="info-popup" style="display: none;">
        <span class="info-popup-close-cross" onclick="closeInfoPopup()">✖</span>
        <p>
            Mark the most prominent transit shape (if there are any) in the light curve shown in the top panel by clicking on it.
            This generates a vertical line. If you see no transit, do not click on the plot.
            After you decided if there is a transit or not, click on one of the submission buttons above the plot, depending on how confident you are in your classification.
        </p>

        <!-- <p>
            The lower two panels show some additional quality data. If the data are shaded red, the light curve should be interpreted with caution. Variations in any of the bottom two panels (flat = good, not flat = bad) indicate potential issues in the first panel i.e. the light curve.
        </p> -->

        <p>
            We expect you to spend less than 10 seconds per image.
        </p>

    </div>
    <div class="button-container" style="text-align: right; background-color: #11024100;">
        <button class="info-button" onclick="toggleInfoPopup()" style="width: 43px; padding: 10px 10px;">?</button>
    </div>
    </div>
  <script>
    function handleKeyPress(event) {
      if (event.keyCode === 49) { // Key '1'
      submitWithDelay(1);
      } else if (event.keyCode === 50) { // Key '2'
      submitWithDelay(2);
      } else if (event.keyCode === 51) { // Key '3'
      submitWithDelay(3);
      } else if (event.keyCode === 102) { // Key 'f'
      toggleFullScreen();
      } else if (event.keyCode === 70) { // Key 'F'
      toggleFullScreen();
      } else if (event.keyCode === 122) { // Key 'z'
      toggleFullScreenZen();
      } else if (event.keyCode === 90) { // Key 'Z'
      toggleFullScreenZen();
      }
    }

    function submitWithDelay(value) {
      setTimeout(() => {
        graph.submitFunction(value);
        submissionAllowed = true; // Allow submission again after delay
      }, 100); // Wait for 100 milliseconds, in case the user clicked at the same time
    }

    // Add event listener for key press events
    document.addEventListener('keypress', handleKeyPress);

    function toggleFullScreen() {
      const chartContainer = document.getElementById('chart-container');
      if (!document.fullscreenElement) {
        chartContainer.requestFullscreen().catch(err => {
          console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
        chartContainer.classList.add('fullscreen');
      } else {
        document.exitFullscreen();
        chartContainer.classList.remove('fullscreen');
      }
    }

    function toggleFullScreenZen() {
      const chartContainer = document.getElementById('svg-container');
      if (!document.fullscreenElement) {
        chartContainer.requestFullscreen().catch(err => {
          console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
        chartContainer.classList.add('fullscreen');
      } else {
        document.exitFullscreen();
        chartContainer.classList.remove('fullscreen');
      }
    }

  </script>
  <!-- <script src="/js/dataManager.js"></script> -->
  <script src="/js/classification.js"></script>
  <script src="/js/infoPopup.js"></script>
  <!-- get_user_id(); -->
</div>

</body>
</html>