diff --git a/ai/ai.py b/ai/ai.py
index 8049b5faa..1a4becce1 100644
--- a/ai/ai.py
+++ b/ai/ai.py
@@ -233,7 +233,7 @@ def initialize_recommenders(self, rec_class):
recArgs = self.DEFAULT_REC_ARGS[pred_type]
recArgs['ml_p'] = ml_p
- recArgs['serialized_rec_directory'] = 'data/recommenders/pennaiweb'
+ recArgs['serialized_rec_directory'] = '/appsrc/data/recommenders/pennaiweb'
recArgs['load_serialized_rec'] = "if_exists"
if kb is not None:
diff --git a/docker-compose-raspberrypi-production.yml b/docker-compose-raspberrypi-production.yml
index 7021f1e79..cfee2a3aa 100644
--- a/docker-compose-raspberrypi-production.yml
+++ b/docker-compose-raspberrypi-production.yml
@@ -21,7 +21,6 @@ services:
- ./config/ai.env
depends_on:
- dbmongo
- restart: always
machine:
build:
@@ -41,7 +40,6 @@ services:
depends_on:
- lab
- dbmongo
- restart: always
dbmongo:
build:
@@ -53,4 +51,3 @@ services:
ports:
- "27017:27017"
env_file: ./config/common.env
- restart: always
diff --git a/docker/dbmongo/Dockerfile b/docker/dbmongo/Dockerfile
index d8f2b5c7a..0f0d9ec96 100644
--- a/docker/dbmongo/Dockerfile
+++ b/docker/dbmongo/Dockerfile
@@ -3,6 +3,12 @@ WORKDIR /opt/
ARG docker_filepath=docker/dbmongo/files
+# RUN apt-get update
+# RUN apt-get install gpg wget
+# RUN wget -O - https://apt.kitware.com/keys/kitware-archive-latest.asc 2>/dev/null | gpg --dearmor - | sudo tee /usr/share/keyrings/kitware-archive-keyring.gpg >/dev/null
+# RUN apt-get update
+
+
#add repo for mongodb
RUN echo "deb http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.2 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-3.2.list
RUN apt-get update --fix-missing && \
diff --git a/docs/guides/userGuide.md b/docs/guides/userGuide.md
index b8fe4aff8..ea12eba3d 100644
--- a/docs/guides/userGuide.md
+++ b/docs/guides/userGuide.md
@@ -16,8 +16,7 @@ Aliro is a multi-container docker project that uses ([Docker-Compose](https://do
- [Linux Docker-Compose Installation](https://docs.docker.com/compose/install/)
### Installation
-1. Download the production zip `Aliro-*.zip` from the asset section of the [latest release](https://github.com/EpistasisLab/Aliro/releases/latest)
- - Note that this is different from the source code zip file.
+1. Download the production zip `Aliro-*.zip` from the asset section of the [latest release](https://github.com/EpistasisLab/Aliro/releases/latest) (note that this is different from the source code zip file).
2. Unzip the archive
## Using Aliro
diff --git a/lab/webapp/dist/App.css b/lab/webapp/dist/App.css
index 3b0bcaf7b..603d2de5f 100644
--- a/lab/webapp/dist/App.css
+++ b/lab/webapp/dist/App.css
@@ -506,6 +506,125 @@ pre.schema {
}
}
+div#segmentAddNewdataCard {
+ /* background: #2185d0;
+ border-color: #2185d0; */
+
+ background: #419ce1;
+ border-color: #419ce1;
+}
+
+/* element a in div#segmentAddNewdataCard */
+div#gridAddNewdataCard a {
+ /* make upper edges round */
+ /* border-radius: .28571429rem .28571429rem .28571429rem .28571429rem !important; */
+
+ /* make the cross icond located in the center of div#gridAddNewdataCard */
+ /* margin-left: 0.5em; */
+
+ /* margin 0 */
+ margin: 0 !important;
+
+
+}
+
+a#addNewDatasetBtnCross i {
+
+ position: absolute;
+ top: 45%;
+ right: 40%;
+ font-size: xxx-large;
+}
+
+
+/* Below ids are the elements in the "Add new dataset button" */
+#testcell, #testcell2 ,#testcell3 {
+ background-color: #2185d0;
+ border-color: #2185d0;
+ color: #2185d0 !important;
+}
+
+#testseg{
+ background-color: #2185d0;
+ border-color: #2185d0;
+ color: #2185d0 !important;
+}
+#testheader{
+ background-color: #2185d0;
+ border-color: #2185d0;
+ color: #2185d0 !important;
+}
+
+
+
+@-webkit-keyframes blinker {
+ 0% { opacity: 8.0; }
+ 50% { opacity: 0.3; }
+ 100% { opacity: 0.8; }
+
+ /* change backgourd color */
+ /* 0% { background-color: #2185d0; }
+ 50% { background-color: #df0909; }
+ 100% { background-color: #2185d0; } */
+
+ /* change boarder color */
+ /* 0% { border-color: #2185d0; }
+ 50% { border-color: #df0909; }
+ 100% { border-color: #2185d0; } */
+
+ /* change backgourd color */
+ /* 0% { background-color: #2185d0; }
+ 50% { background-color: #df0909; }
+ 100% { background-color: #2185d0; } */
+
+ /* change boader color */
+ /* 0% { border-color: #2185d0; }
+ 50% { border-color: #df0909; }
+ 100% { border-color: #2185d0; } */
+
+ /* change text color */
+ /* 0% { color: #2185d0; }
+ 50% { color: #df0909; }
+ 100% { color: #2185d0; } */
+
+ /* change text thickness */
+ /* 0% { font-weight: 100; }
+ 50% { font-weight: 900; }
+ 100% { font-weight: 100; } */
+
+ /* change boader color */
+
+ /* 0% { border-color: #2185d0; }
+ 50% { border-color: #df0909; }
+ 100% { border-color: #2185d0; } */
+
+
+
+
+
+ }
+
+ #addNewPopup .content, #algorithm-popup .content {
+
+ /* width: 10px; */
+ /* height: 10px; */
+ border-radius: 10px;
+ /* */
+ /* animation: blinker 2s linear infinite; */
+ /* background-color: red; */
+ /* border-color: green; */
+ /* margin-right: 5px; */
+ }
+
+ #addNewPopup, #algorithm-popup {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ animation: blinker 3s linear infinite;
+ }
+
+
+
/*@media (min-width: 140rem) {
body {
line-height: calc(1.5 * 2.5);
diff --git a/lab/webapp/src/components/App/Navbar/index.jsx b/lab/webapp/src/components/App/Navbar/index.jsx
index 969f5dbc2..293f84c7c 100644
--- a/lab/webapp/src/components/App/Navbar/index.jsx
+++ b/lab/webapp/src/components/App/Navbar/index.jsx
@@ -30,6 +30,8 @@ import MediaQuery from 'react-responsive';
import DeviceWatcher from '../../../utils/device-watcher';
import { Menu, Dropdown, Icon } from 'semantic-ui-react';
import { Link } from 'react-router';
+
+
/**
* child component of menu bar - if preferences successfully retrieved, create
* menu bar with links to other sections of site
@@ -52,7 +54,7 @@ function Navbar({ preferences }) {
-
+
{preferences &&
@@ -80,12 +82,32 @@ function Navbar({ preferences }) {
-
+ {/* if machine is not window then do not show below item */}
+
+ {/*
{preferences.username}
-
+ */}
+
+ {/* {window.navigator.oscpu==='Intel Mac OS X 10.15'? */}
+ {window.navigator.oscpu==='Intel Mac OS X 10.15.'?
+
+
+
+
+ {preferences.username}
+
+ :
+
+ // empty div
+
+
+ }
+
+
+
}
diff --git a/lab/webapp/src/components/App/index.jsx b/lab/webapp/src/components/App/index.jsx
index d27b6647d..e699347a7 100644
--- a/lab/webapp/src/components/App/index.jsx
+++ b/lab/webapp/src/components/App/index.jsx
@@ -33,6 +33,7 @@ import FetchError from '../FetchError';
import { Container, Loader } from 'semantic-ui-react';
+
/**
* Main menu bar of website - parent component of navbar
*/
@@ -42,6 +43,551 @@ class App extends Component {
* DOM, use preferences action creator, fetchPreferences, to request retrieval of
* user preferences - user info and available machine learning algorithms
*/
+
+ constructor(props) {
+ super(props);
+ this.state = this.initState;
+ // this.tooltipAppFunction = this.tooltipAppFunction.bind(this);
+ this.tooltipAppFunction_with_setInterval = this.tooltipAppFunction_with_setInterval.bind(this);
+ this.cleanOtherTooltipFunction = this.cleanOtherTooltipFunction.bind(this);
+ }
+
+
+
+
+
+ // tooltipAppFunction() {
+ // console.log("Fron app test");
+ // document.addEventListener("DOMContentLoaded", function(e) {
+
+ // // console.log("App loaded")
+ // const x = document.getElementById("app");
+ // // find any elements with the tag name "a" with Hello Add new"
+ // const y = x.getElementsByTagName("a");
+
+ // // show content of the first element with the tag name "a"
+ // // y.
+ // // if y lentgh is 0, then wait for 1 second and try again
+ // if (y.length == 0) {
+ // setTimeout(function() {
+
+
+ // // original code
+ // // .tooltip {
+ // // position: relative;
+ // // display: inline-block;
+ // // border-bottom: 1px dotted black;
+ // // }
+
+ // // .tooltip .tooltiptext {
+ // // visibility: visible;
+ // // width: 120px;
+ // // background-color: #555;
+ // // color: #fff;
+ // // text-align: center;
+ // // border-radius: 6px;
+ // // padding: 5px 0;
+ // // position: absolute;
+ // // z-index: 1;
+ // // bottom: 125%;
+ // // left: 50%;
+ // // margin-left: -60px;
+ // // opacity: 1;
+ // // transition: opacity 0.3s;
+ // // }
+
+ // // .tooltip .tooltiptext::after {
+ // // visibility: visible;
+ // // content: "";
+ // // position: absolute;
+ // // top: 100%;
+ // // left: 50%;
+ // // margin-left: -5px;
+ // // border-width: 5px;
+ // // border-style: solid;
+ // // border-color: #555 transparent transparent transparent;
+ // // }
+
+ // // .tooltip:hover .tooltiptext {
+ // // visibility: hidden;
+ // // opacity: 1;
+ // // }
+
+
+
+ // var styles = `
+ // .tooltip {
+ // position: relative;
+ // display: inline-block;
+ // border-bottom: 1px dotted black;
+ // }
+
+ // .tooltip .tooltiptext {
+ // visibility: visible;
+ // width: 120px;
+ // background-color: #555;
+ // color: #fff;
+ // text-align: center;
+ // border-radius: 6px;
+ // padding: 5px 0;
+ // position: absolute;
+ // z-index: 1;
+ // bottom: 15%;
+ // left: 110%;
+ // margin-left: 0px;
+ // opacity: 1;
+ // transition: opacity 0.3s;
+ // }
+
+ // .tooltip .tooltiptext::after {
+ // content: "";
+ // position: absolute;
+ // top: 30%;
+ // left: -8.3%;
+ // margin-left: 0px;
+ // border-width: 5px;
+ // border-style: solid;
+ // border-color: transparent #555 transparent transparent;
+ // }
+
+ // .tooltip:hover .tooltiptext {
+ // visibility: hidden;
+ // opacity: 0;
+ // `
+
+
+
+ // // visibility: visible;
+ // // width: 120px;
+ // // background-color: #555;
+ // // color: #fff;
+ // // text-align: center;
+ // // border-radius: 6px;
+ // // padding: 5px 0;
+ // // position: absolute;
+ // // z-index: 1;
+ // // bottom: 50%;
+ // // left: 100%;
+ // // margin-left: 0px;
+ // // opacity: 1;
+ // // transition: opacity 0.3s;
+
+ // // check there is no style tag already
+ // if (document.getElementsByTagName("style") == null) {
+
+ // var styleSheet = document.createElement("style")
+ // styleSheet.innerText = styles
+ // document.head.appendChild(styleSheet)
+
+
+ // }
+
+ // // Hover over me
+ // // Tooltip text
+ // //
+
+ // // create a div with class tooltip and html content "Hover over me"
+ // var div_test = document.createElement("div");
+ // div_test.id = "div_test";
+ // div_test.className = "tooltip";
+ // // div_test.innerHTML = "Hover over me";
+ // div_test.innerHTML = "_";
+ // // background color is white
+ // div_test.style.backgroundColor = "white";
+ // // do not show div_test
+ // // div_test.style.display = "none";
+
+ // // create a span with class tooltiptext and html content "Tooltip text"
+ // var span_test = document.createElement("span");
+ // span_test.className = "tooltiptext";
+ // span_test.innerHTML = "Step 1: add new data";
+
+ // // make span_test always visible
+ // span_test.style.visibility = "visible";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ // // locate the span_test right of the div_test
+ // // span_test.style.left = "100%";
+ // // span_test.style.top = "0";
+ // // span_test.style.marginLeft = "5px";
+ // // span_test.style.marginTop = "-5px";
+
+
+ // // make span_test always block whever div_test is hovered or not
+ // span_test.style.display = "block";
+
+
+ // // append span_test to div_test
+ // div_test.appendChild(span_test);
+
+
+ // // append div_test to app
+ // // document.getElementById("app").appendChild(div_test);
+
+
+
+ // // real version
+ // const x = document.getElementById("app");
+ // // find any elements with the tag name "a" with Hello Add new"
+ // const y = x.getElementsByTagName("a");
+ // // add mouse over event to the div
+
+ // // append div_test to y[4]
+ // // y[4].appendChild(div_test);
+
+ // // add the class tooltip to y[4] with current y[4] class
+ // y[4].className = y[4].className + " tooltip";
+ // y[4].appendChild(span_test);
+
+ // // make current y[4] div_test's chileder
+ // // div_test.append(y[4]);
+
+ // // if y[4] is clicked, then hidden the span_test
+ // y[4].onclick = function() {
+ // span_test.style.visibility = "hidden";
+ // }
+
+
+
+
+
+
+
+ // }, 1000);
+ // }
+ // // else {
+ // // console.log(y);
+ // // // add mouse over event to the div
+ // // y.onmouseover = function() {
+ // // console.log("mouse over");
+ // // // change html content
+ // // y[4].innerHTML = "Hey";
+ // // };
+ // // }
+ // });
+ // }
+
+
+
+ removeUser() {
+ // if element id user_item is shown then make it hidden
+ // as soon as the
+
+ // show current machine os
+ console.log('process.platfor',process.platform);
+ console.log("current os is " + this.os);
+ console.log("window.navigator.platform",window.navigator.platform);
+ console.log("window.navigator.oscpu",window.navigator.oscpu);
+ // setTimeout(function() {
+
+ // document.getElementById("user_item").style.visibility = "hidden";
+ // }, 1000);
+
+
+
+ }
+
+
+
+ tooltipAppFunction_with_setInterval() {
+ var flag_remove=0;
+ // set interval
+ setInterval(() => {
+
+
+
+ // console.log("App loaded")
+ const x = document.getElementById("app");
+ // find any elements with the tag name "a" with Hello Add new"
+ const y = x.getElementsByTagName("a");
+
+ // check whehter div_test is already created
+
+
+ // current href
+ const current_href = window.location.href;
+
+ // console.log("tooltipAppFunction_with_setInterval this is y: ", y);
+ if (y.length > 0 && document.getElementById("span_test") == null && current_href.includes("upload_")==false) {
+ // add mouse over event to the div
+
+ console.log("inside!!!")
+
+
+ var styles_v1 = `
+ .tooltip {
+ position: relative;
+ display: inline-block;
+ border-bottom: 1px dotted black;
+ }
+
+ .tooltip .tooltiptext {
+ visibility: visible;
+ width: 120px;
+ background-color: #555;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 5px 0;
+ position: absolute;
+ z-index: 1;
+ bottom: -40%;
+ left: 110%;
+ margin-left: 0px;
+ opacity: 1;
+ transition: opacity 0.3s;
+ }
+
+ .tooltip .tooltiptext::after {
+ content: "";
+ position: absolute;
+ top: 30%;
+ left: -8.3%;
+ margin-left: 0px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: transparent #555 transparent transparent;
+ }
+
+ .tooltip:hover .tooltiptext {
+ visibility: hidden;
+ opacity: 0;
+ `
+
+
+ if (document.getElementsByTagName("style").length == 0) {
+
+ var styleSheet = document.createElement("style")
+ styleSheet.innerText = styles_v1
+ document.head.appendChild(styleSheet)
+
+ }
+
+ else {
+
+ var elem = document.getElementsByTagName("style");
+ elem[0].parentNode.removeChild(elem[0]);
+
+ var styleSheet = document.createElement("style")
+ styleSheet.innerText = styles_v1
+ document.head.appendChild(styleSheet)
+
+
+ }
+
+ // Hover over me
+ // Tooltip text
+ //
+
+ // create a div with class tooltip and html content "Hover over me"
+ var div_test = document.createElement("div");
+ div_test.id = "div_test";
+ div_test.className = "tooltip";
+ // div_test.innerHTML = "Hover over me";
+ div_test.innerHTML = "_";
+ // background color is white
+ div_test.style.backgroundColor = "white";
+ // do not show div_test
+ // div_test.style.display = "none";
+
+ // create a span with class tooltiptext and html content "Tooltip text"
+ var span_test = document.createElement("span");
+ span_test.id = "span_test";
+ span_test.className = "tooltiptext";
+ span_test.innerHTML = "Step 1: click this button and add your data.";
+
+ // make span_test always visible
+ if (flag_remove==0)
+ {
+
+ span_test.style.visibility = "visible";
+
+ }
+
+ if (flag_remove==1)
+ {
+ span_test.style.visibility = "hidden";
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+ // locate the span_test right of the div_test
+ // span_test.style.left = "100%";
+ // span_test.style.top = "0";
+ // span_test.style.marginLeft = "5px";
+ // span_test.style.marginTop = "-5px";
+
+
+ // make span_test always block whever div_test is hovered or not
+ if (flag_remove==0)
+ {
+ span_test.style.display = "block";
+ }
+
+ if (flag_remove==1)
+ {
+ span_test.style.display = "none";
+ }
+
+ // append span_test to div_test
+ div_test.appendChild(span_test);
+
+
+ // append div_test to app
+ // document.getElementById("app").appendChild(div_test);
+
+
+
+ // real version
+ const x = document.getElementById("app");
+ // find any elements with the tag name "a" with Hello Add new"
+ const y = x.getElementsByTagName("a");
+
+
+
+
+ if (y[4].className.indexOf("tooltip") == -1) {
+
+ y[4].className = y[4].className + " tooltip";
+ y[4].appendChild(span_test);
+ }
+ // make current y[4] div_test's chileder
+ // div_test.append(y[4]);
+
+ // if y[4] is clicked, then hidden the span_test
+
+
+
+ console.log("flag_remove: ", flag_remove);
+
+
+ y[4].onclick = function() {
+ span_test.style.visibility = "hidden";
+ span_test.style.display = "block";
+ console.log("clicked")
+ flag_remove=1;
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ };
+
+
+
+
+
+ }, 500);
+
+ }
+
+
+
+
+ cleanOtherTooltipFunction() {
+ console.log("Fron app test");
+
+ if (document.getElementById("div_tooltip_file_upload")!=null && current_href.includes("upload_") == false) {
+
+
+ // make hidden
+ document.getElementById("div_tooltip_file_upload").style.visibility = "hidden";
+
+
+ // remove span_test
+ document.getElementById("span_test").style.visibility = "hidden";
+
+
+ }
+
+
+
+ var interval = setInterval(function() {
+
+ // if there is span id with span_upload_dataset then make it not visible
+ // current href
+ var current_href = window.location.href;
+ // current href does not include upload_
+ // if (current_href.includes("upload_") == false)
+ if (document.getElementById("div_tooltip_file_upload")!=null && current_href.includes("upload_") == false) {
+
+
+ // console.log("div_tooltip_file_upload exists and this is not upload_dataset page");
+
+ // remove only the div_tooltip_file_upload
+ var elem_fir = document.getElementById("div_tooltip_file_upload");
+ elem_fir.parentNode.removeChild(elem_fir);
+
+ // remove span_test
+ var elem_Sec = document.getElementById("span_test");
+ if (elem_Sec != null) {
+ elem_Sec.parentNode.removeChild(elem_Sec);
+ }
+
+
+ }
+
+
+ }, 500);
+
+ }
+
+
+
+ get initState() {
+ // this.cleanOtherTooltipFunction();
+
+
+ // this.tooltipAppFunction_with_setInterval();
+
+ this.removeUser()
+
+
+
+ }
+
+
componentDidMount() {
this.props.fetchPreferences();
}
@@ -64,11 +610,25 @@ class App extends Component {
);
}
+
+
+
+
+
return (
{children}
+
+
+
+
+
+
+
+
+
);
}
}
@@ -79,3 +639,217 @@ const mapStateToProps = (state) => ({
export { App };
export default connect(mapStateToProps, actions)(App);
+
+
+
+
+// // console.log("App loaded")
+// const x = document.getElementById("app");
+// // find any elements with the tag name "a" with Hello Add new"
+// const y = x.getElementsByTagName("a");
+
+// // show content of the first element with the tag name "a"
+// // y.
+// // if y lentgh is 0, then wait for 1 second and try again
+// if (y.length == 0) {
+// setTimeout(function() {
+
+
+// // original code
+// // .tooltip {
+// // position: relative;
+// // display: inline-block;
+// // border-bottom: 1px dotted black;
+// // }
+
+// // .tooltip .tooltiptext {
+// // visibility: visible;
+// // width: 120px;
+// // background-color: #555;
+// // color: #fff;
+// // text-align: center;
+// // border-radius: 6px;
+// // padding: 5px 0;
+// // position: absolute;
+// // z-index: 1;
+// // bottom: 125%;
+// // left: 50%;
+// // margin-left: -60px;
+// // opacity: 1;
+// // transition: opacity 0.3s;
+// // }
+
+// // .tooltip .tooltiptext::after {
+// // visibility: visible;
+// // content: "";
+// // position: absolute;
+// // top: 100%;
+// // left: 50%;
+// // margin-left: -5px;
+// // border-width: 5px;
+// // border-style: solid;
+// // border-color: #555 transparent transparent transparent;
+// // }
+
+// // .tooltip:hover .tooltiptext {
+// // visibility: hidden;
+// // opacity: 1;
+// // }
+
+
+
+// var styles = `
+// .tooltip {
+// position: relative;
+// display: inline-block;
+// border-bottom: 1px dotted black;
+// }
+
+// .tooltip .tooltiptext {
+// visibility: visible;
+// width: 120px;
+// background-color: #555;
+// color: #fff;
+// text-align: center;
+// border-radius: 6px;
+// padding: 5px 0;
+// position: absolute;
+// z-index: 1;
+// bottom: 15%;
+// left: 110%;
+// margin-left: 0px;
+// opacity: 1;
+// transition: opacity 0.3s;
+// }
+
+// .tooltip .tooltiptext::after {
+// content: "";
+// position: absolute;
+// top: 30%;
+// left: -8.3%;
+// margin-left: 0px;
+// border-width: 5px;
+// border-style: solid;
+// border-color: transparent #555 transparent transparent;
+// }
+
+// .tooltip:hover .tooltiptext {
+// visibility: hidden;
+// opacity: 0;
+// `
+
+
+
+// // visibility: visible;
+// // width: 120px;
+// // background-color: #555;
+// // color: #fff;
+// // text-align: center;
+// // border-radius: 6px;
+// // padding: 5px 0;
+// // position: absolute;
+// // z-index: 1;
+// // bottom: 50%;
+// // left: 100%;
+// // margin-left: 0px;
+// // opacity: 1;
+// // transition: opacity 0.3s;
+
+// var styleSheet = document.createElement("style")
+// styleSheet.innerText = styles
+// document.head.appendChild(styleSheet)
+
+// // Hover over me
+// // Tooltip text
+// //
+
+// // create a div with class tooltip and html content "Hover over me"
+// var div_test = document.createElement("div");
+// div_test.className = "tooltip";
+// // div_test.innerHTML = "Hover over me";
+// div_test.innerHTML = "_";
+// // background color is white
+// div_test.style.backgroundColor = "white";
+// // do not show div_test
+// // div_test.style.display = "none";
+
+// // create a span with class tooltiptext and html content "Tooltip text"
+// var span_test = document.createElement("span");
+// span_test.className = "tooltiptext";
+// span_test.innerHTML = "step 1: add new data";
+
+// // make span_test always visible
+// span_test.style.visibility = "visible";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// // locate the span_test right of the div_test
+// // span_test.style.left = "100%";
+// // span_test.style.top = "0";
+// // span_test.style.marginLeft = "5px";
+// // span_test.style.marginTop = "-5px";
+
+
+// // make span_test always block whever div_test is hovered or not
+// span_test.style.display = "block";
+
+
+// // append span_test to div_test
+// div_test.appendChild(span_test);
+
+
+// // append div_test to app
+// // document.getElementById("app").appendChild(div_test);
+
+
+
+// // real version
+// const x = document.getElementById("app");
+// // find any elements with the tag name "a" with Hello Add new"
+// const y = x.getElementsByTagName("a");
+// // add mouse over event to the div
+
+// // append div_test to y[4]
+// // y[4].appendChild(div_test);
+
+// // add the class tooltip to y[4] with current y[4] class
+// y[4].className = y[4].className + " tooltip";
+// y[4].appendChild(span_test);
+
+// // make current y[4] div_test's chileder
+// // div_test.append(y[4]);
+
+// // if y[4] is clicked, then hidden the span_test
+// y[4].onclick = function() {
+// span_test.style.visibility = "hidden";
+// }
+
+
+
+
+
+
+
+// }, 1000);
+// }
+// // else {
+// // console.log(y);
+// // // add mouse over event to the div
+// // y.onmouseover = function() {
+// // console.log("mouse over");
+// // // change html content
+// // y[4].innerHTML = "Hey";
+// // };
+// // }
+// });
\ No newline at end of file
diff --git a/lab/webapp/src/components/Builder/components/AlgorithmOptions/index.jsx b/lab/webapp/src/components/Builder/components/AlgorithmOptions/index.jsx
index 5f8d11d6a..491f84453 100644
--- a/lab/webapp/src/components/Builder/components/AlgorithmOptions/index.jsx
+++ b/lab/webapp/src/components/Builder/components/AlgorithmOptions/index.jsx
@@ -38,16 +38,49 @@ function AlgorithmOptions({
return currentAlgorithm && (algorithm._id === currentAlgorithm._id);
};
+ const contextRef = React.useRef();
+
+
+ function openTrueOrFalse_algorithm_popup(){
+ if (sessionStorage.getItem("algorithm-popup") == "true"){
+
+ // if (document.getElementById("aiTooglePopup")!==null){
+ // document.getElementById("aiTooglePopup").style.cssText = "display: block !important";
+ // }
+
+
+ return false;
+ }
+ else{
+ return true;
+ }
+
+
+ }
+
+
return (
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/lab/webapp/src/components/Builder/components/ParameterOptions/index.jsx b/lab/webapp/src/components/Builder/components/ParameterOptions/index.jsx
index ddf1b99a7..700b951b3 100644
--- a/lab/webapp/src/components/Builder/components/ParameterOptions/index.jsx
+++ b/lab/webapp/src/components/Builder/components/ParameterOptions/index.jsx
@@ -40,7 +40,24 @@ function ParameterOptions({
const getReturnValue = (info, i) => info.ui.values ? info.ui.values[i] : info.ui.choices[i];
+ function openTrueOrFalse_param_popup()
+ {
+ if (sessionStorage.getItem("param-popup") == "true"){
+ return false;
+ }
+ else{
+ return true;
+ }
+ }
+
return (
+
+