From 3dec0438cfe7aa95e9e7e2760e837e288445e203 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 2 Mar 2018 11:18:54 +0100
Subject: [PATCH] New Product Panel Working

---
 .vs/AAWebPlatform/v15/.suo | Bin 69632 -> 67584 bytes
 Dashboard.js               |   1 +
 Ecosystem.js               |  24 ++++++--
 EventHandler.js            |   5 +-
 File.js                    |  10 +--
 FileCache.js               |  12 ++--
 FileCloud.js               |  17 ++++-
 FileCursor.js              |   8 +--
 FileCursorCache.js         |  12 ++--
 Panels/ProductsPanel.js    |  69 ++-------------------
 Plotters.js                |   1 +
 ProductCard.js             | 123 +++++++++++++++++++++++--------------
 SplashScreen.js            |   8 ++-
 TimelineChart.js           |  14 +++--
 ecosystem.json             |  82 ++++++++++++-------------
 15 files changed, 198 insertions(+), 188 deletions(-)

diff --git a/.vs/AAWebPlatform/v15/.suo b/.vs/AAWebPlatform/v15/.suo
index a0cd512c9a6a75028dc9cc99c7d4f15a3824e1d9..a2f9474992f370c227d050e74b07d85963a7f83e 100644
GIT binary patch
delta 3747
zcmd6pdsLI>8Nk2yOM(HC@CgMXAS4h0Y19A;1rY+IikFfEwO(db5Ud_p@e({p8N?f2
z+mJjQ=Vi5!<J4BpD*4v!tkrXZI@?)~*15H7&rxw3XGhPxZMc?I&7LPDl+JFa-TFu0
zbAEZ=+xK3c+Z%hQ)ZQ*_FNhw?ahwEs?DP3ha17bhWBr1$5YX~Ts^td~yHuVlERzOj
zKoj4@B=CUW!kS>CWR{XCusaFC&wb!LrBgnKjq*7B!6E}DjbgD*Yiz3ln`sEmqcR5T
zQOI;80(lB4LSm3fhz_B72`J-{X-G7Zii9J{NCrZ4G$=<SbQTjLMJ6INHUVWM$7%hI
zL~PJu$0K@#E}e~X4gwdX>ei`Pp|1*1(jBZw3SvZNBPB>FQijYxXl@otT4*N9&4_>$
zBeM`QLUSxAE098DUZ8J2%7uYC%~^zJSRvE0)lO>?9F_^p?zGN!@pUR=|IAJ@!4Giq
z6DD{$dM)+_6;A6=8AXb34aJeC5iOFAEJkQlg;IljoefrEKiOabLUSJ>|84{7CmWE=
zM=1}~$p+L%Hb4<VbzcY!%G1~!ywqs4gMXa5{hB4mAT`cKf@-8eDx}6$2&s|UWIK{n
zNR1?wBl@1jdijVpnPdsJUqF^3%aG+r6++*xKv_-O)?kHf{USm(u0?19m6t};>#@ED
zX@%a<c-9D4L*oV7WE}P}3>zMS_AnF73Dfmdw=<W@#``$fplabCbMTMIas^#Ug3!to
zEBqrIj@TvtCSO;`M@AWbDQ<|m$iOt|q$|b*roEH-1*62Ky)&7T(KaC?wh;$n6};<+
zNkJYM^a0u*Y)8y+Mv}=mcyPolMF-?yQ@tK+M=c8SOj23!tco#sJtuZh@k}(~*3l>3
zaZ*>g1~i&u@?bRh*B#K{x_l<sw0<ck8+0R(sf!XLX5D8{oEimnpQ=Qy?mBaoln%`<
zF)KNWqFf}nuQ*VmV4n0S9xk3s5cbsnsd`NPy?3s(>{sg3p5KoPM#H>{kA=O0e18AV
zgPEV0yHC{Z``Hv6cnZvOdptieF$G0h@rX6S_L>Du+YAZ{*H;iKuB|2o`Bl*0h7`2*
z5-A95+xEC(8vQDcnZ*=zxS;RRJUL}29-(bTL*j?bxklsCBtvq(R>@IPDMEr*0$bsb
zdIk!AC#Os@JTOp{EXGvbV&H9`2!`wVf-L9n(zCY?d7h4#{ZO_w;*Nj)J;n|uYV!M-
z+rYbyq3$G^qV1T4Nh!0C0Ygt?WgEhYkH)0%pb=7(93?^nGQ62h2%JJN%NS+DA={6(
zC@6QPjhHGshz%zUW}g?&G*4qLK_hAs`WRT>o+3^u`+&Kdc_Cdm*Wfrkw&ar=UC$5Z
zCAUE4b`9L^5}?eU4ozKZu(x}m*O}t)+ufB9e|D6r(DMQ%&YR7|$L0{Gc^`YuAZHN@
zuX8Bh3)HWo1fBH)%u@^Q9NuG*evA1ldDlLZl=2~6RJIE%4%k?JNj?Q@UuwlX58jvP
zWt9Ieh=Wr`@t%ccOdd>!Lte269hDN_<Pl$r1B>)hQDaJBLmu<&9@o-RC8N|s?*HWm
zOHu9UQUd{LTV_#Eo}#22oD?2~iU~NT=v%>f&odL4aJQ*$-wDl!%@6Nh-v7qCmuAAW
zyfdCvH^bROxV3%{dkHq_Dkw_ehHZfaO$|j2z2D->;r=V*DX@sXhR+y2$y2#7Y!!10
zMh(5z5)OJ_%@K`F<C*YoT}SzS?pNxh-?upKOyAw=kHuFvu7fNL@~G6?%+vA=50e}@
z;Mx)iUVEi*pjPVXKls;^KbpTh?AO=tH~NG0#MK1QZn_TEHlt|F@-ok6BLipKSg3Ut
zvcs^}Ziah16N9d#Ld8(J^q18}Jk4SJKXQ5Z8r<mfn4bp*NaO|TrsKnFoY0Q~eTNX%
z-28Ip<m$}ayd2j~FKF8m;SFc9KyQEop$tt0iW~+?qulyjD0XIm!J!P#EzMteiBy8a
zH?}0<rmAp#WldIYWloi0LXGI{C}AR>e3~g}r3_@)q&jTuM6igyxq2p4Z|mwAFFP*(
z?dFOdZr`#_m^y!r@aCkmW!L`r3*q&T8zbcL@2rOVo7He9FA_RW#k)J1YvXvxZj600
z+N`hCLg0E3+m;?8Sk~27H-Ob?fG=(fVBF;er!g)tWtof|4j-!y1N6<p{N2?D{f?51
zcIx$)IPX4`^x}-v$gpZS(C${#Vp5t7hK>SVP%YHKsX2z(u*qMipExgN+BDoS!L>0R
zm_zL<s1*{{zi5fd=-$^OJ9;4L&L1A2JH&#k;HSdq_QmN2`Q?(EgEOz}(0<m2N{EG}
z)7;Q=JsQ%lB|>&ai?AZ~?V|p?kGkvbZZJpGZRr$yGm4mJ`E~{cIypEh*SfoT&!KM=
zy5Z;XbU&tp;$?b&I0o!}VK6pN5VJfNB`$rf@E3dGp&2*&-<!JSt(Lt<D{uPKutUF=
zxzF<M#k~8UQqSRJUQ9M=hlAh!So$5tKO9}vDz>iL6zcwn_pH0g{!_?{MGe2?|EIXU
z{N{HQs?qLGr7+1}{NEz=HIZHON#Fy=lK&%QZ&!W)+}iWE@;InU&l2r@c7{)0hhT%_
zw@c1%|INL@lv9U3Z(2sKqpqp4)K%J6)<5xR-f&Ex_|->o=)dV#qR{WBD{7Xk^ZRR;
xJ_eIosyrBgFt%}A<P)LCfv<5qys$%kM8Wt_dROU>{kR_MTliO{?0b3Ae*sZR=mG!$

delta 4483
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

diff --git a/Dashboard.js b/Dashboard.js
index 09dc0897a..5162fb31f 100644
--- a/Dashboard.js
+++ b/Dashboard.js
@@ -1,4 +1,5 @@
 
+
 /* The Dashboard is the root object that contains all the other stuff in it. Some of that stuff is visible, some other is invisible. */
 
 var canvas;
diff --git a/Ecosystem.js b/Ecosystem.js
index 06989c457..91a2206ba 100644
--- a/Ecosystem.js
+++ b/Ecosystem.js
@@ -6,6 +6,7 @@ function newEcosystem() {
         getTeams: getTeams,
         getBot: getBot,
         getProduct: getProduct,
+        getSet: getSet,
         getExchange: getExchange, 
         initialize: initialize
     }
@@ -60,15 +61,30 @@ function newEcosystem() {
         }
     }
 
-    function getExchange(pProduct, pName) {
+    function getSet(pProduct, pSetCodeName) {
 
-        for (let i = 0; i < pProduct.exchangeList.exchange.length; i++) {
+        for (let i = 0; i < pProduct.sets.length; i++) {
 
-            if (pProduct.exchangeList.exchange[i].name === pName) {
+            if (pProduct.sets[i].codeName === pSetCodeName) {
 
-                return pProduct.exchangeList.exchange[i];
+                return pProduct.sets[i];
             }
         }
     }
+
+    function getExchange(pProduct, pName) {
+
+        for (let i = 0; i < pProduct.exchangeList.length; i++) {
+
+            if (pProduct.exchangeList[i].name === pName) {
+
+                return pProduct.exchangeList[i];
+            }
+        }
+    }
+
+
+
+    return false;
 }
 
diff --git a/EventHandler.js b/EventHandler.js
index 10f7921cb..c364a98d0 100644
--- a/EventHandler.js
+++ b/EventHandler.js
@@ -1,7 +1,7 @@
 
 function newEventHandler() {
 
-    var eventHandler = {
+    let eventHandler = {
         containerName: "",                  // This is for debugging purposes only.
         parentEventHandler: undefined,             // Here we store the parent cointainer zoom object. 
         listenToEvent: listenToEvent,
@@ -38,9 +38,6 @@ function newEventHandler() {
                 handler(event, extraData);
 
             }
-
         }
-
     }
-
 }
diff --git a/File.js b/File.js
index b1821f154..c42a92278 100644
--- a/File.js
+++ b/File.js
@@ -11,7 +11,7 @@ function newFile() {
 
     return fileObject;
 
-    function initialize(pTeamCodeName, pBotCodeName, pProductCodeName, pLayerCodeName, pExchange, pMarket, callBackFunction) {
+    function initialize(pTeamCodeName, pBotCodeName, pProductCodeName, pSetCodeName, pExchange, pMarket, callBackFunction) {
 
         let product = ecosystem.getProduct(ecosystem.getBot(ecosystem.getTeam(pTeamCodeName), pBotCodeName), pProductCodeName);
 
@@ -29,11 +29,11 @@ function newFile() {
 
         }
 
-        let layer = ecosystem.getLayer(product, pLayerCodeName);
+        let productSet = ecosystem.getSet(product, pSetCodeName);
 
-        if (layer === undefined) {
+        if (productSet === undefined) {
 
-            throw "Layer not found at this product of the ecosystem! - pTeamCodeName = " + pTeamCodeName + ", pBotCodeName = " + pBotCodeName + ", pProductCodeName = " + pProductCodeName + ", pLayerCodeName = " + pLayerCodeName;
+            throw "Set not found at this product of the ecosystem! - pTeamCodeName = " + pTeamCodeName + ", pBotCodeName = " + pBotCodeName + ", pProductCodeName = " + pProductCodeName + ", pSetCodeName = " + pSetCodeName;
 
         }
 
@@ -42,7 +42,7 @@ function newFile() {
 
         /* Now we will get the file */
 
-        fileCloud.getFile(product, exchange, pMarket, undefined, undefined, onFileReceived);
+        fileCloud.getFile(productSet, exchange, pMarket, undefined, undefined, onFileReceived);
 
         function onFileReceived(pFile) {
 
diff --git a/FileCache.js b/FileCache.js
index 90783d31b..ee06603eb 100644
--- a/FileCache.js
+++ b/FileCache.js
@@ -14,7 +14,7 @@ function newFileCache() {
     
     return fileCache;
 
-    function initialize(pTeamCodeName, pBotCodeName, pProductCodeName, pLayerCodeName, pExchange, pMarket, callBackFunction) {
+    function initialize(pTeamCodeName, pBotCodeName, pProductCodeName, pSetCodeName, pExchange, pMarket, callBackFunction) {
 
         let product = ecosystem.getProduct(ecosystem.getBot(ecosystem.getTeam(pTeamCodeName), pBotCodeName), pProductCodeName);
 
@@ -32,11 +32,11 @@ function newFileCache() {
 
         }
 
-        let layer = ecosystem.getLayer(product, pLayerCodeName);
+        let productSet = ecosystem.getSet(product, pSetCodeName);
 
-        if (layer === undefined) {
+        if (productSet === undefined) {
 
-            throw "Layer not found at this product of the ecosystem! - pTeamCodeName = " + pTeamCodeName + ", pBotCodeName = " + pBotCodeName + ", pProductCodeName = " + pProductCodeName + ", pLayerCodeName = " + pLayerCodeName;
+            throw "Set not found at this product of the ecosystem! - pTeamCodeName = " + pTeamCodeName + ", pBotCodeName = " + pBotCodeName + ", pProductCodeName = " + pProductCodeName + ", pSetCodeName = " + pSetCodeName;
 
         }
 
@@ -50,9 +50,9 @@ function newFileCache() {
             let periodTime = marketFilesPeriods[i][0];
             let periodName = marketFilesPeriods[i][1];
 
-            if (layer.validPeriods.includes(periodName) === true) {
+            if (productSet.validPeriods.includes(periodName) === true) {
 
-                fileCloud.getFile(product, exchange, pMarket, periodName, undefined, onFileReceived);
+                fileCloud.getFile(productSet, exchange, pMarket, periodName, undefined, onFileReceived);
 
                 function onFileReceived(file) {
 
diff --git a/FileCloud.js b/FileCloud.js
index a9aa41ade..92eea0eaf 100644
--- a/FileCloud.js
+++ b/FileCloud.js
@@ -18,10 +18,21 @@ function newFileCloud() {
 
     }
 
-    function getFile(pProduct, pExchange, pMarket, pPeriodName, pDatetime, callBackFunction) {
+    function getFile(pSet, pExchange, pMarket, pPeriodName, pDatetime, callBackFunction) {
 
-        let fileName = pProduct.fileName;
-        let filePath = pProduct.filePath;
+        let fileName = pSet.fileName;
+        let filePath = pSet.filePath;
+
+        if (fileName === undefined) {
+
+            console.log("Inconsistant data. Check the following. ");
+            console.log(JSON.stringify(pSet));
+            console.log(JSON.stringify(pExchange));
+            console.log(JSON.stringify(pMarket));
+            console.log(JSON.stringify(pPeriodName));
+
+            throw ("Inconsistant data received.");
+        }
 
         fileName = fileName.replace("@AssetA", pMarket.assetA);
         fileName = fileName.replace("@AssetB", pMarket.assetB);
diff --git a/FileCursor.js b/FileCursor.js
index 64cd6901e..f25961627 100644
--- a/FileCursor.js
+++ b/FileCursor.js
@@ -19,18 +19,18 @@ function newFileCursor() {
     let market;
     let exchange;
     let fileCloud;
-    let product;
+    let productSet;
     let periodName;
     let timePeriod;
 
     return fileCursor;
 
-    function initialize(pFileCloud, pProduct, pExchange, pMarket, pPeriodName, pTimePeriod, pCursorDate, pCurrentTimePeriod, callBackFunction) {
+    function initialize(pFileCloud, pProductSet, pExchange, pMarket, pPeriodName, pTimePeriod, pCursorDate, pCurrentTimePeriod, callBackFunction) {
 
         market = pMarket;
         exchange = pExchange;
         fileCloud = pFileCloud;
-        product = pProduct;
+        productSet = pProductSet;
         periodName = pPeriodName;
         cursorDate = pCursorDate;
         timePeriod = pTimePeriod;
@@ -289,7 +289,7 @@ function newFileCursor() {
 
                 if (fileCursor.files.get(dateString) === undefined) { // We dont reload files we already have. 
 
-                    fileCloud.getFile(product, exchange, market, periodName, targetDate, onFileReceived);
+                    fileCloud.getFile(productSet, exchange, market, periodName, targetDate, onFileReceived);
 
                 } else {
 
diff --git a/FileCursorCache.js b/FileCursorCache.js
index bc348199b..3abeb88a6 100644
--- a/FileCursorCache.js
+++ b/FileCursorCache.js
@@ -15,7 +15,7 @@ function newFileCursorCache() {
 
     return fileCursorCache;
 
-    function initialize(pTeamCodeName, pBotCodeName, pProductCodeName, pLayerCodeName, pExchange, pMarket, pDatetime, pTimePeriod, callBackFunction) {
+    function initialize(pTeamCodeName, pBotCodeName, pProductCodeName, pSetCodeName, pExchange, pMarket, pDatetime, pTimePeriod, callBackFunction) {
 
         let product = ecosystem.getProduct(ecosystem.getBot(ecosystem.getTeam(pTeamCodeName), pBotCodeName), pProductCodeName);
 
@@ -33,11 +33,11 @@ function newFileCursorCache() {
 
         }
 
-        let layer = ecosystem.getLayer(product, pLayerCodeName);
+        let productSet = ecosystem.getSet(product, pSetCodeName);
 
-        if (layer === undefined) {
+        if (productSet === undefined) {
 
-            throw "Layer not found at this product of the ecosystem! - pTeamCodeName = " + pTeamCodeName + ", pBotCodeName = " + pBotCodeName + ", pProductCodeName = " + pProductCodeName + ", pLayerCodeName = " + pLayerCodeName;
+            throw "Set not found at this product of the ecosystem! - pTeamCodeName = " + pTeamCodeName + ", pBotCodeName = " + pBotCodeName + ", pProductCodeName = " + pProductCodeName + ", pSetCodeName = " + pSetCodeName;
 
         }
 
@@ -51,10 +51,10 @@ function newFileCursorCache() {
             let periodTime = dailyFilePeriods[i][0];
             let periodName = dailyFilePeriods[i][1];
 
-            if (layer.validPeriods.includes(periodName) === true) {
+            if (productSet.validPeriods.includes(periodName) === true) {
 
                 let fileCursor = newFileCursor();
-                fileCursor.initialize(fileCloud, product, exchange, pMarket, periodName, periodTime, pDatetime, pTimePeriod, onFileReceived);
+                fileCursor.initialize(fileCloud, productSet, exchange, pMarket, periodName, periodTime, pDatetime, pTimePeriod, onFileReceived);
 
                 fileCursors.set(periodTime, fileCursor);
 
diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js
index 2e50326d7..d7762e09d 100644
--- a/Panels/ProductsPanel.js
+++ b/Panels/ProductsPanel.js
@@ -6,7 +6,6 @@ function newProductsPanel() {
     var thisObject = {
         container: undefined,
         getOnProductCards: getOnProductCards,
-        getProductStatus: getProductStatus,
         draw: draw,
         getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
         initialize: initialize
@@ -17,17 +16,17 @@ function newProductsPanel() {
     container.isDraggeable = true;
     container.isZoomeable = false;
     thisObject.container = container;
-    thisObject.container.frame.containerName = "Chart Layers Panel";
+    thisObject.container.frame.containerName = "Bot's Products";
 
     let isInitialized = false;
-    let productCards;
+    let productCards = [];
 
     return thisObject;
 
     function initialize() {
 
-        this.container.frame.width = 200;
-        this.container.frame.height = 200;
+        this.container.frame.width = 300;
+        this.container.frame.height = 500;
 
         var position = {
             x: viewPort.visibleArea.topRight.x - this.container.frame.width,
@@ -86,25 +85,7 @@ function newProductsPanel() {
                     productCard.container.frame.position.x = position.x;
                     productCard.container.frame.position.y = position.y + lastY;
 
-                    lastY = lastY + productCard.container.frame.height;
-
-                    /*  We start listening to the productCard click event, so as to know when one was pressed. */
-
-                    productCard.container.eventHandler.listenToEvent('onMouseClick', buttonPressed, i);
-
-                    /* We retrieve the locally stored status of the Product */
-
-                    let storedValue = window.localStorage.getItem(productCard.code);
-
-                    if (storedValue !== null) {
-
-                        productCard.status = storedValue;
-
-                    } else {
-
-                        productCard.status = PRODUCT_CARD_STATUS.ON;
-
-                    }
+                    lastY = lastY + productCard.container.frame.height * 1.25;
 
                     /* Add to the Product Array */
 
@@ -126,7 +107,7 @@ function newProductsPanel() {
 
         for (let i = 0; i < productCards.length; i++) {
 
-            if (productCards[i].status = PRODUCT_CARD_STATUS.ON) {
+            if (productCards[i].status === PRODUCT_CARD_STATUS.ON) {
 
                 onProducts.push(productCards[i]);
             }
@@ -135,23 +116,6 @@ function newProductsPanel() {
         return onProducts;
     }
 
-    function getProductStatus(pProductCode) {
-
-        for (let i = 0; i < productCards.length; i++) {
-
-            let button = productCards[i];
-
-            if (button.code === pProductCode) {
-
-                return button.status;
-
-            }
-
-        }
-
-        return PRODUCT_CARD_STATUS.OFF;
-    }
-
     function getContainer(point) {
 
         var container;
@@ -188,27 +152,6 @@ function newProductsPanel() {
 
     }
 
-    function buttonPressed(event, index) {
-
-        switch (productCards[index].status) {
-
-            case PRODUCT_CARD_STATUS.ON:
-                productCards[index].status = PRODUCT_CARD_STATUS.OFF;
-                break;
-
-            case PRODUCT_CARD_STATUS.OFF:
-                productCards[index].status = PRODUCT_CARD_STATUS.ON;
-                break;
-
-        }
-
-        let eventData = productCards[index];    
-
-        thisObject.container.eventHandler.raiseEvent('Product Card Status Changed', eventData);
-
-        window.localStorage.setItem(productCards[index].code, productCards[index].status);
-
-    }
 
     function draw() {
 
diff --git a/Plotters.js b/Plotters.js
index 1ce6823c0..554f17a68 100644
--- a/Plotters.js
+++ b/Plotters.js
@@ -4,6 +4,7 @@ function getNewPlotter(pDevTeam, pRepo, pModule) {
 
     let plotter;
     let fullCode = pDevTeam + pRepo + pModule;
+    fullCode = fullCode.replace(/-/g, "");
 
     switch (fullCode) {
 
diff --git a/ProductCard.js b/ProductCard.js
index aab34efb5..45223f8a9 100644
--- a/ProductCard.js
+++ b/ProductCard.js
@@ -8,7 +8,6 @@
         bot: undefined,
         product: undefined,
         code: undefined,
-        layer: undefined,
         getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
         initialize: initialize
     };
@@ -33,7 +32,29 @@
 
         this.container.frame.position = position;
         this.container.frame.width = 280;
-        this.container.frame.height = 28;
+        this.container.frame.height = 45;
+
+        /* We retrieve the locally stored status of the Product */
+
+        let storedValue = window.localStorage.getItem(thisObject.code);
+
+        if (storedValue !== null) {
+
+            thisObject.status = storedValue;
+
+        } else {
+
+            thisObject.status = PRODUCT_CARD_STATUS.ON;
+
+            /* Save the value for future use */
+
+            window.localStorage.setItem(thisObject.code, thisObject.status);
+
+        }
+
+        /* Lets listen to our own events to react when we have a Mouse Click */
+
+        thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed);
 
     }
 
@@ -56,6 +77,28 @@
 
     }
 
+    function buttonPressed(event) {
+
+        switch (thisObject.status) {
+
+            case PRODUCT_CARD_STATUS.ON:
+                thisObject.status = PRODUCT_CARD_STATUS.OFF;
+                break;
+
+            case PRODUCT_CARD_STATUS.OFF:
+                thisObject.status = PRODUCT_CARD_STATUS.ON;
+                break;
+
+        }
+
+        let eventData = thisObject;
+
+        thisObject.container.eventHandler.raiseEvent('Status Changed', eventData);
+
+        window.localStorage.setItem(thisObject.code, thisObject.status);
+
+    }
+
     function draw() {
 
         drawIcon();
@@ -84,11 +127,11 @@
 
         switch (thisObject.status) {
 
-            case 'on':
+            case PRODUCT_CARD_STATUS.ON:
                 browserCanvasContext.fillStyle = onFillStyle;
                 break;
 
-            case 'off':
+            case PRODUCT_CARD_STATUS.OFF:
                 browserCanvasContext.fillStyle = offFillStyle;
                 break;
 
@@ -116,11 +159,39 @@
 
         /* devTeam */
 
-        label = thisObject.devTeam;
+        label = "Dev Team: " + thisObject.devTeam.displayName;
 
         xOffset = 0;
         yOffset = 0;
 
+        labelPoint = {
+            x: 20,
+            y: thisObject.container.frame.height - 35
+        };
+
+        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
+
+        browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
+
+        /* bot */
+
+        label = "Bot: " + thisObject.bot.displayName;
+
+        labelPoint = {
+            x: 20,
+            y: thisObject.container.frame.height - 20
+        };
+
+        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
+
+        browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
+
+        /* product */
+
+        label = "Product: " + thisObject.product.displayName;
+
         labelPoint = {
             x: 20,
             y: thisObject.container.frame.height - 5
@@ -131,47 +202,5 @@
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
-        /* bot */
-
-        label = thisObject.bot;
-
-        labelPoint = {
-            x: 40,
-            y: thisObject.container.frame.height - 5
-        };
-
-        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
-
-        browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
-        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
-
-        /* product */
-
-        label = thisObject.product;
-
-        labelPoint = {
-            x: 60,
-            y: thisObject.container.frame.height - 5
-        };
-
-        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
-
-        browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
-        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
-
-        /* layer */
-
-        label = thisObject.layer;
-
-        labelPoint = {
-            x: 80,
-            y: thisObject.container.frame.height - 5
-        };
-
-        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
-
-        browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
-        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
-
     }
 }
\ No newline at end of file
diff --git a/SplashScreen.js b/SplashScreen.js
index bfbc2ce07..999b4c595 100644
--- a/SplashScreen.js
+++ b/SplashScreen.js
@@ -46,6 +46,8 @@ function newSplashScreen() {
 
     function draw() {
 
+        splashScreenNeeded = false;
+
         if (splashScreenNeeded === false) {
 
             stepsInitializationCounter = 100;
@@ -65,7 +67,11 @@ function newSplashScreen() {
         let label = '' + Math.trunc(stepsInitializationCounter)  + ' %';
         stepsInitializationCounter = stepsInitializationCounter + 0.2;
 
-        if (stepsInitializationCounter > 99) { stepsInitializationCounter = 99;}
+        if (stepsInitializationCounter > 99) {
+
+            splashScreenNeeded = false;
+            stepsInitializationCounter = 99;
+        }
 
         let fontSize = 50;
 
diff --git a/TimelineChart.js b/TimelineChart.js
index 40edf74af..05d1e8d0d 100644
--- a/TimelineChart.js
+++ b/TimelineChart.js
@@ -50,8 +50,6 @@ function newTimelineChart() {
 
         productsPanel = pProductsPanel;
 
-        productsPanel.eventHandler.listenToEvent("Product Card Status Changed", onProductCardStatusChanged);
-
         marketId = market;
         exchangeId = exchange;
 
@@ -139,6 +137,12 @@ function newTimelineChart() {
                 plotter: plotter
             };
 
+            /* Listen to the event of change of status */
+
+            pProductCard.container.eventHandler.listenToEvent("Status Changed", onProductCardStatusChanged);
+
+            /* Add the new Active Protter to the Array */
+
             activePlotters.push(activePlotter);
 
         }
@@ -305,6 +309,8 @@ function newTimelineChart() {
 
     function draw() {
 
+        if (activePlotters === undefined) { return; } // We need to wait
+
         if (timelineChart.container.frame.isInViewPort()) {
 
             this.container.frame.draw();
@@ -313,9 +319,9 @@ function newTimelineChart() {
 
             chartGrid.draw(timelineChart.container, plotArea);
 
-            for (var i = 0; i < this.activePlotters.length; i++) {
+            for (var i = 0; i < activePlotters.length; i++) {
 
-                let activePlotter = this.activePlotters[i];
+                let activePlotter = activePlotters[i];
                 activePlotter.plotter.draw();
 
             }
diff --git a/ecosystem.json b/ecosystem.json
index 040f8b973..fd412ed53 100644
--- a/ecosystem.json
+++ b/ecosystem.json
@@ -2,7 +2,7 @@
   "devTeams": [
     {
       "codeName": "AAMasters",
-      "displayName": "Advanced Algos Masters",
+      "displayName": "AA Masters",
       "organization": {
         "name": "AAMasters",
         "type": "Open Source Community",
@@ -31,29 +31,30 @@
           },
           "products": [
             {
-              "codeName": "Market Candles",
+              "codeName": "Candles",
               "displayName": "Market Candles per Period",
               "description": "Two sets of files per period that contains candles.",
               "storageAccount": "aaolivia",
               "sets": [
                 {
+                  "codeName": "Market Files",
                   "validPeriods": [ "24-hs", "12-hs", "08-hs", "06-hs", "04-hs", "03-hs", "02-hs", "01-hs" ],
                   "filePath": "@Exchange/Output/Candles/Multi-Period-Market/@Period",
                   "fileName": "@AssetA_@AssetB.json"
                 },
                 {
+                  "codeName": "Daily Files",
                   "validPeriods": [ "45-min", "40-min", "30-min", "20-min", "15-min", "10-min", "05-min", "04-min", "03-min", "02-min", "01-min" ],
                   "filePath": "@Exchange/Output/Candles/Multi-Period-Daily/@Period/@Year/@Month/@Day",
                   "fileName": "@AssetA_@AssetB.json"
                 }
               ],
-              "exchangeList": {
-                "exchange": [
+              "exchangeList": [
                   {
                     "name": "Poloniex"
                   }
                 ]
-              },
+              ,
               "plotter": {
                 "devTeam": "AAMasters",
                 "repo": "Plotters-Candles-Volumes",
@@ -61,29 +62,29 @@
               }
             },
             {
-              "codeName": "Market Volumes",
-              "displayName": "Market Volumes per Period",
+              "codeName": "Volumes",
+              "displayName": "Buy and Sell Volumes",
               "description": "Two sets of files per period that contains buy and sell volumes.",
               "storageAccount": "aaolivia",
               "sets": [
                 {
+                  "codeName": "Market Files",
                   "validPeriods": [ "24-hs", "12-hs", "08-hs", "06-hs", "04-hs", "03-hs", "02-hs", "01-hs" ],
                   "filePath": "@Exchange/Output/Volumes/Multi-Period-Market/@Period",
                   "fileName": "@AssetA_@AssetB.json"
                 },
                 {
+                  "codeName": "Daily Files",
                   "validPeriods": [ "45-min", "40-min", "30-min", "20-min", "15-min", "10-min", "05-min", "04-min", "03-min", "02-min", "01-min" ],
                   "filePath": "@Exchange/Output/Volumes/Multi-Period-Daily/@Period/@Year/@Month/@Day",
                   "fileName": "@AssetA_@AssetB.json"
                 }
               ],
-              "exchangeList": {
-                "exchange": [
-                  {
-                    "name": "Poloniex"
-                  }
-                ]
-              },
+              "exchangeList": [
+                {
+                  "name": "Poloniex"
+                }
+              ],
               "plotter": {
                 "devTeam": "AAMasters",
                 "repo": "Plotters-Candles-Volumes",
@@ -106,29 +107,29 @@
           },
           "products": [
             {
-              "codeName": "Market Candle-Stairs",
-              "displayName": "Market Candle-Stairs per Period",
-              "description": "A set of files per period that contains all candle-stairs of one whole market.",
+              "codeName": "Candle-Stairs",
+              "displayName": "Candle-Stairs Patters",
+              "description": "Two sets of files per period that contains candle-stairs patterns.",
               "storageAccount": "aatom",
               "sets": [
                 {
+                  "codeName": "Market Files",
                   "validPeriods": [ "24-hs", "12-hs", "08-hs", "06-hs", "04-hs", "03-hs", "02-hs", "01-hs" ],
                   "filePath": "@Exchange/Tom/dataSet.V1/Output/Candle-Stairs/Multi-Period-Market/@Period",
                   "fileName": "@AssetA_@AssetB.json"
                 },
                 {
+                  "codeName": "Daily Files",
                   "validPeriods": [ "45-min", "40-min", "30-min", "20-min", "15-min", "10-min", "05-min", "04-min", "03-min", "02-min", "01-min" ],
                   "filePath": "@Exchange/Tom/dataSet.V1/Output/Candle-Stairs/Multi-Period-Daily/@Period/@Year/@Month/@Day",
                   "fileName": "@AssetA_@AssetB.json"
                 }
               ],
-              "exchangeList": {
-                "exchange": [
-                  {
-                    "name": "Poloniex"
-                  }
-                ]
-              },
+              "exchangeList": [
+                {
+                  "name": "Poloniex"
+                }
+              ],
               "plotter": {
                 "devTeam": "AAMasters",
                 "repo": "Plotters-Stairs-Patterns",
@@ -136,29 +137,29 @@
               }
             },
             {
-              "codeName": "Market Volume-Stairs",
-              "displayName": "Market Volume-Stairs per Period",
-              "description": "Two sets of files per period that contains volume-stairs.",
+              "codeName": "Volume-Stairs",
+              "displayName": "Volume-Stairs Patters",
+              "description": "Two sets of files per period that contains volume-stairs patterns.",
               "storageAccount": "aatom",
               "sets": [
                 {
+                  "codeName": "Market Files",
                   "validPeriods": [ "24-hs", "12-hs", "08-hs", "06-hs", "04-hs", "03-hs", "02-hs", "01-hs" ],
                   "filePath": "@Exchange/Tom/dataSet.V1/Output/Volume-Stairs/Multi-Period-Market/@Period",
                   "fileName": "@AssetA_@AssetB.json"
                 },
                 {
+                  "codeName": "Daily Files",
                   "validPeriods": [ "45-min", "40-min", "30-min", "20-min", "15-min", "10-min", "05-min", "04-min", "03-min", "02-min", "01-min" ],
                   "filePath": "@Exchange/Tom/dataSet.V1/Output/Volume-Stairs/Multi-Period-Daily/@Period/@Year/@Month/@Day",
                   "fileName": "@AssetA_@AssetB.json"
                 }
               ],
-              "exchangeList": {
-                "exchange": [
-                  {
-                    "name": "Poloniex"
-                  }
-                ]
-              },
+              "exchangeList": [
+                {
+                  "name": "Poloniex"
+                }
+              ],
               "plotter": {
                 "devTeam": "AAMasters",
                 "repo": "Plotters-Stairs-Patterns",
@@ -187,18 +188,17 @@
               "storageAccount": "aamariam",
               "sets": [
                 {
+                  "codeName": "Trading History File",
                   "validPeriods": [ "24-hs", "12-hs", "08-hs", "06-hs", "04-hs", "03-hs", "02-hs", "01-hs", "45-min", "40-min", "30-min", "20-min", "15-min", "10-min", "05-min", "04-min", "03-min", "02-min", "01-min" ],
                   "filePath": "@Exchange/Mariam/dataSet.V1/Output/Trading-Process",
                   "fileName": "Execution.History.json"
                 }
               ],
-              "exchangeList": {
-                "exchange": [
-                  {
-                    "name": "Poloniex"
-                  }
-                ]
-              },
+              "exchangeList": [
+                {
+                  "name": "Poloniex"
+                }
+              ],
               "plotter": {
                 "devTeam": "AAMasters",
                 "repo": "Plotters-Trading",