Chronos: installation panel enhancement (#5588)

* Update:installation panel enhancement
Left a bug to fix and install CMD to revise.

* Bugfix: Fixed a bug when using Firefox browser to use the install guide form.
Fixed the bug that the table's background color may be changed by mistake on Firefox browser.

* Update: update panel as comment required.

* Bugfix: fixed a bug in js file that will show wrong cmd when clicking 'windows' or 'docker'.

* Bugfix: fixed the bug that 'cmd' shows incorrectly when clicking 'prophet' and 'ARIMA'.

docs/readthedocs/source/_static/css/chronos_installation_guide.css

@@ -1,51 +1,49 @@
-/* Border styles */
+.displayed {
-#table-1 tr, #table-1 td, #table-1 th  {
+    display: block;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#table-1 {
+    border-bottom-width: 0px;
+    margin:auto;
+}
+
+#table-1 tr, td{
+    background-color: rgb(240, 241, 245);
+    height: 30px;
     border-width: 2px;
     border-style: solid;
     border-color: white ;
     padding: 5px;
 }
 
-    #table-1 {
+#table-1 tr td:first-child{
-    border-bottom-width: 0px;
+    font-weight: 600;
 }
 
-    /* Padding and font style */
+#table-1 td{
-    #table-1 td, #table-1 th {
     font-size: 16px;
     font-family: Verdana;
     color: rgb(15, 24, 33);
-    }
-    
-    /* Alternating background colors */
-    #table-1 tr, td{
-        background-color: rgb(240, 241, 245);
-        height: 30px;
-    }
-    
-    .displayed {
-        display: block;
-        text-align: center;
-        margin-left: auto;
-        margin-right: auto }
-
-    /* setting div id=cmd width */
-    #cmd {
-        width: 450px;
-        height: 35px;
-        overflow:unset;
-    }
-
-    td, th {
     text-align: center;
+    /* height: 56px;
+    line-height: 56px; */
+    width: 160px;
 }
 
 #table-1 button {
+    font-size: 16px;
     border-color: transparent;
     width: 100%;
     height: 100%;
     background-color: transparent;
     cursor: pointer;
-        font-size: 16px;
 }
 
+#cmd {
+    width: auto;
+    height: 35px;
+    overflow:unset;
+}

docs/readthedocs/source/_static/js/chronos_installation_guide.js

@@ -1,24 +1,217 @@
-var ais = ["pytorch", "tensorflow", "prophet", "pmdarima"];
+//initialize all needed variables(id of buttons)
-var releases=["stable", "nightly"]
+var functionalities = ["Forecasting","Anomaly","Simulation"];
+var models = ["Prophet", "ARIMA","Deep_learning_models","Machine_learning_models"];
+var ais = ["pytorch", "tensorflow"];
 var oss=["linux", "win"];
-var ways=["pypi", "docker"];
+var automls=["automlyes", "automlno"];
 var hardwares=["singlenode", "cluster"];
-var automls=["automlyes", "automlno"]
+var packages=["pypi", "docker"];
+var versions=["stable", "nightly"];
+
+//defalut selected burttons' ids
+var functionality="Forecasting";
+var model="Deep_learning_models";
 var ai="pytorch";
 var os="linux";
-var release="nightly";
+var automl="automlno";
-var way="pypi";
 var hardware="singlenode";
-var automl="automlno"
+var package="pypi";
+var version="nightly";
 
