update css

app.py

@@ -34,7 +34,7 @@ If your data doesn't contain all of the mentioned channels, there are 3 imputati
 Firstly, we will attempt to find neighboring channel to use as alternative. For instance, if the required channel is **FC3** but you only have **FC1**, we will use it as a replacement for **FC3**.  
 Then, depending on the **Imputation** way you chose, we will:
 - **zero**: fill the missing channels with zeros.
-- **adjacent**: fill the missing channels using neighboring channels which are located closer to the center. For example, if the required channel is **F3** but you only have **F7, FZ**, then we will choose **FZ** as the imputing value for **F3**.
+- **adjacent**: fill the missing channels using neighboring channels which are located closer to the center. For example, if the required channel is **FC3** but you only have **F3, C3**, then we will choose **C3** as the imputing value for **FC3**.
 >Note: The imputed channels **need to be removed** after the data being reconstructed.
 
 ### Mapping result
@@ -63,6 +63,39 @@ icunet = """
 Electroencephalography (EEG) signals are often contaminated with artifacts. It is imperative to develop a practical and reliable artifact removal method to prevent the misinterpretation of neural signals and the underperformance of brain–computer interfaces. Based on the U-Net architecture, we developed a new artifact removal model, IC-U-Net, for removing pervasive EEG artifacts and reconstructing brain signals. IC-U-Net was trained using mixtures of brain and non-brain components decomposed by independent component analysis. It uses an ensemble of loss functions to model complex signal fluctuations in EEG recordings. The effectiveness of the proposed method in recovering brain activities and removing various artifacts (e.g., eye blinks/movements, muscle activities, and line/channel noise) was demonstrated in a simulation study and four real-world EEG experiments. IC-U-Net can reconstruct a multi-channel EEG signal and is applicable to most artifact types, offering a promising end-to-end solution for automatically removing artifacts from EEG recordings. It also meets the increasing need to image natural brain dynamics in a mobile setting.
 """
 
+chkbox_js = """
+(state_json) => {
+	state_json = JSON.parse(JSON.stringify(state_json));
+	if(state_json.state == "finished") return;
+	
+	document.querySelector("#chs-chkbox>div:nth-of-type(2)").style.cssText = `
+		position: relative;
+		width: 560px;
+		height: 560px;
+		background: url("file=${state_json.files.raw_montage}");
+	`;
+
+	let all_chkbox = document.querySelectorAll("#chs-chkbox> div:nth-of-type(2)> label");
+	all_chkbox = Array.apply(null, all_chkbox);
+	
+	all_chkbox.forEach((item, index) => {
+		let channel = state_json.inputByIndex[index];
+		let left = state_json.inputByName[channel].css_position[0];
+		let bottom = state_json.inputByName[channel].css_position[1];
+		//console.log(`left: ${left}, bottom: ${bottom}`);
+		
+		item.style.cssText = `
+			position: absolute;
+			left: ${left};
+			bottom: ${bottom};
+		`;
+		item.className = "";
+		item.querySelector("span").innerText = "";
+	});
+	
+}
+"""
+
 
 with gr.Blocks() as demo:
 
@@ -71,8 +104,7 @@ with gr.Blocks() as demo:
 	with gr.Row():
 		gr.Markdown(
 			"""
-			# Introduction
-			(...)
+			
 			"""
 		)
 	with gr.Row():
@@ -100,29 +132,17 @@ with gr.Blocks() as demo:
 						""",
 						visible=False
 					)
-			#chk_md = gr.Markdown(
-			#			"""
-			#			select...
-		    #    		""",
-		    #    		visible=False
-			#		)
 			with gr.Row():
 				tpl_montage = gr.Image("./template_montage.png", label="Template montage", visible=False)
 				map_montage = gr.Image(label="Choosen channels", visible=False)
