Remove node-scss, add recommender overlay

Signed-off-by: Jay Wang <[email protected]>

Author: xiaohk

package.json

@@ -27,9 +27,8 @@
   "dependencies": {
     "as-console": "^5.0.3",
     "d3": "^6.7.0",
-    "node-sass": "^6.0.0",
     "sass": "^1.32.13",
     "sirv-cli": "^1.0.0",
-    "svelte-preprocess": "^4.7.3"
+    "svelte-preprocess": "^5.0.4"
   }
 }

src/App.svelte

@@ -2,6 +2,11 @@
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css"
 		integrity="sha512-ZRv40llEogRmoWgZwnsqke3HNzJ0kiI0+pcMgiz2bxO6Ew1DVBtWjVn0qjrXdT3+u+pSN36gLgmJiiQ3cQtyzA=="
 		crossorigin="anonymous" />
+
+	<script
+		type="module"
+		src="https://unpkg.com/recommender-overlay/dist/recommender-overlay.es.js"
+	></script>
 </svelte:head>
 
 <script>
@@ -10,7 +15,7 @@
 	// import Article from './ArticleAnon.svelte';
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 	.stand-alone-page {
 		color: #333;
 		box-sizing: border-box;
@@ -30,5 +35,12 @@
 
 <div class='stand-alone-page'>
 	<!-- <Main /> -->
+	<recommender-overlay
+		my-brand="GAM Changer"
+		recommended-brands="GAM Coach, WebSHAP, TimberTrek, StickyLand"
+		position-left="20"
+		display-delay="30000"
+		homepage-url=""
+	/>
 	<Article />
 </div>

src/Article.svelte

@@ -124,7 +124,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 
   @import 'define';
   @import 'article';

src/ArticleAnon.svelte

@@ -131,11 +131,11 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 
   @import 'define';
   @import 'article';
-  
+
   .page {
     display: flex;
     flex-direction: column;
@@ -649,7 +649,7 @@
     <div class='footer-main'>
       Thanks for reviewing GAM Changer!
     </div>
-    
+
   </div>
 
 </div>

src/GAM.svelte

@@ -671,7 +671,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 
   @import 'define';
 

src/Header.svelte

@@ -1,7 +1,7 @@
 <script>
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
   @import 'define';
 
   #header {

src/Main.svelte

@@ -12,10 +12,10 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 
   @import 'define';
-  
+
   .main-standalone {
     display: flex;
     flex-direction: column;
@@ -56,6 +56,6 @@
     <GAM />
 
   </div>
-  
+
 
 </div>

src/NotebookWidget.svelte

@@ -68,7 +68,7 @@ onMount(() => {
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
   @import 'define';
 
 	.stand-alone-page {
@@ -173,7 +173,7 @@ onMount(() => {
 <div class='stand-alone-page' bind:this={component}>
   <div class='page'>
     <Tooltip bind:this={tooltip}/>
-    
+
     <div class='gam-changer'>
       <div class='widget-wrapper'>
         <div class='notebook-header'>

src/components/ContextMenu.svelte

@@ -264,7 +264,7 @@
 
       componentSelect.select('.items')
         .style('overflow', 'visible');
-      
+
       componentSelect.select(`.sub-item-${option}`)
         .classed('hidden', false);
     }, delay);
@@ -276,7 +276,7 @@
 
       componentSelect.select('.items')
         .style('overflow', 'hidden');
-      
+
       componentSelect.select(`.sub-item-${option}`)
         .classed('hidden', true);
     };
@@ -348,7 +348,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
   @import '../define';
 
   $secondary-color: hsl(0, 0%, 40%);
@@ -556,7 +556,7 @@
 
     &.selected {
       border: 2px solid change-color($blue-reg, $lightness: 70%);
-      
+
       .sub-item-child .svg-icon {
         color: $blue-reg;
 
@@ -681,7 +681,7 @@
       on:mouseleave={mouseleaveHandler}
     >
       <div class='svg-icon icon-increasing'></div>
-      
+
       <div class='sub-item sub-item-increasing hidden'>
         <!-- Check button -->
         <div class='item sub-item-child show-tooltip' on:click={subItemCheckClicked}

src/components/Dropzone.svelte

@@ -65,7 +65,7 @@
 
   const readJSON = (file) => {
     return new Promise((resolve, reject) => {
-      let fr = new FileReader();  
+      let fr = new FileReader();
       fr.onload = () => {
         resolve(JSON.parse(fr.result));
       };
@@ -174,7 +174,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 
   @import '../define';
 
@@ -269,7 +269,7 @@
     {:else}
       <div class='svg-icon icon-two'></div>
     {/if}
-    
+
     <div class='drop-message'>
       {#if dataType === 'modelData'}
         Drop a <u>model file</u> (.json) or a <u>GAM Changer document</u> (.gamchanger) here to start

src/components/ToggleSwitch.svelte

@@ -85,7 +85,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
   @import '../define';
 
   $secondary-color: hsl(0, 0%, 40%);
@@ -111,7 +111,7 @@
 
   .toggle {
     display: none;
-    
+
     &:checked + .toggle-button .dot {
       left: 50%;
     }

src/global-explanation/CatFeature.svelte

@@ -1381,7 +1381,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
   @import '../define';
   @import './common.scss';
 

src/global-explanation/ContFeature.svelte

@@ -1796,7 +1796,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
   @import '../define';
   @import './common.scss';
 

src/global-explanation/InterCatCatFeature.svelte

@@ -468,7 +468,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
   @import '../define';
   @import './common.scss';
 

src/global-explanation/InterContCatFeature.svelte

@@ -510,7 +510,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
   @import '../define';
   @import './common.scss';
 

src/global-explanation/InterContContFeature.svelte

@@ -366,7 +366,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
   @import '../define';
   @import './common.scss';
 

src/sidebar/ClassificationMetrics.svelte

@@ -312,7 +312,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 
   @import '../define';
 

src/sidebar/Feature.svelte

@@ -14,7 +14,7 @@
   $: curTabHeight = tabHeights[selectedTab];
   let featureInitialized = false;
   let waitingToDrawDIV = false;
-  
+
   let height = 0;
 
   const svgHeight = 40;
@@ -37,7 +37,7 @@
     let instance = d3.select(component)
       .select('.feature-list')
       .node();
-    
+
     let scrollBarWidth = instance.offsetWidth - instance.clientWidth;
 
     console.log(`effect tab: [${width}, ${height}, ${scrollBarWidth}]`);
@@ -129,7 +129,7 @@
       } else {
         sortedCatFeatures = tempSortedCatFeatures;
       }
-      
+
       sidebarInfo.curGroup = '';
       sidebarStore.set(sidebarInfo);
     }
@@ -138,7 +138,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 
   @import '../define';
 

src/sidebar/History.svelte

@@ -5,7 +5,7 @@
   import { quadInOut, expoInOut, cubicInOut } from 'svelte/easing';
   import { round, shuffle } from '../utils/utils';
   import { bindInlineSVG } from '../utils/svg-icon-binding';
-  
+
   export let sidebarStore;
   export let historyStore;
   export let ebm;
@@ -202,7 +202,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 
   @import '../define';
 

src/sidebar/RegressionMetrics.svelte

@@ -2,7 +2,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 
   @import '../define';
 

src/sidebar/Sidebar.svelte

@@ -25,7 +25,7 @@
 
 </script>
 
-<style type='text/scss'>
+<style lang='scss'>
 
   @import '../define';
 
@@ -170,7 +170,7 @@
     <div class='tab' class:hidden={sidebarInfo.selectedTab !== 'history'}>
       <History sidebarStore={sidebarStore} historyStore={historyStore} ebm={ebm}/>
     </div>
-    
+
   </div>
 
 </div>