Skip to content
Snippets Groups Projects
microdraw.html 30.1 KiB
Newer Older
  • Learn to ignore specific revisions
  • Schiffer, Christian's avatar
    Schiffer, Christian committed
    <html>
    
    
    	<head>
    		<title>MicroDraw</title>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,user-scalable=no" />
    		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    				       integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    		<link rel="stylesheet" href="css/microdraw.css" type="text/css" />
    		<link rel="stylesheet" href="css/atlas_ui.css" type="text/css" />
    		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    	</head>
    
    		<!-- Load javascript -->
    		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    
    		<div id="atlas_app">
    			<div id="menuButton">
    				<img class="button" id="openMenu" title="Menu" src="img/openMenu.svg" />
    			</div>
    
    			<!-- Toolbar -->
    			<div id="menuBar" class="table">
    
    				<div class="row">
    					<div id="login"></div>
    					<img class="button" id="closeMenu" title="Close Menu" src="img/closeMenu.svg" />
    				</div>
    
    				<div class="row">
    					<div id="myNavigator"></div>
    				</div>
    
    				<div class="row">
    					<div class="cell" style="text-align:center">
    						<div class="buttonGroup">
    							<img class="button" id="zoom" title="Navigator" src="img/navigate.svg" />
    							<img class="button" id="home" title="Home" src="img/home.svg" />
    							<img class="button" id="zoom-in" title="Zoom in" src="img/plus.svg" />
    							<img class="button" id="zoom-out" title="Zoom out" src="img/minus.svg" />
    							<img class="button" id="rotate-right" title="Rotate right" src="img/plus.svg" />
    							<img class="button" id="rotate-left" title="Rotate left" src="img/minus.svg" />
    
    							<div>
    								<img class="button" id="prev" title="Previous slice" src="img/prev.svg" />
    								<input id="slice-name" list="slice-names" style="width:80px" />
    								<img class="button" id="next" title="Next slice" src="img/next.svg" />
    							</div>
    							<input type="range" id="slider" class="sliderClass" />
    						</div>
    						<div class="buttonGroup">
    							<img class="button" id="select" title="Select" src="img/select.svg" />
    							<img class="button" id="draw" title="Draw" src="img/draw.svg" />
    							<img class="button" id="draw-polygon" title="Draw polygon" src="img/draw-polygon.svg" />
    							<img class="button" id="simplify" title="Simplify" src="img/simplify.svg" />
    							<img class="button" id="addpoint" title="Add point" src="img/addPoint.svg" />
    							<img class="button" id="delpoint" title="Delete point" src="img/deletePoint.svg" />
    							<img class="button" id="addregion" title="Union of regions" src="img/union.svg" />
    							<img class="button" id="delregion" title="Subtraction of regions" src="img/subtract.svg" />
    							<img class="button" id="splitregion" title="Split region" src="img/split.svg" />
    							<img class="button" id="rotate" title="Rotate region" src="img/rotate.svg" />
    							<img class="button" id="flip" title="Flip region" src="img/flip.svg" />
    							<img class="button" id="snappoint" title="Snap two points on top of each other"
    											   src="img/rotate.svg" />
    							<img class="button" id="handle" title="Toggle handles" src="img/handle.svg" />
    							<img class="button" id="text" title="Add text" src="img/text.svg" />
    							<img class="button" id="point" title="Add point" src="img/addCross.svg" />
    						</div>
    						<div class="buttonGroup">
    							<img class="button" id="save" title="Save annotations" src="img/save.svg" />
    							<img class="button" id="copy" title="Copy path" src="img/copy.svg" />
    							<img class="button" id="paste" title="Paste path" src="img/paste.svg" />
    							<img class="button" id="delete" title="Delete region" src="img/delete.svg" />
    
    							<img class="button" id="load" title="Load annotations from db" src="img/load.svg" />
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    						</div>
    
    
    						<div class="buttonGroup">
    							<select id="overlays">
    								<option value="none">No Overlay</option>
    							</select>
    							<input type="range" class="sliderClass" id="alpha-overlay"
    												title="Change the transparency of the overlay" />
    						</div>
    						<div id="mouseCoordinates" class="small-text">
    							x: 0, y: 0
    						</div>
    						<div id="rgbValues" class="small-text">
    							RGB: (000,000,000)
    						</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    					</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    				</div>
    
    
    				<div class="row">
    					<div class="btn-group" role="group" aria-label="basic example">
    						<button v-on:click="initializeAtlas" type="button" class="btn btn-primary" data-toggle="modal"
    															   data-target="#atlas_ui_projects_modal">
    							ATLaS UI
    						</button>
    
    						<button type="button" class="btn btn-secondary" data-toggle="modal"
                                    v-on:click="initializeAnnotationImport" data-target="#atlas_ui_imports_modal">
    							Import
    						</button>
    
    				<!-- <div class="row">
    	    <div class="cell">
    	    <div id="dl">
    	    <h1>ATLaS UI</h1>
    	    <div id="messages"></div>
    	    </div>
    	    </div>
    	    </div>
    				-->
    				<div class="row">
    					<div class="cell">
    						<br />Regions <img class="eye" id="eye_all" title="Toggle all regions" src="img/eyeOpened.svg">
    						<div id="regionList"></div>
    					</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    				</div>
    			</div>
    
    
    			<div id="colorSelector">
    				stroke color
    				<select id="selectStrokeColor" onChange="onSelectStrokeColor();">
    					<option value="0">black</option>
    					<option value="1">white</option>
    					<option value="2">red</option>
    					<option value="3">green</option>
    					<option value="4">blue</option>
    					<option value="5">yellow</option>
    				</select>
    				<br>
    				<br>
    				stroke width
    				<input type="button" id="strokeWidthDec" value="-" onClick="onStrokeWidthDec();"><input type="button"
    															id="strokeWidthInc" value="+" onClick="onStrokeWidthInc();">
    				<br>
    				<br>
    				fill color
    				<input type="color" id="fillColorPicker" value="#ff0000" onChange="onFillColorPicker(this.value);">
    				<br>
    				<br>
    				&alpha;<input type="range" min="0" max="100" id="alphaSlider" onInput="onAlphaSlider(this.value);"><input
    											      id="alphaFill" onInput="onAlphaInput(this.value);">
    				<br>
    				<br>
    				<input type="button" id="okStrokeColor" value="ok" onClick="setRegionColor();">
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    			</div>
    
    			<!-- Region Picker -->
    			<div id="regionPicker">
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    			</div>
    
    			<!-- OpenSeadragon viewer -->
    			<div id="openseadragon1" style="width:100%">
    			</div>
    			<!-- alert/info box after saving -->
    			<div id="saveDialog"></div>
    			<!-- naat logo -->
    			<a id="logo" href="http://neuroanatomy.github.io">
    				<img src="img/naat.svg" style="width:2.5em" />
    			</a>
    			<!-- ATLaS UI dialogue -->
    			<div class="modal fade" id="atlas_ui_projects_modal" tabindex="-1" role="dialog"
    											   aria-labelledby="exampleModalLabel" aria-hidden="true">
    				<div class="modal-dialog modal-lg" role="document">
    					<div class="modal-content">
    						<!-- Header of dialogue -->
    						<div class="modal-header">
    							<h5 class="modal-title" id="exampleModalLabel">ATLaS UI</h5>
    							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    								<span aria-hidden="true">&times;</span>
    							</button>
    						</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    
    
    						<!-- Body of dialogue -->
    						<div class="modal-body">
    							<!-- List of projects -->
    							<div class="form-group">
    								<label for="atlas_project_list">Projects</label>
    								<ol id="atlas_project_list"
    								    class="list-group atlas_project_list border border-dark rounded bg-light">
    									<li v-for="(project, index) in projects" class="list-group-item list-group-item-action">
    										<div class="form-row">
    
    											<!-- <label class="col-1 col-form-label">Name</label> -->
    											<div class="col-1">
    												<input v-model="project.project_id" class="form-control" type="text" readonly />
    											</div>
    
    											<div class="col-4">
    												<input v-model="project.name" class="form-control" type="text" readonly />
    											</div>
    											<label class="col-1 col-form-label">Brain</label>
    											<div class="col-1">
    												<input v-model="project.brain" type="text" class="form-control" readonly>
    											</div>
    											<label class="col-1 col-form-label">Tasks</label>
    											<div class="col-1">
    												<input v-model="project.tasks.length" type="text" class="form-control"
    																		  readonly>
    											</div>
    											<div class="col-3">
    												<div class="btn-group float-right" role="group">
    													<button type="button" class="btn btn-primary" data-toggle="modal"
    																		      data-target="#atlas_ui_tasks_modal" v-on:click="editProject(project)">Edit</button>
    													<div class="btn-group" role="group">
    														<button type="button" class="btn btn-danger"
    																      v-on:click="deleteProject(index)">Delete</button>
    													</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    												</div>
    											</div>
    										</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    
    
    							<!-- Button group -->
    							<div class="btn-group" role="group">
    								<button v-on:click="newProject" type="button" class="btn btn-primary" data-toggle="modal"
    																      data-target="#atlas_ui_tasks_modal">New project...</button>
    							</div>
    							<!-- Log messages -->
    							<!-- <div class="overflow-auto" id="messages"></div> -->
    						</div>
    						<div class="modal-footer">
    							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    						</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    					</div>
    				</div>
    			</div>
    
    			<div class="modal fade" id="atlas_ui_tasks_modal" tabindex="-1" role="dialog"
    											aria-labelledby="exampleModalLabel" aria-hidden="true" v-if="selected_project !== null">
    				<div class="modal-dialog modal-lg" role="document">
    					<div class="modal-content">
    						<!-- Header of dialogue -->
    						<div class="modal-header">
    							<h5 class="modal-title" id="exampleModalLabel">
    								{{selected_project.project_id}} - {{selected_project.name}}
    							</h5>
    							<button type="button" class="close" data-dismiss="modal" aria-label="Close" v-on:click="closeProject()">
    								<span aria-hidden="true">&times;</span>
    							</button>
    						</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    
    
    						<!-- Body of dialogue -->
    						<div class="modal-body">
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    							<div class="form-group">
    
    								<!-- Project information -->
    								<div class="form-group">
    									<label for="atlas_ui_project_form_name">Name</label>
    									<input v-model="selected_project.name" type="text" class="form-control"
    															   id="atlas_ui_project_form_name">
    								</div>
    								<div class="form-group">
    									<label for="atlas_ui_project_form_brain">Brain</label>
    									<input v-model="selected_project.brain" type="text" class="form-control"
    															    id="atlas_ui_project_form_brain">
    								</div>
    
    								<!-- List of tasks -->
    								<label for="atlas_task_list">Tasks</label>
    								<ol id="atlas_task_list"
    								    class="list-group atlas_task_list border border-dark rounded bg-light"
    								    v-if="selected_project !== null">
    									<li v-for="(task, index) in selected_project.tasks"
    									    class="list-group-item list-group-item-action">
    										<div class="form-row">
    
    											<input v-model="task.task_id" class="col-1 form-control" type="text" readonly />
    
    											<div class="col-2">
    												<input v-model="task.name" class="form-control" type="text" readonly />
    											</div>
    											<label class="col-2 col-form-label text-right">Annotations</label>
    											<div class="col-1">
    												<input v-model="task.annotations.length" class="form-control" type="text"
    																			      readonly />
    											</div>
    											<label class="col-1 col-form-label text-right">Jobs</label>
    											<div class="col-1">
    												<input v-model="task.jobs.length" class="form-control" type="text"
    																		       readonly />
    											</div>
    											<div class="col-4">
    												<div class="btn-group float-right" role="group">
    													<button type="button" class="btn btn-primary" data-toggle="modal"
    																		      data-target="#atlas_ui_annotations_modal"
    																		      v-on:click="editTask(task)">Edit</button>
    													<button type="button" class="btn btn-info" data-toggle="modal"
    																		   data-target="#atlas_ui_jobs_modal" v-on:click="showJobsForTask(selected_project, task)">Jobs</button>
    													<button type="button" class="btn btn-default" v-on:click="getResultLink(selected_project, task)">
    														<img src="static/results.svg" width="20" height="20"/>
    													</button>
    													<button type="button" class="btn btn-danger" v-on:click="deleteTask(selected_project, index)">Delete</button>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    											</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    										</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    
    
    							<!-- Button group -->
    							<div class="btn-group" role="group">
    								<button v-on:click="newTask" type="button" class="btn btn-primary" data-toggle="modal"
    																   data-target="#atlas_ui_annotations_modal">New task...</button>
    								<button type="button" class="btn btn-secondary">Task wizard</button>
    							</div>
    						</div>
    						<div class="modal-footer">
    							<button type="button" class="btn btn-primary" data-dismiss="modal"
    												      v-on:click="saveProject(selected_project)">Save</button>
    							<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeProject()">Close</button>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    						</div>
    					</div>
    				</div>
    			</div>
    
    
    			<div class="modal fade" id="atlas_ui_annotations_modal" tabindex="-1" role="dialog"
    											      aria-labelledby="exampleModalLabel" aria-hidden="true" v-if="selected_task !== null">
    				<div class="modal-dialog modal-lg" role="document">
    					<div class="modal-content">
    						<!-- Header of dialogue -->
    						<div class="modal-header">
    							<h5 class="modal-title" id="exampleModalLabel">
    								{{selected_task.task_id}} - {{selected_project.name}} - {{selected_task.name}}</h5>
    							<button type="button" class="close" data-dismiss="modal" aria-label="Close" v-on:click="closeTask()">
    								<span aria-hidden="true">&times;</span>
    							</button>
    						</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    
    
    						<!-- Body of dialogue -->
    						<div class="modal-body">
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    							<div class="form-group">
    
    								<!-- Project information -->
    								<div class="form-group">
    									<label for="atlas_ui_task_form_name">Name</label>
    									<input v-model="selected_task.name" type="text" class="form-control"
    															id="atlas_ui_task_form_name">
    
    									<label for="atlas_ui_task_form_filter">Annotation filter</label>
    									<input v-model="annotation_filter" type="text" class="form-control"
    															id="atlas_ui_task_form_filter">
    
    									<input type="checkbox" v-model="enable_auto_rename" id="atlas_ui_task_form_auto_rename"/>
    									<label for="atlas_ui_task_form_auto_rename">Enable auto-rename</label>
    								</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    
    
    								<!-- List of annotations -->
    								<label for="atlas_annotation_list">Annotations</label>
    
    								<ol id="atlas_annotation_list_selected"
    
    								    class="list-group atlas_annotation_list border border-dark rounded bg-light"
    								    v-if="selected_task !== null">
    									<li v-for="(annotation, index) in selected_task.annotations"
    									    class="list-group-item list-group-item-action">
    										<div class="form-row">
    											<label class="col-1 col-form-label text-right">Name</label>
    											<div class="col-3">
    												<input v-model="annotation.name" class="form-control" type="text"
    																		      readonly />
    											</div>
    											<label class="col-1 col-form-label text-right">Section</label>
    											<div class="col-2">
    												<input v-model="annotation.section" class="form-control" type="text"
    																			 readonly />
    											</div>
    											<div class="col-5">
    												<div class="btn-group float-right" role="group">
    													<button type="button" class="btn btn-danger"
    															      v-on:click="removeAnnotationFromTask(index)">Remove</button>
    												</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    											</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    										</div>
    
    								<label for="atlas_annotation_list">Available annotations</label>
    
    								<ol id="atlas_annotation_list_available"
    
    								    class="list-group atlas_annotation_list border border-dark rounded bg-light"
    								    v-if="selected_task !== null">
    									<li v-for="(annotation, index) in available_annotations"
    
    									    v-if="filterAnnotation(annotation)"
    
    									    class="list-group-item list-group-item-action">
    										<div class="form-row">
    											<label class="col-1 col-form-label">Name</label>
    											<div class="col-3">
    												<input v-model="annotation.name" class="form-control" type="text" />
    											</div>
    											<label class="col-1 col-form-label">Section</label>
    											<div class="col-2">
    												<input v-model="annotation.section" class="form-control" type="text"
    																			 readonly />
    											</div>
    											<div class="col-5">
    												<div class="btn-group float-right" role="group">
    													<button type="button" class="btn btn-primary"
    															      v-on:click="addAnnotationToTask(index)">Add</button>
    												</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    											</div>
    										</div>
    
    									</li>
    								</ol>
    							</div>
    						</div>
    						<div class="modal-footer">
    							<button type="button" class="btn btn-primary" data-dismiss="modal"
    												      v-on:click="saveTask(selected_project, selected_task)">Save</button>
    							<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeTask()">Close</button>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    						</div>
    					</div>
    				</div>
    			</div>
    
    
    			<div class="modal fade" id="atlas_ui_jobs_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    												     aria-hidden="true" v-if="selected_task !== null">
    				<div class="modal-dialog modal-lg" role="document">
    					<div class="modal-content">
    						<!-- Header of dialogue -->
    						<div class="modal-header">
    							<h5 class="modal-title" id="exampleModalLabel">
    								{{selected_project.name}} - {{selected_task.name}}</h5>
    							<button type="button" class="close" data-dismiss="modal" aria-label="Close" v-on:click="closeTask()">
    								<span aria-hidden="true">&times;</span>
    							</button>
    						</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    
    
    						<!-- Body of dialogue -->
    						<div class="modal-body">
    							<!-- List of jobs -->
    							<!-- <div class="form-group row">
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    
    
    	       </div>
    	       </div>
    	       <div class="form-group row">
    	       <label for="atlas_job_configuration_form_time"
    	       class="col-form-label col-sm-2">Time</label>
    	       <div class="col-sm-10">
    	       <input v-model="job_configuration.time" class="form-control"
    	       id="atlas_job_configuration_form_time" type="text" />
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    
    
    	       </div>
    	       </div> -->
    	       <!-- <div class="form-group col-md-6">
    		<label for="atlas_job_configuration_form_account"
    		class="col-form-label col-sm-2">Account</label>
    		<input v-model="job_configuration.account" class="form-control"
    		id="atlas_job_configuration_form_account" type="text" />
    		<label for="atlas_job_configuration_form_time">Time</label>
    		<input v-model="job_configuration.time" class="form-control" type="text" />
    		<label for="atlas_job_configuration_form_gres">Generic ressources</label>
    		<input v-model="job_configuration.gres" class="form-control" type="text" />
    		<label for="atlas_job_configuration_form_mail_type">Mail type</label>
    		<input v-model="job_configuration.mail_type" class="form-control" type="text" />
    		<label for="atlas_job_configuration_form_mail_user">Mail user</label>
    		<input v-model="job_configuration.mail_user" class="form-control" type="text" />
    		</div>
    		<div class="form-group col-md-6">
    		<label for="atlas_job_configuration_form_mail_num nodes"># Nodes</label>
    		<input v-model="job_configuration.num_nodes" class="form-control" type="number"
    										  min="1" max="100" />
    										  <label for="atlas_job_configuration_form_mail_partition">Partition</label>
    										  <input v-model="job_configuration.partition" class="form-control" type="text" />
    										  <label for="atlas_job_configuration_form_mail_reservation">Reservation</label>
    										  <input v-model="job_configuration.reservation" class="form-control"
    																 type="text" />
    																 </div> -->
    																 <div class="form-group">
    																	 <label for="atlas_job_list">Jobs</label>
    																	 <ol id="atlas_job_list"
    																	     class="list-group atlas_job_list border border-dark rounded bg-light"
    																	     v-if="selected_task !== null">
    																		 <li v-for="(job, index) in selected_task.jobs"
    																		     class="list-group-item list-group-item-action">
    																			 <div class="form-row">
    																				 <label class="col-1 col-form-label text-right">ID</label>
    																				 <div class="col-2">
    																					 <input v-model="job.job_id" class="form-control" type="text" readonly />
    																				 </div>
    																				 <!-- <label class="col-1 col-form-label text-right">Type</label> -->
    																				 <div class="col-2">
    																					 <input v-model="job.job_configuration.job_type" class="form-control"
    																											 type="text" readonly />
    																				 </div>
    																				 <label class="col-1 col-form-label text-right">Status</label>
    																				 <div class="col-3">
    																					 <input v-model="job.status" class="form-control"
    																								     type="text" readonly />
    																				 </div>
    																				 <div class="col-3">
    																					 <div class="btn-group float-right" role="group">
    																						 <button type="button" class="btn btn-info" v-on:click="getJobStatus(selected_project, selected_task, job)">Status</button>
    																						 <button type="button" class="btn btn-danger"
    																								       v-on:click="cancelJob(selected_project, selected_task, index)">Cancel</button>
    																					 </div>
    																				 </div>
    																			 </div>
    																		 </li>
    																	 </ol>
    																 </div>
    																 <!-- Button group -->
    																 <div class="btn-group" role="group">
    																	 <button type="button" class="btn btn-primary" v-on:click="submitTrainingJob(selected_project, selected_task)">Start training</button>
    																	 <button type="button" class="btn btn-primary" v-on:click="submitPredictionJob(selected_project, selected_task)">Start prediction</button>
    																	 <button type="button" class="btn btn-secondary" v-on:click="getJobStatusForAll(selected_project, selected_task)">Update all</button>
    																	 <!-- <button type="button" class="btn btn-danger"
    			  v-on:click="cancelAllJobs(selected_project, selected_task)">Cancel all</button> -->
    																 </div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    					</div>
    					<div class="modal-footer">
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    						<!-- <button type="button" class="btn btn-primary" data-dismiss="modal"
    
    	      v-on:click="saveTask(selected_project, selected_task)">Save</button> -->
          <button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeTask()">Close</button>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    					</div>
    				</div>
    			</div>
    		</div>
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    
    
    			<div class="modal fade" id="atlas_ui_imports_modal" tabindex="-1" role="dialog"
    				 aria-labelledby="exampleModalLabel" aria-hidden="true">
    				<div class="modal-dialog modal-lg" role="document">
    					<div class="modal-content">
    						<!-- Header of dialogue -->
    						<div class="modal-header">
    							<h5 class="modal-title" id="exampleModalLabel">Import annotations</h5>
    							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    								<span aria-hidden="true">&times;</span>
    							</button>
    						</div>
    
    						<!-- Body of dialogue -->
    						<div class="modal-body">
    							<div class="form">
    								<div class="form-row">
    
    									<label class="col-form-label col-2">Source host</label>
    
    									<div class="col-4">
    										<input v-model="annotation_import.src_host" class="form-control" type="text"
    											   data-toggle="tooltip" data-placement="top" title="Host of the machine to retrieve annotations from. If you do not know what this is, leave the default value untouched.">
    									</div>
    
    									<div class="col-4">
    										<input type="checkbox" v-model="annotation_import.project_import" id="atlas_ui_import_form_project_import"
    											   data-toggle="tooltip" data-placement="top" title="Switch between import from user and import from predictions of specific task.">
    										<label for="atlas_ui_import_form_project_import">Import predictions</label>
    									</div>
    
    								</div>
    								<div class="form-row">
    
    									<label class="col-form-label col-2" v-if="annotation_import.project_import">Project ID</label>
    									<label class="col-form-label col-2" v-else>Source user</label>
    
    									<div class="col-4">
    
    										<input type="number" min="0" v-model="annotation_import.src_project" type="text" class="form-control" v-if="annotation_import.project_import"
    										data-toggle="tooltip" data-placement="top" title="ID of project to import predictions from.">
    										<input v-model="annotation_import.src_user" type="text" class="form-control" v-else
    
    										data-toggle="tooltip" data-placement="top" title="Microdraw user on source host to retrieve annotations from.">
    									</div>
    
    									<label class="col-form-label col-2">Destination user</label>
    
    									<div class="col-4">
    										<input v-model="annotation_import.dst_user" type="text" class="form-control"
    										data-toggle="tooltip" data-placement="top" title="Microdraw user to import annotations to.">
    									</div>
    								</div>
    
    								<div class="form-row">
    
    									<label class="col-form-label col-2" v-if="annotation_import.project_import">Task ID</label>
    									<label class="col-form-label col-2" v-else>Source path</label>
    
    
    									<div class="col-4">
    
    										<input type="number" min="0" v-model="annotation_import.src_task" type="text" class="form-control" v-if="annotation_import.project_import"
    										data-toggle="tooltip" data-placement="top" title="ID of task to import predictions from.">
    										<input v-model="annotation_import.src_path" type="text" class="form-control" v-else
    
    										data-toggle="tooltip" data-placement="top" title="Microdraw path to import annotations from.">
    									</div>
    
    									<label class="col-form-label col-2">Destination path</label>
    
    									<div class="col-4">
    										<input v-model="annotation_import.dst_path" type="text" class="form-control"
    										data-toggle="tooltip" data-placement="top" title="Microdraw path to import annotations to.">
    									</div>
    									<div class="col-1">
    									</div>
    								</div>
    								<br>
    								<div class="form-row">
    									<div class="btn-group float-right" role="group">
    										<button type="button" class="btn btn-primary" v-on:click="getAnnotations" :disabled="annotation_import.loading_state"
    											data-toggle="tooltip" data-placement="top" title="Retrieve annotations from source host. Enter source host, user and path first.">
    											Retrieve source annotations
    										</button>
    									</div>
    								</div>
    								<br>
    
    								<!-- List of annotations -->
    								<ol id="atlas_import_list"
    									class="list-group atlas_task_list border border-dark rounded bg-light">
    									<li v-for="ann_item in annotation_import.annotation_items"
    										class="list-group-item list-group-item-action">
    										<div class="form-row">
    											<label class="col-1 col-form-label text-right">Section</label>
    											<div class="col-2">
    												<input v-model="ann_item.section" class="form-control" type="text" readonly />
    											</div>
    											<label class="col-2 col-form-label text-right">Annotations</label>
    
    												<input v-model="ann_item.annotations.Regions.length" class="form-control" type="text" readonly />
    											</div>
    
    											</div>
    											<div class="col-3">
    												<div class="btn-group" role="group">
    													<button type="button" class="btn btn-primary" v-on:click="importAnnotation(ann_item, false)" :disabled="ann_item.loading_state"
    															data-toggle="tooltip" data-placement="top" title="Add annotations without overwriting existing annotations.">Add</button>
    													<button type="button" class="btn btn-danger" v-on:click="importAnnotation(ann_item, true)" :disabled="ann_item.loading_state"
    															data-toggle="tooltip" data-placement="top" title="Overwrite existing annotations for this section.">Overwrite</button>
    												</div>
    											</div>
    										</div>
    									</li>
    								</ol>
    							</div>
    							<br>
    
    							<!-- Button group -->
    							<div class="btn-group" role="group">
    								<button v-on:click="importAll(false)" type="button" class="btn btn-primary"
    										data-toggle="tooltip" data-placement="top" title="Add all annotations without overwriting existing annotations.">
    									Add all
    								</button>
    								<button v-on:click="importAll(true)" type="button" class="btn btn-danger"
    									data-toggle="tooltip" data-placement="top" title="Overwrite all existing annotations.">
    									Overwrite all
    								</button>
    							</div>
    						</div>
    						<div class="modal-footer">
    							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    						</div>
    					</div>
    				</div>
    			</div>
    
    
    Schiffer, Christian's avatar
    Schiffer, Christian committed
    		<!-- Discard changes dialogue -->
    
    		</div>
    		<!-- development version, includes helpful console warnings -->
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<!-- <script src="https://unpkg.com/vue-contextmenu"></script> -->
    		<script src="lib/paper-full-0.9.25.min.js"></script>
    		<script src="lib/openseadragon/openseadragon.js"></script>
    		<script src="lib/openseadragon-viewerinputhook.min.js"></script>
    		<script src="lib/OpenSeadragonScalebar/openseadragon-scalebar.js"></script>
    		<script src="lib/openseadragonrgb/dist/openseadragonrgb.js"></script>
    		<script src="lib/jquery-1.11.0.min.js"></script>
    		<script src="lib/mylogin/login.js"></script>
    		<script src="neurolex-ontology.js"></script>
    		<script src="base.js"></script>
    		<script src="cross.js"></script>
    		<script src="configuration.js"></script>
    		<script src="microdraw.js"></script>
    		<script src="atlas_ui.js"></script>
    	</body>