-				in_montage = gr.Image(label="Input montage", visible=False)
-			with gr.Accordion(visible=False) as accordion:
-				with gr.Column():
-					#chk_block = gr.HTML(chk_html)
-					#in_montage = gr.Image(label="Input montage")
-					chs_chkbox = gr.CheckboxGroup(elem_classes="chs-chkbox", label="")
-					next_btn = gr.Button("Next", interactive=False)
+			chs_chkbox = gr.CheckboxGroup(elem_id="chs-chkbox", label="", visible=False)
+			next_btn = gr.Button("Next", interactive=False, visible=False)
 			miss_txtbox = gr.Textbox(label="Missing channels", visible=False)
 			tpl_loc_file = gr.File("./template_chanlocs.loc", show_label=False, visible=False)
-			#test_file = gr.File(label="test")
 		with gr.Column():
 			gr.Markdown(
 				"""
-				# 2.Decode Data(?)
+				# 2.Decode Data
 				"""
 			)
 			with gr.Row():
@@ -146,7 +166,7 @@ with gr.Blocks() as demo:
 		with gr.Tab("QuickStart"):
 			gr.Markdown(quickstart)
     
-	#demo.load(js=chk_script)
+	#demo.load(js=js)
 	
 	def reset_layout(raw_data):
 		# establish temp folder
@@ -157,15 +177,16 @@ with gr.Blocks() as demo:
 			utils.dataDelete(filepath+"/temp_data/")
 			os.mkdir(filepath+"/temp_data/")
 			#print(e)
-		
-		return {state_json : {"filepath" : filepath+"/temp_data/"},
-				accordion : gr.Accordion(visible=False),
-				chs_chkbox : gr.CheckboxGroup(choices=[], value=[], label=""), # choices, value ???
-				next_btn : gr.Button("Next", interactive=False),
+		state_obj = {
+			"filepath": filepath+"/temp_data/",
+			"files": {}
+		}
+		return {state_json : state_obj,
+				chs_chkbox : gr.CheckboxGroup(choices=[], value=[], label="", visible=False), # choices, value ???
+				next_btn : gr.Button("Next", interactive=False, visible=False),
 				run_btn : gr.Button(interactive=False),
 				tpl_montage : gr.Image(visible=False),
-				map_montage : gr.Image(value=None, visible=False), #tmp
-				in_montage : gr.Image(value=None, visible=False),
+				map_montage : gr.Image(value=None, visible=False),
 				miss_txtbox : gr.Textbox(visible=False),
 				res_md : gr.Markdown(visible=False),
 				tpl_loc_file : gr.File(visible=False)}
@@ -181,7 +202,7 @@ with gr.Blocks() as demo:
 			})
 			#print("Missing channels:", state_obj["missingChannelsIndex"])
 			return {state_json : state_obj,
-					accordion : gr.Accordion(visible=True)}
+					next_btn : gr.Button(visible=True)}
 		else:
 			reorder_data(raw_data, channels_obj["newOrder"], fill_mode, state_obj)
 		    
@@ -202,23 +223,29 @@ with gr.Blocks() as demo:
 	def show_montage(state_obj, raw_loc):
 		filepath = state_obj["filepath"]
 		raw_montage = read_custom_montage(raw_loc)
+		
+		# convert all channel names to uppercase
 		for i in range(len(raw_montage.ch_names)):
 			channel = raw_montage.ch_names[i]
 			raw_montage.rename_channels({channel: str.upper(channel)})
 		
 		if state_obj["state"] == "initializing":
 			filename = filepath+"raw_montage_"+str(random.randint(1,10000))+".png"
+			state_obj["files"]["raw_montage"] = filename
 			raw_fig = raw_montage.plot()
-			raw_fig.savefig(filename)
+			raw_fig.set_size_inches(5.6, 5.6)
+			raw_fig.savefig(filename, pad_inches=0)
 			
-			return {tpl_montage : gr.Image(visible=True),
-					in_montage : gr.Image(value=filename, visible=True),
-					map_montage : gr.Image(visible=False)}
+			return {state_json : state_obj}#,
+					#tpl_montage : gr.Image(visible=True),
+					#in_montage : gr.Image(value=filename, visible=True),
+					#map_montage : gr.Image(visible=False)}
 		
 		elif state_obj["state"] == "finished":
 			# didn't find any way to hide the dark points...
 			# tmp
 			filename = filepath+"mapped_montage_"+str(random.randint(1,10000))+".png"