+//main func, to decide what is showed in cmd 
+function refresh_cmd(){
+    //refresh all the buttons
+    reset_color(functionalities);
+    reset_color(ais);
+    reset_color(oss);
+    reset_color(automls);
+    reset_color(hardwares);
+    reset_color(packages);
+    reset_color(versions);
     
+    set_color(functionality);
+    set_color(ai);
+    set_color(os);
+    set_color(automl);
+    set_color(hardware);
+    set_color(package);
+    set_color(version);
     
+    var cmd = "NA";
+
+    //dynamically set 'model' line
+    $("#model").empty();
+    if(functionality=="Forecasting"){
+        $("#model").append("<td colspan='1'>Model</td>\
+        <td colspan='1'><button id='Deep_learning_models' style='font-size: 13px;'>Deep learning models</button></td>\
+        <td colspan='2'><button id='Prophet'>Prophet</button></td>\
+        <td colspan='1'><button id='ARIMA'>ARIMA</button></td>");
+    }
+    else if(functionality=="Anomaly"){
+        $("#model").append("<td colspan='1'>Model</td>\
+        <td colspan='2'><button id='Deep_learning_models'>Deep learning models</button>\
+        <td colspan='2'><button id='Machine_learning_models'>Machine learning models</button></td>");
+    }
+    else if(functionality=="Simulation"){
+        $("#model").append("<td colspan='1'>Model</td>\
+        <td colspan='4'><button id='Deep_learning_models'>Deep learning models</button>");
+    }
+    reset_color(models);
+    set_color(model);
+
+    //enable 'Deep learning framework' when Deep learning models is selected
+    if(model!="Deep_learning_models"){
+        disable(ais);
+    }
+    else{
+        enable(ais);
+    }
+
+    //disable other buttons in cases
+    if(package=="docker"){
+        disable(functionalities);
+        disable(models);
+        disable(ais);
+        disable(versions);
+        disable(oss);
+        disable(hardwares);
+        disable(automls);
+        cmd="Please refer to <a href=' https://github.com/intel-analytics/BigDL/tree/main/docker/chronos-nightly'>docker installation guide.</a>";
+    }else if(os=="win"){
+        disable(functionalities);
+        disable(models);
+        disable(ais);
+        disable(versions);
+        disable(packages);
+        disable(hardwares);
+        disable(automls);
+        cmd="Please refer to <a href='https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/windows_guide.html'>windows_guide.</a>";
+    }else{
+        enable(functionalities);
+        enable(models);
+        enable(versions);
+        enable(oss);
+        enable(packages);
+        enable(hardwares);
+        enable(automls);
+        
+        //change cmd according to different choices
+        if(model=="Deep_learning_models"){
+            if(ai=="pytorch"){
+                if(automl=="automlno"){
+                    if(hardware=="singlenode"){
+                        if(version=="nightly"){
+                            cmd="pip install --pre --upgrade bigdl-chronos[pytorch]";
+                        }else if(version=="stable"){
+                            cmd="pip install bigdl-chronos";
+                        }
+                    }else if(hardware=="cluster"){
+                        if(version=="nightly"){
+                            cmd="pip install --pre --upgrade bigdl-chronos[pytorch,distributed]";
+                        }else if(version=="stable"){
+                            cmd="pip install bigdl-chronos[all]";
+                        }
+                    }
+                }else if(automl=="automlyes"){
+                    if(hardware=="singlenode"){
+                        if(version=="nightly"){
+                            cmd="pip install --pre --upgrade bigdl-chronos[pytorch,automl]";
+                        }else if(version=="stable"){
+                            cmd="pip install bigdl-chronos[all]";
+                        }
+                    }else if(hardware=="cluster"){
+                        if(version=="nightly"){
+                            cmd="pip install --pre --upgrade bigdl-chronos[pytorch,distributed,automl]";
+                        }else if(version=="stable"){
+                            cmd="pip install bigdl-chronos[all]";
+                        }
+                    }
+                }
+            }else if(ai=="tensorflow"){
+                if(package=="pypi"&&os=="linux"){
+                    cmd="Please refer to <a href=' https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/chronos.html#tensorflow-backend'>tensorflow installation guide.</a>"
+                }
+            }
+        }else if(model=="Prophet"){
+            if(automl=="automlno"){
+                if(hardware=="singlenode"){
+                    if(version=="nightly"){
+                        cmd="pip install --pre --upgrade bigdl-chronos; pip install prophet==1.1.0";
+                    }else if(version=="stable"){
+                        cmd="pip install bigdl-chronos; pip install prophet==1.1.0";
+                    }
+                }else if(hardware=="cluster"){
+                    if(version=="nightly"){
+                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0";
+                    }else if(version=="stable"){
+                        cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0";
+                    }
+                }
+            }else if(automl=="automlyes"){
+                if(hardware=="singlenode"){
+                    if(version=="nightly"){
+                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0";
+                    }else if(version=="stable"){
+                        cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0";
+                    }
+                }else if(hardware=="cluster"){
+                    if(version=="nightly"){
+                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0";
+                    }else if(version=="stable"){
+                        cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0";
+                    }
+                }
+            }
+        }else if(model=="ARIMA"){
+            if(automl=="automlno"){
+                if(hardware=="singlenode"){
+                    if(version=="nightly"){
+                        cmd="pip install --pre --upgrade bigdl-chronos; pip install pmdarima==1.8.5";
+                    }else if(version=="stable"){
+                        cmd="pip install bigdl-chronos; pip install pmdarima==1.8.5";
+                    }
+                }else if(hardware=="cluster"){
+                    if(version=="nightly"){
+                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5";
+                    }else if(version=="stable"){
+                        cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5";
+                    }
+                }
+            }else if(automl=="automlyes"){
+                if(hardware=="singlenode"){
+                    if(version=="nightly"){
+                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5";
+                    }else if(version=="stable"){
+                        cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5";
+                    }
+                }else if(hardware=="cluster"){
+                    if(version=="nightly"){
+                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5";
+                    }else if(version=="stable"){
+                        cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5";
+                    }
+                }
+            }
+        }else if(model=="Machine_learning_models"){
+            if(version=="nightly"){
+                cmd="pip install --pre --upgrade bigdl-chronos";
+            }else if(version=="stable"){
+                cmd="pip install bigdl-chronos";
+            }
+        }
+    }
+
+    $("#cmd").html(cmd);
+}
+
+//set the color of selected buttons
 function set_color(id){
    $("#"+id).parent().css("background-color","rgb(74, 106, 237)");
    $("#"+id).css("color","white");
    $("#"+id).addClass("isset");
 }
 
