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 ( + + +
+ + + + + + + {algorithms && algorithms.map(algorithm => ( @@ -91,6 +124,45 @@ function AlgorithmOptions({ ))} + } + content = "Step 4: Select an algorithm to begin building a model." + position = "top center" + open = {openTrueOrFalse_algorithm_popup()} + + onClick = { () => + { + if (document.getElementById("algorithm-popup") != null) { + + document.getElementById("algorithm-popup").style.cssText += ';display:none !important;'; + + sessionStorage.setItem("algorithm-popup", "true"); + // show the local storage on the console + console.log("algorithm-popup", sessionStorage.getItem("algorithm-popup")); + + + // get class name content under id aiTooglePopup + var content = document.getElementById("param-popup").getElementsByClassName("content")[0]; + // set border-radius: 10px; + content.style.cssText += ';border-radius: 10px;'; + + var parampopup =document.getElementById("param-popup") + + // set display: flex; + parampopup.style.cssText += ';display: flex;'; + // set flex-direction: row; + parampopup.style.cssText += ';flex-direction: row;'; + // set align-items: center; + parampopup.style.cssText += ';align-items: center;'; + + // set animation: blinker 3s linear infinite; + parampopup.style.cssText += ';animation: blinker 3s linear infinite;'; + + } + } + } + /> + + ); } 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 ( + + {params && Object.entries(params).map(([param, info]) => ( + + + {info.ui.choices.map((choice, i) => ( @@ -91,9 +111,53 @@ function ParameterOptions({ ))} + + ))} + } + content="Step 5: Select the parameters for the algorithm" + // prevent the popups from overlapping + + + + + position="top center" + open = {openTrueOrFalse_param_popup()} + + onClick = { () => + { + if (document.getElementById("param-popup") != null) { + + document.getElementById("param-popup").style.cssText += ';display:none !important;'; + + sessionStorage.setItem("param-popup", "true"); + // show the local storage on the console + console.log("param-popup", sessionStorage.getItem("param-popup")); + + + // get class name content under id aiTooglePopup + var content = document.getElementById("submit-experiment-popup").getElementsByClassName("content")[0]; + // set border-radius: 10px; + content.style.cssText += ';border-radius: 10px;'; + + var submitexperimentpopup = document.getElementById("submit-experiment-popup") + + // set display: flex; + submitexperimentpopup.style.cssText += ';display: flex;'; + // set flex-direction: row; + submitexperimentpopup.style.cssText += ';flex-direction: row;'; + // set align-items: center; + submitexperimentpopup.style.cssText += ';align-items: center;'; + + // set animation: blinker 3s linear infinite; + submitexperimentpopup.style.cssText += ';animation: blinker 3s linear infinite;'; + + } + } + } + /> ); } diff --git a/lab/webapp/src/components/Builder/index.jsx b/lab/webapp/src/components/Builder/index.jsx index 14df519ef..657a7b623 100644 --- a/lab/webapp/src/components/Builder/index.jsx +++ b/lab/webapp/src/components/Builder/index.jsx @@ -101,6 +101,19 @@ class Builder extends Component { setCurrentAlgorithm, setParamValue } = this.props; + + + function openTrueOrFalse_submit_experiment_popup() + { + if (sessionStorage.getItem("submit-experiment-popup") == "true"){ + return false; + } + else{ + return true; + } + } + + return (
+ + +
+ } + + content="Launch experiment" + position="top left" + + open = {openTrueOrFalse_submit_experiment_popup()} + + onClick = { () => + { + if (document.getElementById("submit-experiment-popup") != null) { + + document.getElementById("submit-experiment-popup").style.cssText += ';display:none !important;'; + + sessionStorage.setItem("submit-experiment-popup", "true"); + // show the local storage on the console + console.log("submit-experiment-popup", sessionStorage.getItem("submit-experiment-popup")); + + } + } + } + /> + + ); } diff --git a/lab/webapp/src/components/Dataset/index.jsx b/lab/webapp/src/components/Dataset/index.jsx index 95819fe35..144afe268 100644 --- a/lab/webapp/src/components/Dataset/index.jsx +++ b/lab/webapp/src/components/Dataset/index.jsx @@ -44,8 +44,76 @@ class Dataset extends Component { this.fileDetailsClick = this.fileDetailsClick.bind(this); this.getCatAndOrdTable = this.getCatAndOrdTable.bind(this); this.handleCloseFileDetails = this.handleCloseFileDetails.bind(this); + + // this.cleanOtherTooltipFunction = this.cleanOtherTooltipFunction.bind(this); } + cleanOtherTooltipFunction() { + // console.log("Fron app test"); + + // get current href + const current_href = window.location.href; + + + 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(); + + + // this.tooltipAppFunction_with_setInterval(); + + + + } + + componentDidMount() { fetch(`/api/datasets/${this.props.params.id}`) .then(response => { diff --git a/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/components/BestResult/index.jsx b/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/components/BestResult/index.jsx new file mode 100644 index 000000000..9d9ca4b7f --- /dev/null +++ b/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/components/BestResult/index.jsx @@ -0,0 +1,113 @@ +/* ~This file is part of the Aliro library~ + +Copyright (C) 2017 Epistasis Lab, University of Pennsylvania + +Aliro is maintained by: + - Heather Williams (hwilli@upenn.edu) + - Weixuan Fu (weixuanf@upenn.edu) + - William La Cava (lacava@upenn.edu) + - Michael Stauffer (stauffer@upenn.edu) + - and many other generous open source contributors + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . + +(Autogenerated header, do not modify) + +*/ +import React from 'react'; +import { Segment, Header, Progress } from 'semantic-ui-react'; +import { formatAlgorithm } from '../../../../../../utils/formatter'; + + + +function BestResult() { + const getNoResultMessage = () => { + if(false) { + return 'You must upload a metadata file in order to use this dataset.'; + } + + return 'No results yet, build a new experiment to start.'; + }; + + const getResultLink = () => {}; + + const getPercent = () => ({}); + + const getValue = () => ({}); + + /* + const getValue = () => { + if (result.score <=0 ) return '≤ 0'; + return (result.score).toFixed(2); + } + */ + + // const renderProgressBar = (result) => { + // switch(result.prediction_type) { + // case 'classification': + // return ( + // + // ); + // case 'regression': + // return ( + // + // ); + // default: + // return; + // } + // } + + + if(true) { + return ( + + {getNoResultMessage()} + + ); + } + + + return ( + +
+ {'Best Result'} + +
{"hello"}
+ {"hello"} +
+
+ {/* { renderProgressBar(result) } */} +
+ ); +} + +export default BestResult; \ No newline at end of file diff --git a/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/components/DatasetActions/index.jsx b/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/components/DatasetActions/index.jsx new file mode 100644 index 000000000..4b81cab65 --- /dev/null +++ b/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/components/DatasetActions/index.jsx @@ -0,0 +1,107 @@ +/* ~This file is part of the Aliro library~ + +Copyright (C) 2017 Epistasis Lab, University of Pennsylvania + +Aliro is maintained by: + - Heather Williams (hwilli@upenn.edu) + - Weixuan Fu (weixuanf@upenn.edu) + - William La Cava (lacava@upenn.edu) + - Michael Stauffer (stauffer@upenn.edu) + - and many other generous open source contributors + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . + +(Autogenerated header, do not modify) + +*/ +import React from 'react'; +import { Loader, Dimmer, Checkbox, Popup, Dropdown, Icon } from 'semantic-ui-react'; + +function DatasetActions({ dataset, recommender, toggleAI }) { + const onToggleAI = () => { + const aiState = dataset.ai; + const aiNextState = aiState === 'off' || aiState === 'finished' ? 'requested' : 'off'; + + toggleAI(dataset._id, aiNextState); + }; + + // ai states: on, queueing, requested, off, finished + // recommender states: initializing, disabled, active + + // if the recommender is in an off or initializing state, disable the ai toggle + const hasMetadata = dataset.has_metadata; + const aiLabelText = 'AI'; + + const recState = recommender.status; + const aiState = dataset.ai; + + const aiInitializing = (recState === 'initializing') ? true : false; + const aiDisabled = (recState === 'running') ? dataset.isTogglingAI : true; + const aiIsChecked = (aiState === 'off' || aiState === 'finished') ? false : true; + + const aiLabelClass = `ai-label ${(aiIsChecked) ? 'bright' : 'dim' }`; + const aiToggleClass = `ai-switch ${(aiState === 'on' || aiState === 'queuing') ? 'active' : aiState }`; + + const aiPopupContent = (recState === 'running') ? `AI ${aiState}` : `AI recommender ${recState}`; + + const dropdownIcon = ; + + + if (aiInitializing) { + return ( + + + + {aiLabelText} + + + + + ); + } else { + return ( + + {hasMetadata && + + + {aiLabelText} + + + } + /> + + } + {/* + + + + + */} + + ); + } +} + +export default DatasetActions; diff --git a/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/components/ExperimentStatus/index.jsx b/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/components/ExperimentStatus/index.jsx new file mode 100644 index 000000000..7e08a3ecc --- /dev/null +++ b/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/components/ExperimentStatus/index.jsx @@ -0,0 +1,67 @@ +/* ~This file is part of the Aliro library~ + +Copyright (C) 2017 Epistasis Lab, University of Pennsylvania + +Aliro is maintained by: + - Heather Williams (hwilli@upenn.edu) + - Weixuan Fu (weixuanf@upenn.edu) + - William La Cava (lacava@upenn.edu) + - Michael Stauffer (stauffer@upenn.edu) + - and many other generous open source contributors + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . + +(Autogenerated header, do not modify) + +*/ +import React from 'react'; +import { Table, Header, Label } from 'semantic-ui-react'; + +function ExperimentStatus() { + // const "hello" = `/#/experiments?dataset=${filter}&status=`; + + return ( + + + + + {/* make the link href unclickable */} + {/* */} + {/* make header unvisible */} +
+ {"hello"}
+ {"0"}
+ + {'pending'} +
+ {/*
*/} +
+ + +
+
+
+ ); +} + +export default ExperimentStatus; \ No newline at end of file diff --git a/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/index.jsx b/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/index.jsx new file mode 100644 index 000000000..b3d192986 --- /dev/null +++ b/lab/webapp/src/components/Datasets/components/AddNewDatasetCard/index.jsx @@ -0,0 +1,293 @@ +/* ~This file is part of the Aliro library~ + +Copyright (C) 2017 Epistasis Lab, University of Pennsylvania + +Aliro is maintained by: + - Heather Williams (hwilli@upenn.edu) + - Weixuan Fu (weixuanf@upenn.edu) + - William La Cava (lacava@upenn.edu) + - Michael Stauffer (stauffer@upenn.edu) + - and many other generous open source contributors + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . + +(Autogenerated header, do not modify) + +*/ +import React from 'react'; +import { connect } from 'react-redux'; +// import * as actions from 'data/datasets/dataset/actions'; +// import DatasetActions from './components/DatasetActions'; +import BestResult from './components/BestResult'; +import ExperimentStatus from './components/ExperimentStatus'; +import { Grid, Segment, Header, Button, Popup, Message } from 'semantic-ui-react'; +import { formatDataset } from '../../../../utils/formatter'; + + + +import { Link } from 'react-router'; + +const AddNewDatasetCard = () => { + + // console.log('header', header); + // console.log('subheader', subheader); + // console.log('btnText', btnText); + // console.log('btnIcon', btnIcon); + // console.log('linkText', linkText); + + // console.log("Link", Link); + + // var icon_type = "question circle"; + // console.log("sessionStorage.getItem(addNewPopup)",sessionStorage.getItem("addNewPopup")) + + function openTrueOrFalse_addNewPopup(){ + if (sessionStorage.getItem("addNewPopup") == "true"){ + + // if (document.getElementById("aiTooglePopup")!==null){ + // document.getElementById("aiTooglePopup").style.cssText = "display: block !important"; + // } + + + return false; + } + else{ + return true; + } + + + } + + + const style = { + // borderRadius: 0 !important, + //show focus outline + + opacity: 0.5, + padding: '2em', + // background: '#fff', + // + } + + return ( + // if sessionStorage does not have addNewPopup + + + + + {/* + + } + /> + + + } + position="bottom right" + // header={formatDataset(dataset.name)} + content = "Step 2: If you want to generate machine learning experiments automatically, please click to toggle AI button" + + + + /> */} + + +
+ + + + + + + + + + + + + + } + content = "Step 1: click this button to upload your dataset." + + // style={style} + + + // position='right center' + position='bottom center' + + + + // use function in open + + open = {openTrueOrFalse_addNewPopup()} + + + + onClick = { () => + { + if (document.getElementById("addNewPopup") != null) { + + document.getElementById("addNewPopup").style.cssText += ';display:none !important;'; + + // save flag to local storage to avoid showing the popup again + // use session storage to avoid showing the popup again + + sessionStorage.setItem("addNewPopup", "true"); + // show the local storage on the console + console.log("addNewPopup", sessionStorage.getItem("addNewPopup")); + + + // add below to App.css in javascript + + + // get class name content under id aiTooglePopup + var content = document.getElementById("aiTooglePopup").getElementsByClassName("content")[0]; + // set border-radius: 10px; + content.style.cssText += ';border-radius: 10px;'; + + var aiTooglePopup =document.getElementById("aiTooglePopup") + + // set display: flex; + aiTooglePopup.style.cssText += ';display: flex;'; + // set flex-direction: row; + aiTooglePopup.style.cssText += ';flex-direction: row;'; + // set align-items: center; + aiTooglePopup.style.cssText += ';align-items: center;'; + + // set animation: blinker 3s linear infinite; + aiTooglePopup.style.cssText += ';animation: blinker 3s linear infinite;'; + + + // #aiTooglePopup .content { + + + // border-radius: 10px; + + // } + + + // #aiTooglePopup{ + // display: flex; + // flex-direction: row; + // align-items: center; + // animation: blinker 3s linear infinite; + // } + + // // add above css to App.css in javascript + + // document + + + + } + } + } + + + /> + + {/* + */} + + + {/* +
+ + */} + + + + ); + + + + + + +}; + +export { AddNewDatasetCard }; +// export default connect(null, actions)(AddNewDatasetCard); \ No newline at end of file diff --git a/lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx b/lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx index 33796f31e..835567ac7 100644 --- a/lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx +++ b/lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx @@ -44,52 +44,338 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => { } else if (dataset.metafeatures._prediction_type == "regression") { icon_type = "line graph"; } - return ( - - - + + + + } + /> + + + + } + position="bottom right" + // header={formatDataset(dataset.name)} + content = "Step 2: If you want to generate machine learning experiments automatically, please click to toggle AI button" + + // make the open ture but display none + + + open = {openTrueOrFalse_aiTooglePopup()} + // open = {false} + // style={{display: "none !important"}} + + + + onClick = { () => + { + if (document.getElementById("aiTooglePopup") != null) { + + document.getElementById("aiTooglePopup").style.cssText += ';display:none !important;'; + + // document.getElementById("buildNewExpPopup").style.cssText += ';display:block !important;'; + + // save flag to local storage to avoid showing the popup again + sessionStorage.setItem("aiTooglePopup", "true"); + // show the local storage on the console + console.log("aiTooglePopup", sessionStorage.getItem("aiTooglePopup")); + + + + // get class name content under id aiTooglePopup + var content = document.getElementById("buildNewExpPopup").getElementsByClassName("content")[0]; + // set border-radius: 10px; + content.style.cssText += ';border-radius: 10px;'; + + var buildNewExpPopup =document.getElementById("buildNewExpPopup") + + // set display: flex; + buildNewExpPopup.style.cssText += ';display: flex;'; + // set flex-direction: row; + buildNewExpPopup.style.cssText += ';flex-direction: row;'; + // set align-items: center; + buildNewExpPopup.style.cssText += ';align-items: center;'; + + // set animation: blinker 3s linear infinite; + buildNewExpPopup.style.cssText += ';animation: blinker 3s linear infinite;'; + + + } + } + } + /> - - + + - - - - -