+			state_obj["files"]["map_montage"] = filename
 			
 			show_names= []
 			for channel in state_obj["inputByName"]:
@@ -227,36 +254,37 @@ with gr.Blocks() as demo:
 			            continue
 			        show_names.append(channel)
 			mapped_fig = raw_montage.plot(show_names=show_names)
-			mapped_fig.savefig(filename)
+			mapped_fig.set_size_inches(5.6, 5.6)
+			mapped_fig.savefig(filename, pad_inches=0)
 			
-			return {tpl_montage : gr.Image(visible=True),
-					in_montage : gr.Image(visible=False),
-					map_montage : gr.Image(value=filename, visible=True)} # value=, 
+			return {state_json : state_obj,
+					tpl_montage : gr.Image(visible=True),
+					map_montage : gr.Image(value=filename, visible=True)}
 					
 		elif state_obj["state"] == "selecting":
-			# need to update in_montage here
-			return {in_montage : gr.Image()}
+			# update in_montage here ?
+			#return {in_montage : gr.Image()}
+			return {state_json : state_obj}
 	
 	def generate_chkbox(state_obj):
 		if state_obj["state"] == "initializing":
 			in_channels = [channel for channel in state_obj["inputByName"]]
 			state_obj["state"] = "selecting"
-			# and img....?
 			
 			first_idx = state_obj["missingChannelsIndex"][0]
 			first_name = state_obj["templateByIndex"][first_idx]
 			chkbox_label = first_name+' (1/'+str(state_obj["totalFillingNum"]+1)+')'
 			return {state_json : state_obj,
-					chs_chkbox : gr.CheckboxGroup(choices=in_channels, label=chkbox_label),
+					chs_chkbox : gr.CheckboxGroup(choices=in_channels, label=chkbox_label, visible=True),
 					next_btn : gr.Button(interactive=True)}
 		else:
