From dfb09460756aabf27179333aea57059f7e36c7b6 Mon Sep 17 00:00:00 2001
From: Juntao_Luo <71260173+AndyLuo1029@users.noreply.github.com>
Date: Thu, 11 Aug 2022 17:30:03 +0800
Subject: [PATCH] Chronos: Update Chronos install guide form's js and css file.
 (#5360)

* Update chronos_installation_guide.css

* Update chronos_installation_guide.js

* Update chronos.md

* Change border color

* Deleted test text in '2. Install' title

I changed the title in last commit to check if my build in readthedoc web works fine. Now I delete it.

* Update button css selector

Revised the button selector to avoid influencing other buttons' style on the web.

* Update #cmd height

* Update as pull-request comment required.

1, disable other options when users choose windows, and guide users to https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/windows_guide.html in "Install CMD"
2, guide users to https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/chronos.html#tensorflow-backend in "Install CMD" when tensorflow is chosen.
3, guide users to https://github.com/intel-analytics/BigDL/tree/main/docker/chronos-nightly in "install CMD" when docker is chosen.

* Update css file to meet the comment requirements

Make the disabled items' background darker to have a better vis experience.
Have a larger fontsize.

* Update js file to meet the comment requirement.

 Make the disabled items' background darker to have a better vis experience.

* Update border css settings.

Changed table border settings since last version looks not good.

* Change pmdarima to ARIMA

* Update visuals.

The button now has a hovering style, indicating the user that it can be clicked.
---
 .../css/chronos_installation_guide.css        |  48 ++--
 .../_static/js/chronos_installation_guide.js  | 250 ++++++++++--------
 .../source/doc/Chronos/Overview/chronos.md    |   2 +-
 3 files changed, 172 insertions(+), 128 deletions(-)

diff --git a/docs/readthedocs/source/_static/css/chronos_installation_guide.css b/docs/readthedocs/source/_static/css/chronos_installation_guide.css
index 8624367b..d34dd615 100644
--- a/docs/readthedocs/source/_static/css/chronos_installation_guide.css
+++ b/docs/readthedocs/source/_static/css/chronos_installation_guide.css
@@ -1,33 +1,51 @@
 /* Border styles */
-#table-1 thead, #table-1 tr, #table-1 td  {
-    border-top-width: 1px;
-    border-top-style: solid;
-    border-top-color: rgb(150, 200, 230);
+#table-1 tr, #table-1 td, #table-1 th  {
+    border-width: 2px;
+    border-style: solid;
+    border-color: white ;
+    padding: 5px;
     }
+
     #table-1 {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: rgb(150, 200, 230);
+    border-bottom-width: 0px;
     }
     
     /* Padding and font style */
     #table-1 td, #table-1 th {
-    padding: 5px 10px;
-    font-size: 12px;
+    font-size: 16px;
     font-family: Verdana;
     color: rgb(15, 24, 33);
     }
     
     /* Alternating background colors */
-    #table-1 tr:nth-child(even) {
-    background: rgb(150, 200, 230)
-    }
-    #table-1 tr:nth-child(odd) {
-    background: rgb(150, 200, 230)
+    #table-1 tr, td{
+        background-color: rgb(240, 241, 245);
+        height: 30px;
     }
     
     .displayed {
         display: block;
         text-align: center;
         margin-left: auto;
-        margin-right: auto }
\ No newline at end of file
+        margin-right: auto }
+
+    /* setting div id=cmd width */
+    #cmd {
+        width: 450px;
+        height: 35px;
+        overflow:unset;
+    }
+
+    td, th {
+        text-align: center;
+    }
+
+    #table-1 button {
+        border-color: transparent;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        cursor: pointer;
+        font-size: 16px;
+    }
+
diff --git a/docs/readthedocs/source/_static/js/chronos_installation_guide.js b/docs/readthedocs/source/_static/js/chronos_installation_guide.js
index f55a48b9..f1e7d94e 100644
--- a/docs/readthedocs/source/_static/js/chronos_installation_guide.js
+++ b/docs/readthedocs/source/_static/js/chronos_installation_guide.js
@@ -12,13 +12,36 @@ var hardware="singlenode";
 var automl="automlno"
 
 
+
 function set_color(id){
-   $("#"+id).css("background-color","yellow");
+   $("#"+id).parent().css("background-color","rgb(74, 106, 237)");
+   $("#"+id).css("color","white");
+   $("#"+id).addClass("isset");
 }
 
 function reset_color(list){
     for (btn in list){
-        $("#"+list[btn]).css("background-color","buttonface");
+        $("#"+list[btn]).parent().css("background-color","transparent");
+        $("#"+list[btn]).css("color","black");
+        $("#"+list[btn]).removeClass("isset");
+    }
+}
+
+function disable(list){
+    for(btn in list){
+        $("#"+list[btn]).css("text-decoration","line-through");
+        $("#"+list[btn]).attr("disabled","true");
+    }
+    reset_color(list);
+    for(btn in list){
+        $("#"+list[btn]).parent().css("background-color","rgb(133, 133, 133)");
+    }
+}
+
+function enable(list){
+    for(btn in list){
+        $("#"+list[btn]).css("text-decoration","none");
+        $("#"+list[btn]).attr("disabled",false);
     }
 }
 
@@ -37,132 +60,125 @@ function refresh_cmd(){
     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=="docker"){
-            cmd="Please refer to docker installation guide.";
-        }else{
-            if(os=="win"){
-                cmd="Please refer to windows installation guide.";
-            }else{
-                if(way=="pypi"){
-                    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(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=="docker"){
-            cmd="Please refer to docker installation guide.";
-        }else{
-            if(os=="win"){
-                cmd="Please refer to windows installation guide.";
-            }else{
-                if(way=="pypi"){
-                    cmd="Please refer to tensorflow installation guide."
-                }
-            }
+        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=="docker"){
-            cmd="Please refer to docker installation guide.";
-        }else{
-            if(os=="win"){
-                cmd="Please refer to windows installation guide.";
-            }else{
-                if(way=="pypi"){
-                    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(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=="docker"){
-            cmd="Please refer to docker installation guide.";
-        }else{
-            if(os=="win"){
-                cmd="Please refer to windows installation guide.";
-            }else{
-                if(way=="pypi"){
-                    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"
-                        }
-                    }
+        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"
                 }
             }
         }
@@ -227,4 +243,14 @@ $("button").click(function(){
     }
 });
 
-refresh_cmd();
\ No newline at end of file
+$("button").hover(function(){
+    $(this).parent().css("background-color","rgb(74, 106, 237)");
+    $(this).css("color","white");
+},function(){
+    if(!$(this).hasClass("isset")){
+        $(this).parent().css("background-color","transparent");
+        $(this).css("color","black");
+    }
+})
+
+refresh_cmd();
diff --git a/docs/readthedocs/source/doc/Chronos/Overview/chronos.md b/docs/readthedocs/source/doc/Chronos/Overview/chronos.md
index 0c601857..355f1bcb 100644
--- a/docs/readthedocs/source/doc/Chronos/Overview/chronos.md
+++ b/docs/readthedocs/source/doc/Chronos/Overview/chronos.md
@@ -29,7 +29,7 @@ You can use _Chronos_ to do:
                 <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.">pmdarima</button></th>
+                <th colspan="1"><button id="pmdarima" title="For ARIMA model.">ARIMA</button></th>
             </thead>
             <tbody>