New frontend completed

.gitignore

@@ -11,4 +11,9 @@ settings.json
 Dockerfile.local
 
 edf_files/
-**/.DS_Store
+galaxy-app/edf/physionet/edfx/*
+**/.DS_Store
+
+# VSCode Files
+.vscode/*
+jsconfig.json

client/Annotators/EDF/index.js

@@ -47,21 +47,40 @@ Template.AnnotatorEDF.onCreated(function() {
 });
 
 Template.AnnotatorEDF.onRendered(function() {
-    const annotatorContainer = $(this.find('.annotator-container'));
-    const template = this;
-    let config = $.extend({}, this.data.task.annotatorConfig);
-    config = $.extend(config, this.data.preferences.annotatorConfig);
-    config = $.extend(config, {
-        recordingName: this.data.data.path,
-        context: this.data,
-        setVisibilityStatusForInfoPanel: (isVisible) => {
-            setVisibilityStatusForFloatingPanel(isVisible, template, '.info-panel-container');
-        },
-        toggleInfoPanel: () => {
-            toggleFloatingPanel(undefined, template, '.info-panel-container');
-        },
-    });
-    annotatorContainer.TimeSeriesAnnotator(config);
+	const annotatorContainer = $(this.find(".annotator-container"));
+	const template = this;
+	//console.log("Template:", this);
+	let config = $.extend({}, this.data.task.annotatorConfig);
+	config = $.extend(config, this.data.preferences.annotatorConfig);
+	//console.log("here");
+	config = $.extend(config, {
+		recordingName: this.data.dataset.reduce((combined, data) => {
+			let dataPathSegments = data.path.split("/");
+			if (!combined.length)
+				return dataPathSegments[dataPathSegments.length - 1];
+			return (
+				combined + " + " + dataPathSegments[dataPathSegments.length - 1]
+			);
+		}, ""),
+		allRecordings: this.data.dataset.map((data) => {
+			return { _id: data._id, path: data.path, source: data.source };
+		}),
+		context: this.data,
+		setVisibilityStatusForInfoPanel: (isVisible) => {
+			setVisibilityStatusForFloatingPanel(
+				isVisible,
+				template,
+				".info-panel-container"
+			);
+		},
+		toggleInfoPanel: () => {
+			toggleFloatingPanel(undefined, template, ".info-panel-container");
+		},
+	});
+	//console.log("Template2:", this);
+	//console.log("dataset:", this.data.dataset);
+	//console.log("config", config);
+	annotatorContainer.TimeSeriesAnnotator(config);
 });
 
 Template.AnnotatorEDF.onDestroyed(function() {

client/Annotators/EDF/style.css

@@ -174,7 +174,57 @@
 }
 
 .frequency_filter_panel .select_panel {
-  width: 160px;
+  width: 110px;
+}
+
+.user_selection_panel {
+  float: left;
+  margin: 0;
+}
+
+.user_selection_panel .select_panel {
+  width: 210px;
+}
+
+.user_selection_panel .optgroup {
+  text-align: center;
+  font-weight: normal;
+}
+
+.annotation_type_select_panel {
+  float: left;
+  margin: 0;
+}
+
+.annotation_type_select_panel .select_panel {
+  width: 290px;
+}
+
+.annotation_type_select_panel .optgroup {
+  text-align: center;
+  font-weight: normal;
+}
+
+.timescale_panel {
+  float: left;
+  margin: 0;
+}
+
+.timescale_panel .select_panel {
+  width: 180px;
+}
+
+.timesync_panel {
+  float: left;
+  margin: 0;
+}
+
+.timesync_panel .select_panel {
+  width: 210px;
+}
+
+.timesync_panel button {
+  margin: 0 0 0 20px !important;
 }
 
 .button_container {
@@ -236,7 +286,7 @@
 }
 
 .highcharts-annotation.saved:hover .toolbar {
-  display: block;
+  display: inline;
 }
 
 .confidence-buttons input {
@@ -273,12 +323,12 @@
 }
 
 .highcharts-annotation .comment input {
-  height: 21px !important;
+  /* height: 21px !important;
   width: 180px !important;
-  vertical-align: middle !important;
-  font-size: 13px !important;
+  vertical-align: middle !important; */
+  font-size: 13px !important; 
   background-color: #ffffff !important;
-  margin: 0 !important;
+  margin: 0 !important; 
 }
 
 .annotationTime {
@@ -556,3 +606,101 @@
   padding-left: 1.6rem;
   padding-right: 1.6rem;
 }
+/* Popup container */
+.popup {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  z-index: 4;
+}
+
+/* The actual popup (appears on top) */
+.popup .popuptext {
+  visibility: hidden;
+  width: 450px;
+  background-color: #26a69a;
+  color: #000;
+  text-align: center;
+  border-radius: 10px;
+  padding: 8px 0;
+  position: fixed;
+  z-index: 1002;
+  bottom: 60%;
+  left: 20%;
+  margin-left: 10px;
+}
+
+/* Popup arrow */
+.popup .popuptext::after {
+  content: "";
+  position: absolute;
+  top: 10%;
+  left: -100%;
+  margin-left: -5px;
+  border-width: 5px;
+  z-index: 1005;
+  border-style: solid;
+  border-color:#fff transparent transparent transparent;
+}
+.popup .popupbutton {
+  visibility: hidden;
+}
+
+/* Toggle this class when clicking on the popup container (hide and show the popup) */
+.popup .show {
+  visibility: visible;
+  -webkit-animation: fadeIn 1s;
+  animation: fadeIn 1s;
+  z-index: 7;
+}
+
+.channel_name {
+    font-size: 1rem;
+    font-weight: thin;
+    color: #000000;
+    display: inline;
+    line-height: 2rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+.time_sync {
+    font-size: 1rem;
+    font-weight: thin;
+    color: #000000;
+    background-color: rgba(51, 247, 60, 0.774);
+    display: inline;
+    line-height: 2rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+
+.amplitude_adjustment_container{
+  float: left;
+  margin-left: 1rem;
+}
+
+.amplitude_adjustment_panel{
+  float: right;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.amplitude_adjustment_button{
+  float: right;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
+}
+
+
+
+
+
+