-			return {state_json : gr.JSON()}
+			return {state_json : state_obj}
 
 	
 	map_btn.click(
 	    fn = reset_layout,
 	    inputs = in_raw_data,
-		outputs = [state_json, accordion, chs_chkbox, next_btn, run_btn, tpl_montage, map_montage, in_montage, miss_txtbox,
+		outputs = [state_json, chs_chkbox, next_btn, run_btn, tpl_montage, map_montage, miss_txtbox,
 					res_md, tpl_loc_file]
 		
 	).success(
@@ -267,67 +295,79 @@ with gr.Blocks() as demo:
 	).success(
 		fn = mapping_result, 
 		inputs = [state_json, channels_json, in_raw_data, in_fill_mode], 
-		outputs = [state_json, accordion, miss_txtbox, res_md, tpl_loc_file, run_btn]
+		outputs = [state_json, chs_chkbox, next_btn, miss_txtbox, res_md, tpl_loc_file, run_btn]
 		
 	).success(
 		fn = show_montage, 
 		inputs = [state_json, in_raw_loc], 
-		outputs = [in_montage, tpl_montage, map_montage]
+		outputs = [state_json, tpl_montage, map_montage]
 		
 	).success(
 		fn = generate_chkbox, 
 		inputs = state_json, 
 		outputs = [state_json, chs_chkbox, next_btn]
+	).success(
+		fn = None,
+		js = chkbox_js,
+		inputs = state_json,
+		outputs = []
 	)
     
 
 	def check_next(state_obj, selected, raw_data, fill_mode):
 		if state_obj["state"] == "selecting":
+			
+			# save info before clicking on next_btn
+			prev_target_idx = state_obj["missingChannelsIndex"][state_obj["fillingCount"]]
+			prev_target_name = state_obj["templateByIndex"][prev_target_idx]
+			
+			selected_idx = [state_obj["inputByName"][channel]["index"] for channel in selected]
+			state_obj["newOrder"][prev_target_idx] = selected_idx
+			
+			if len(selected)==1 and state_obj["inputByName"][selected[0]]["used"]==False:
+			    state_obj["inputByName"][selected[0]]["used"] = True
+			    state_obj["missingChannelsIndex"][state_obj["fillingCount"]] = -1
+			
+			print('Selection for missing channel "{}"({}): {}'.format(prev_target_name, prev_target_idx, selected))
+			
+			# update next round
+			state_obj["fillingCount"] += 1
 			if state_obj["fillingCount"] <= state_obj["totalFillingNum"]:
+				target_idx = state_obj["missingChannelsIndex"][state_obj["fillingCount"]]
+				target_name = state_obj["templateByIndex"][target_idx]
+				chkbox_label = target_name+' ('+str(state_obj["fillingCount"]+1)+'/'+str(state_obj["totalFillingNum"]+1)+')'
+				btn_label = "Submit" if state_obj["fillingCount"]==state_obj["totalFillingNum"] else "Next"
 				
-				# info before clicking on next_btn
-				prev_target_idx = state_obj["missingChannelsIndex"][state_obj["fillingCount"]]
-				prev_target_name = state_obj["templateByIndex"][prev_target_idx]
-				
-				selected_idx = [state_obj["inputByName"][channel]["index"] for channel in selected]
-				state_obj["newOrder"][prev_target_idx] = selected_idx
-				
-				print('Selection for missing channel "{}"({}): {}'.format(prev_target_name, prev_target_idx, selected))
+				return {state_json : state_obj,
+						chs_chkbox : gr.CheckboxGroup(value=[], label=chkbox_label),
+						next_btn : gr.Button(btn_label)}
+			else:
+				state_obj["state"] = "finished"
+				reorder_data(raw_data, state_obj["newOrder"], fill_mode, state_obj)
 				
-				# update next round
-				state_obj["fillingCount"] += 1
-				if state_obj["fillingCount"] <= state_obj["totalFillingNum"]:
-					target_idx = state_obj["missingChannelsIndex"][state_obj["fillingCount"]]
-					target_name = state_obj["templateByIndex"][target_idx]
-					chkbox_label = target_name+' ('+str(state_obj["fillingCount"]+1)+'/'+str(state_obj["totalFillingNum"]+1)+')'
-					btn_label = "Submit" if state_obj["fillingCount"]==state_obj["totalFillingNum"] else "Next"
-					
-					return {state_json : state_obj,
-							chs_chkbox : gr.CheckboxGroup(value=[], label=chkbox_label),
-							next_btn : gr.Button(btn_label)}
-				else:
-					state_obj["state"] = "finished"
-					reorder_data(raw_data, state_obj["newOrder"], fill_mode, state_obj)
-					
-					missing_channels = [state_obj["templateByIndex"][idx] for idx in state_obj["missingChannelsIndex"]]
-					missing_channels = ', '.join(missing_channels)
+				missing_channels = []
+				for idx in state_obj["missingChannelsIndex"]:
+				    if idx != -1:
+				        missing_channels.append(state_obj["templateByIndex"][idx])
+				missing_channels = ', '.join(missing_channels)
 					
-					return {state_json : state_obj,
-							accordion : gr.Accordion(visible=False),
-							res_md : gr.Markdown(visible=True),
-			        		miss_txtbox : gr.Textbox(value=missing_channels, visible=True),
-			        		tpl_loc_file : gr.File(visible=True),
-							run_btn : gr.Button(interactive=True)}
+				return {state_json : state_obj,
+						chs_chkbox : gr.CheckboxGroup(visible=False),
+						next_btn : gr.Button(visible=False),
+						res_md : gr.Markdown(visible=True),
+			        	miss_txtbox : gr.Textbox(value=missing_channels, visible=True),
+			        	tpl_loc_file : gr.File(visible=True),
+						run_btn : gr.Button(interactive=True)}
 	
 	next_btn.click(
 	    fn = check_next, 
 	    inputs = [state_json, chs_chkbox, in_raw_data, in_fill_mode],
-	    outputs = [state_json, accordion, chs_chkbox, next_btn, run_btn, res_md, miss_txtbox, tpl_loc_file]
+	    outputs = [state_json, chs_chkbox, next_btn, run_btn, res_md, miss_txtbox, tpl_loc_file]
 	    
 	).success(
 	    fn = show_montage, 
 	    inputs = [state_json, in_raw_loc], 
-	    outputs = [in_montage, tpl_montage, map_montage]
+	    outputs = [state_json, tpl_montage, map_montage]
 	)
     
     

channel_mapping.py

@@ -7,7 +7,6 @@ import mne
 from mne.channels import read_custom_montage
 
 def reorder_data(filename, old_idx, fill_mode, state_obj):
-	#filepath = os.path.dirname(str(filename))
 	old_data = utils.read_train_data(filename)
 	new_data = np.zeros((30, old_data.shape[1]))
 	new_filename = state_obj["filepath"]+'mapped.csv'
@@ -27,21 +26,21 @@ def reorder_data(filename, old_idx, fill_mode, state_obj):
 			new_data[i, :] = np.mean(tmp_data, axis=0)
 
 	#print('new data shape: ', new_data.shape)
-	#utils.save_data(new_data, filepath+'/temp_data/mapped.csv')
 	utils.save_data(new_data, new_filename)
 	return
 
 
 class Channel:
 
-	def __init__(self, index, name=None, used=False, coord=None, topo_index=None, topo_location=None):
+	def __init__(self, index, name=None, used=False, coord=None, css_position=None, topo_index=None, topo_position=None):
 
 		self.name = name
 		self.index = index
 		self.used = used
 		self.coord = coord
+		self.css_position = css_position
 		self.topo_index = topo_index
-		self.topo_location = topo_location
+		self.topo_position = topo_position
 
 	def prefix(self):
 		ret = ''.join(filter(str.isalpha, self.name))
@@ -52,10 +51,6 @@ class Channel:
 
 
 def pack_data(new_idx, missing_channels, tpl_dict, in_dict, tpl_ordered_name, in_ordered_name):
-
-	# tmp...
-	for ch in in_dict:
-		in_dict[ch].coord = None
 	
 	return {
 		"newOrder" : [([i] if i!=-1 else []) for i in new_idx],
@@ -71,32 +66,41 @@ def mapping(data_file, loc_file, fill_mode):
 	
 	data = utils.read_train_data(data_file)
 	
+	template_dict = {}
+	input_dict = {}
 	template_montage = read_custom_montage("./template_chanlocs.loc")
 	input_montage = read_custom_montage(loc_file)
-	#template_montage.plot()
-	#input_montage.plot()
 	
-	template_dict = {}
-	input_dict = {}
-
-	# convert all channel names to uppercase
-	for i in range(30):
-		channel = template_montage.ch_names[i]
-		template_montage.rename_channels({channel: str.upper(channel)})
-
-		channel = str.upper(channel)
-		template_dict[channel] = Channel(index=i, name=channel)
-
-	for i in range(len(input_montage.ch_names)):
-		channel = input_montage.ch_names[i]
-		input_montage.rename_channels({channel: str.upper(channel)})
-
-		channel = str.upper(channel)
-		input_dict[channel] = Channel(index=i, name=channel, coord=input_montage.get_positions()['ch_pos'][channel])
-
-
+	montages = [template_montage, input_montage]
+	dicts = [template_dict, input_dict]
+	num = [30, len(input_montage.ch_names)]
+	
+	for i in range(2):
+		fig = montages[i].plot()
+		fig.set_size_inches(5.6, 5.6)
+		ax = fig.axes[0]
+		ax.set_aspect('equal')
+		ax.figure.canvas.draw() #update the figure
+		coords = ax.collections[0].get_offsets().data
+		abs_coords = ax.transData.transform(coords)
+		#print("abs_coords)
+		for j in range(num[i]):
+			channel = montages[i].ch_names[j]
+	        
+	        # convert all channel names to uppercase
+			montages[i].rename_channels({channel: str.upper(channel)})
+	        
+			css_left = (abs_coords[j][0]-11)/560
+			css_bottom = (abs_coords[j][1]-7)/560
+			channel = str.upper(channel)
+			dicts[i][channel] = Channel(index=j,
+										name=channel,
+										coord=montages[i].get_positions()['ch_pos'][channel],
+										css_position=[str(round(css_left*100, 2))+"%", str(round(css_bottom*100, 2))+"%"]
+								)
+	
+	
 	new_idx = [-1]*30
-	#new_idx_name = ['']*30  # tmp
 	missing_channels = []
 	exact_missing_channels = []
 	z_row_idx = data.shape[0]
@@ -113,7 +117,7 @@ def mapping(data_file, loc_file, fill_mode):
 		'T6': 'P8',
 		'TP7': 'T5\'',
 		'TP8': 'T6\'',
-		}
+	}
 	
 	for i in range(30):
 		channel = template_montage.ch_names[i]
