From 0d06192b71c58ce1956cca05c784d6e420ea297e Mon Sep 17 00:00:00 2001
From: naiq-xyz <lizhiqian23@mails.ucas.ac.cn>
Date: Wed, 2 Oct 2024 21:49:13 +0800
Subject: [PATCH] adjust visualization style and function
---
static/software-script.js | 17 ++++++++++++-----
static/software-style.css | 8 ++++----
wiki/pages/visualization.html | 11 ++++++-----
3 files changed, 22 insertions(+), 14 deletions(-)
diff --git a/static/software-script.js b/static/software-script.js
index ddd627b..41d0abd 100644
--- a/static/software-script.js
+++ b/static/software-script.js
@@ -376,7 +376,8 @@ const remove = (row, start, end) => {
const images = curImages[row].slice(start, end).map(i => IMAGES[row][i]);
const prefix = curImages[row].slice(0, start).map(i => IMAGES[row][i]);
- const moveX = images.reduce((sum, img) => sum + img.offsetWidth, 0);
+ const moveX = IMAGES[row][curImages[row][end]].offsetLeft -
+ IMAGES[row][curImages[row][start]].offsetLeft;
images.forEach(img => {
img.style.transition = 'transform ' + (updateDur / 2) + 'ms' +
@@ -409,8 +410,8 @@ const getCurExpr = (row) => {
}
return expr;
};
-const updateCircuit = (inducer) => {
- const id = inducers.indexOf(inducer);
+const checkUpdate = (inducer) => {
+ const id = inducers.indexOf(inducer);
if (id == -1) return -1;
const row = id >> 2;
@@ -429,6 +430,12 @@ const updateCircuit = (inducer) => {
alert("Could not add the same inducer twice!");
return -1;
}
+ return [id, row, start, end];
+}
+const updateCircuit = (inducer) => {
+ const res = checkUpdate(inducer);
+ if (res == -1) return -1;
+ const [id, row, start, end] = res;
if (inducerAdded.innerHTML == 'Nothing.')
inducerAdded.innerHTML = '';
@@ -454,8 +461,8 @@ const updateCircuit = (inducer) => {
setTimeout(() => {
rearrImg(row, curImages[row]);
- if (id == 0) updateCircuit('Ara-2');
- else if (id == 4) updateCircuit('DAPG-2');
+ if (id == 0 && checkUpdate('Ara-2') != -1) updateCircuit('Ara-2');
+ else if (id == 4 && checkUpdate('DAPG-2') != -1) updateCircuit('DAPG-2');
else {
enableBtns(runBtn, resetBtn, showBtn);
options[geneID(inducer)].disabled = true;
diff --git a/static/software-style.css b/static/software-style.css
index 18fa4f7..e85da6c 100644
--- a/static/software-style.css
+++ b/static/software-style.css
@@ -32,7 +32,7 @@ body {
}
table {
- font-size: 20px;
+ /* font-size: 20px; */
}
td,
@@ -266,8 +266,7 @@ select:placeholder {
.title {
left: 20vh;
font-size: 3vh;
- margin: auto;
- margin-bottom: 5vh;
+ margin: 3vh auto;
}
.title .txt {
margin-left: 5em;
@@ -275,6 +274,7 @@ select:placeholder {
.title h1 {
font-size: 200%;
margin: 0;
+ font-weight: bold;
color: #ff6060;
}
@@ -427,7 +427,7 @@ main {
.line.single {
left: auto;
- width: 60%;
+ width: 50%;
top: auto;
}
diff --git a/wiki/pages/visualization.html b/wiki/pages/visualization.html
index 04f128c..bd9b2e7 100644
--- a/wiki/pages/visualization.html
+++ b/wiki/pages/visualization.html
@@ -10,11 +10,12 @@
<link href="{{ url_for('static', filename = 'software-style.css') }}" rel="stylesheet">
<div class="container" id="main-container">
<aside>
- <div class="title"></div>
- <img src="https://static.igem.wiki/teams/5276/software/whitelogo.webp" style="width: 11vh; float: left;" />
- <div class="txt">
- <h1>Lantern</h1>
- Interactive Demo
+ <div class="title">
+ <img src="https://static.igem.wiki/teams/5276/software/whitelogo.webp" style="width: 11vh; float: left;" />
+ <div class="txt">
+ <h1>Lantern</h1>
+ Interactive Demo
+ </div>
</div>
<div class="left">Original Expression:
<input id="expr-input" placeholder="Input here..."
--
GitLab