+//reset the color of unselected buttons
 function reset_color(list){
     for (btn in list){
         $("#"+list[btn]).parent().css("background-color","transparent");
@@ -27,6 +220,7 @@ function reset_color(list){
     }
 }
 
+//disable buttons
 function disable(list){
     for(btn in list){
         $("#"+list[btn]).css("text-decoration","line-through");
@@ -38,6 +232,7 @@ function disable(list){
     }
 }
 
+//enable buttons
 function enable(list){
     for(btn in list){
         $("#"+list[btn]).css("text-decoration","none");
@@ -45,212 +240,53 @@ function enable(list){
     }
 }
 
-function refresh_cmd(){
+//when clicked a button, update variables
-    reset_color(ais);
+$(document).on('click',"button",function(){
-    reset_color(oss);
-    reset_color(releases);
-    reset_color(ways);
-    reset_color(hardwares);
-    reset_color(automls);
-    set_color(ai);
-    set_color(os);
-    set_color(release);
-    set_color(way);
-    set_color(hardware);
-    set_color(automl);
-
-    var cmd = "NA";
-
-    if(way=="docker"){
-        disable(ais);
-        disable(releases);
-        disable(oss);
-        disable(hardwares);
-        disable(automls);
-        cmd="Please refer to <a href=' https://github.com/intel-analytics/BigDL/tree/main/docker/chronos-nightly'>docker installation guide.</a>";
-    }else if(os=="win"){
-        disable(ais);
-        disable(releases);
-        disable(ways);
-        disable(hardwares);
-        disable(automls);
-        cmd="Please refer to <a href='https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/windows_guide.html'>windows_guide.</a>";
-    }else{
-        enable(ais);
-        enable(releases);
-        enable(oss);
-        enable(ways);
-        enable(hardwares);
-        enable(automls);
-    }
-
-
-    if(ai=="pytorch"){
-        if(way=="pypi"&&os=="linux"){
-            if(hardware=="singlenode"){
-                if(automl=="automlno"){
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos[pytorch]"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos"
-                }else{
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos[pytorch,automl]"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos[all]"
-                }
-            }
-            if(hardware=="cluster"){
-                if(automl=="automlno"){
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos[pytorch,distributed]"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos[all]"
-                }else{
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos[pytorch,distributed,automl]"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos[all]"
-                }
-            }
-        }
-    }
-    
-    if(ai=="tensorflow"){
-        if(way=="pypi"&&os=="linux"){
-            cmd="Please refer to <a href=' https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/chronos.html#tensorflow-backend'>tensorflow installation guide.</a>"
-        }
-    }
-
-    if(ai=="prophet"){
-        if(way=="pypi"&&os=="linux"){
-            if(hardware=="singlenode"){
-                if(automl=="automlno"){
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos; pip install prophet==1.1.0"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos; pip install prophet==1.1.0"
-                }else{
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0"
-                }
-            }
-            if(hardware=="cluster"){
-                if(automl=="automlno"){
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0"
-                }else{
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0"
-                }
-            }
-        }
-    }
-
-    if(ai=="pmdarima"){
-        if(way=="pypi"&&os=="linux"){
-            if(hardware=="singlenode"){
-                if(automl=="automlno"){
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos; pip install pmdarima==1.8.5"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos; pip install pmdarima==1.8.5"
-                }else{
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5"
-                }
-            }
-            if(hardware=="cluster"){
-                if(automl=="automlno"){
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5"
-                }else{
-                    if(release=="nightly")
-                        cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5"
-                    if(release=="stable")
-                        cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5"
-                }
-            }
-        }
-    }
-    $("#cmd").html(cmd);
-}
-
-function set_ai(id){
-    ai=id;
-    refresh_cmd();
-}
-
-function set_os(id){
-    os=id;
-    refresh_cmd();
-}
-
-function set_rel(id){
-    release=id;
-    refresh_cmd();
-}
-
-function set_way(id){
-    way=id;
-    refresh_cmd();
-}
-
-function set_hardware(id){
-    hardware=id;
-    refresh_cmd();
-}
-
-function set_automl(id){
-    automl=id;
-    refresh_cmd();
-}
-
-$("button").click(function(){
-    //alert($(this).attr("id")); 
     var id = $(this).attr("id");
-    if (ais.indexOf(id)>=0){
+
-        set_ai(id);
+    if (functionalities.indexOf(id)>=0){
+        functionality=id;
+        model="Deep_learning_models";
+    }
+    else if (models.indexOf(id)>=0){
+        model=id;
+    }
+    else if (ais.indexOf(id)>=0){
+        ai=id;
+    }
+    else if (oss.indexOf(id)>=0){
+        os=id;
+    }
+    else if (automls.indexOf(id)>=0){
+        automl=id;
+    }
+    else if (hardwares.indexOf(id)>=0){
+        hardware=id;
+    }
+    else if (packages.indexOf(id)>=0){
+        package=id;
+    }
+    else if (versions.indexOf(id)>=0){
+        version=id;
     }
     
-    if (oss.indexOf(id)>=0){
+    refresh_cmd();
-        set_os(id);
+})
-    }
-    if (releases.indexOf(id)>=0){
-        set_rel(id);
-    }
 
-    if (ways.indexOf(id)>=0){
+//func to add button hover effect
-        set_way(id);
+$(document).on({
-    }
+    mouseenter: function () {
-
+        if($(this).prop("disabled")!=true){
-    if (hardwares.indexOf(id)>=0){
-        set_hardware(id);
-    }
-
-    if (automls.indexOf(id)>=0){
-        set_automl(id);
-    }
-});
-
-$("button").hover(function(){
             $(this).parent().css("background-color","rgb(74, 106, 237)");
             $(this).css("color","white");
-},function(){
+        }
-    if(!$(this).hasClass("isset")){
+    },
+    mouseleave: function () {
+        if(!$(this).hasClass("isset") && $(this).prop("disabled")!=true){
             $(this).parent().css("background-color","transparent");
             $(this).css("color","black");
         }
-})
+    }
+}, "button");
 
 refresh_cmd();

docs/readthedocs/source/doc/Chronos/Overview/chronos.md

@@ -20,58 +20,68 @@ You can use _Chronos_ to do:
     <link rel="stylesheet" type="text/css" href="../../../_static/css/chronos_installation_guide.css" />
 
     <div class="displayed">
-        <table id="table-1" style="margin:auto">
-            <thead>
-                <th>AI Framework</th>
-                <th colspan="1"><button id="pytorch"
-                        title="Use PyTorch as deep learning models' backend. Most of the model support and works better under PyTorch.">PyTorch</br>(Recommended)</button>
-                </th>
-                <th colspan="1"><button id="tensorflow"
-                        title="Use Tensorflow as deep learning models' backend.">Tensorflow</button></th>
-                <th colspan="1"><button id="prophet" title="For Prophet model.">Prophet</button></th>
-                <th colspan="1"><button id="pmdarima" title="For ARIMA model.">ARIMA</button></th>
-            </thead>
-            <tbody>
     
+        <table id="table-1">
+            <tbody>
                 <tr>
-                    <td>OS</td>
+                    <td colspan="1">Functionality</td>
+                    <td colspan="1"><button id="Forecasting">Forecasting</button></td>
+                    <td colspan="2"><button id="Anomaly" style="font-size: 15px">Anomaly Detection</button></td>
+                    <td colspan="1"><button id="Simulation">Simulation</button></td>
+                </tr>
+                <tr id="model">
+                    <td colspan="1">Model</td>
+                    <td colspan="1"><button id="Deep_learning_models" style="font-size: 13px;">Deep learning models</button></td>
+                    <td colspan="2"><button id="Prophet">Prophet</button></td>
+                    <td colspan="1"><button id="ARIMA">ARIMA</button></td>
+                </tr>
+                <tr>
+                    <td colspan="1">DL<br>framework</td>
+                    <td colspan="2"><button id="pytorch"
+                            title="Use PyTorch as deep learning models' backend. Most of the model support and works better under PyTorch.">PyTorch (Recommended)</button>
+                    </td>
+                    <td colspan="2"><button id="tensorflow"
+                            title="Use Tensorflow as deep learning models' backend.">Tensorflow</button></td>
+                </tr>
+                <tr>
+                    <td colspan="1">OS</td>
                     <td colspan="2"><button id="linux" title="Ubuntu/CentOS is recommended">Linux</button></td>
                     <td colspan="2"><button id="win" title="WSL is needed for Windows users">Windows</button></td>
                 </tr>
 
                 <tr>
-                    <td>Auto Tuning</td>
+                    <td colspan="1">Auto Tuning</td>
                     <td colspan="2" title="I don't need any hyperparameter auto tuning feature."><button
-                            id="automlno">No need</button></td>
+                            id="automlno">No</button></td>
                     <td colspan="2" title="I need chronos to help me tune the hyperparameters."><button
-                            id="automlyes">Needed</button></td>
+                            id="automlyes">Yes</button></td>
                 </tr>
 
 
                 <tr>
-                    <td>Hardware</td>
+                    <td colspan="1">Hardware</td>
                     <td colspan="2"><button id="singlenode" title="For users use laptop/single node server.">Single
                             node</button></td>
                     <td colspan="2"><button id="cluster" title="For users use K8S/Yarn Cluster.">Cluster</button></td>
                 </tr>
 
                 <tr>
-                    <td>Release</td>
+                    <td colspan="1">Package</td>
                     <td colspan="2"><button id="pypi" title="For users use pip to install chronos.">Pip</button></td>
                     <td colspan="2"><button id="docker" title="For users use docker image.">Docker</button></td>
                 </tr>
 
                 <tr>
-                    <td>Build</td>
+                    <td colspan="1">Version</td>
-                    <td colspan="2"><button id="stable"
-                            title="For users would like to deploy chronos in their production">Stable (2.0.0)</button>
-                    </td>
                     <td colspan="2"><button id="nightly"
-                            title="For users would like to try chronos's latest feature">Nightly (2.1.0b)</button></td>
+                            title="For users would like to try chronos's latest feature">Nightly (2.1.0b)</button>
+                    </td>
+                    <td colspan="2"><button id="stable"
+                            title="For users would like to deploy chronos in their production">Stable (2.0.0)</button></td>
                 </tr>
 
                 <tr>
-                    <td>Install CMD</td>
+                    <td colspan="1">Install CMD</td>
                     <td colspan="4">
                         <div id="cmd" style="text-align: left;">NA</div>
                     </td>