@@ -134,16 +138,13 @@ def mapping(data_file, loc_file, fill_mode):
 				continue
 
 		new_idx[i] = input_dict[channel].index
-		#new_idx_name[i] = channel  # tmp
 		input_dict[channel].used = True
 
 	if finish_flag == 1:
 		second2 = time.time()
 		print('Finish at stage 1 ! (',second2 - second1,'s)')
-		print('new idx order:', new_idx)
-		#print('new_idx_name:', new_idx_name) # tmp
+		#print('new idx order:', new_idx)
 
-		#reorder_data(input_file, new_idx, fill_mode)
 		channels_obj = pack_data(new_idx, [],
 						template_dict, input_dict,
 						template_montage.ch_names, input_montage.ch_names)
@@ -180,7 +181,7 @@ def mapping(data_file, loc_file, fill_mode):
 				ver = 'front' if i<3 else 'center' if i==3 else 'back'
 				hor = 'left' if j<2 else 'center' if j==2 else 'right'
 				template_dict[channel].topo_index = [i, j]
-				template_dict[channel].topo_location = [ver, hor]
+				template_dict[channel].topo_position = [ver, hor]
 
 				if i > 1 and j in [0, 4]:
 					temporal_channels.append(channel)
@@ -217,8 +218,8 @@ def mapping(data_file, loc_file, fill_mode):
 
 		curr_row = template_dict[channel].topo_index[0]
 		curr_col = template_dict[channel].topo_index[1]
-		curr_ver = template_dict[channel].topo_location[0]
-		curr_hor = template_dict[channel].topo_location[1]
+		curr_ver = template_dict[channel].topo_position[0]
+		curr_hor = template_dict[channel].topo_position[1]
 
 		impute_channel = ''
 
@@ -257,7 +258,6 @@ def mapping(data_file, loc_file, fill_mode):
 			elif curr_hor == 'left' or curr_hor == 'right':
 
 				ver_ctrl = 1 if curr_ver=='front' else 2 if curr_ver=='back' else 3 # bit0: row+1, bit1: row-1
-				#ver_dir = 1 if curr_ver == 'front' else -1
 
 				# search horizontally
 				cnt = 0
@@ -293,16 +293,13 @@ def mapping(data_file, loc_file, fill_mode):
 					impute_channel = 'CZ'
 
 		new_idx[i] = input_dict[impute_channel].index
-		#new_idx_name[i] = impute_channel  # tmp
 		if input_dict[impute_channel].used == True:  # this channel is shared with others
 			missing_channels.append(i)
 		input_dict[impute_channel].used = True
 	
 	second2 = time.time()
 	print('Finish at stage 2 ! (',second2 - second1,'s)')
-	print('new_idx:', new_idx)
-	#print('missing_channels:', missing_channels)
-	#reorder_data(input_file, new_idx, fill_mode)
+	#print('new_idx:', new_idx)
 	
 	channels_obj = pack_data(new_idx, missing_channels,
 						template_dict, input_dict,