FEATURE NMH-192: Add UI to display platform information [skip-test]

docs/_frontend/src/models/App/App.js

@@ -17,6 +17,7 @@ const fromSearchString = () => {
     'tags',
     'sort',
     'predicted_entities',
+    'marketplace',
     'page',
   ].forEach((key) => {
     if (!searchParams.has(key)) {
@@ -25,6 +26,7 @@ const fromSearchString = () => {
     switch (key) {
       case 'tags':
       case 'predicted_entities':
+      case 'marketplace':
         params[key] = searchParams.getAll(key);
         break;
 

docs/_frontend/src/models/ModelItem/ModelItem.css

@@ -142,3 +142,10 @@
   font-size: 12px;
   position: absolute;
 }
+
+.model-item__footer {
+  padding: 0px 20px;
+  border-top: 1px solid #e8f8ff;
+  display: flex;
+  gap: 10px;
+}

docs/_frontend/src/models/ModelItem/ModelItem.js

@@ -3,6 +3,23 @@ import ModelItemTag from '../ModelItemTag';
 import { addNamingConventions } from './utils';
 import './ModelItem.css';
 
+const MarketplaceIcon = ({ platform, deployLink }) => (
+  <div>
+    {deployLink ? <a target="_blank" href={`${deployLink}`}>
+      <figure><img src={`/assets/images/posts_image/active_${platform}.svg`} alt="" /></figure>
+    </a> : <figure><img src={`/assets/images/posts_image/inactive_${platform}.svg`} alt="" /></figure>
+    }
+  </div>
+)
+
+const ModelItemMarketplace = ({ snowflake, databricks, sagemaker }) => (
+  <div className="model-item__footer">
+    <MarketplaceIcon platform="sagemaker" deployLink={sagemaker} />
+    <MarketplaceIcon platform="snowflake" deployLink={snowflake} />
+    <MarketplaceIcon platform="databricks" deployLink={databricks} />
+  </div>
+)
+
 const ModelItem = ({
   title,
   url,
@@ -14,6 +31,7 @@ const ModelItem = ({
   recommended,
   deprecated,
   highlight,
+  marketplace,
 }) => {
   let body;
   if (highlight && highlight.body && highlight.body[0]) {
@@ -64,6 +82,8 @@ const ModelItem = ({
           <ModelItemTag icon="flag" name="Language" value={language} />
           <ModelItemTag icon="clone" name="Edition" value={edition} />
         </div>
+
+        {marketplace && <ModelItemMarketplace {...marketplace} />}
       </div>
     </div>
   );

docs/_frontend/src/models/Sidebar/Sidebar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Radio from '../Radio/Radio';
+import Combobox from '../Combobox';
 import RadioGroup from '../RadioGroup';
 import SidebarSelect from './SidebarSelect';
 import styles from './Sidebar.module.css';
@@ -82,6 +83,17 @@ const Sidebar = ({ meta, params, onSubmit }) => {
         />
       </div>
 
+      <div className={styles.control}>
+        <Combobox
+          label="Marketplace"
+          items={["Databricks", "Sagemaker", "Snowflake"]}
+          initialSelectedItems={params.marketplace || []}
+          onChange={(values) => {
+            onSubmit({ marketplace: values });
+          }}
+        />
+      </div>
+
       <div className={styles.control}>
         <RadioGroup
           value={params.sort || 'date'}

docs/_frontend/src/models/common.js

@@ -13,6 +13,7 @@ export const toSearchString = (params) => {
 
         case 'tags':
         case 'predicted_entities':
+        case 'marketplace':
           params[k].forEach((v) => {
             acc.append(k, v);
           });

docs/_includes/display_platform_information.html

@@ -0,0 +1,29 @@
+<div class="disp_platform_wrapper">
+    <div class="disp_platform_item">
+        <div class="dp_top df">
+            <figure><img src="/assets/images/posts_image/amazon.svg" alt=""></figure>
+        </div>
+        <div class="dp_body">
+            <p class="tac">SageMaker</p>
+            <a target="_blank" rel="noopener" {% if !page.deploy.sagemaker_link %} href="{{ page.deploy.sagemaker_link }}" {% else %} disabled {% endif %} class="btn2">Deploy</a>
+        </div>
+    </div>
+    <div class="disp_platform_item">
+        <div class="dp_top df">
+            <figure><img src="/assets/images/posts_image/snowflake.svg" alt=""></figure>
+        </div>
+        <div class="dp_body">
+            <p class="tac">Snowflake</p>
+            <a target="_blank" rel="noopener" {% if !page.deploy.snowflake_link %} href="{{ page.deploy.snowflake_link }}" {% else %} disabled {% endif %} class="btn2">Deploy</a>
+        </div>
+    </div>
+    <div class="disp_platform_item">
+        <div class="dp_top df">
+            <figure><img src="/assets/images/posts_image/databr.svg" alt=""></figure>
+        </div>
+        <div class="dp_body">
+            <p class="tac">Databricks</p>
+            <a target="_blank" rel="noopener" {% if page.deploy.databricks_link %} href="{{ page.deploy.databricks_link }}" {% else %} disabled {% endif %} class="btn2">Deploy</a>
+        </div>
+    </div>
+</div>

docs/_sass/custom.scss

@@ -1259,6 +1259,10 @@ summary.button {
 	}	
 }
 
+.tac {
+	text-align: center !important;
+}
+
 .tabs-python-scala-box>.highlighter-rouge {
 	display: block !important;
 }
@@ -2766,6 +2770,66 @@ code {
 	}
 }
 
+.disp_platform_wrapper {
+	display: flex;
+	justify-content: space-between;
+	margin: 0 -15px;
+	padding-bottom: 75px;
+	.disp_platform_item {
+		width: 33%;
+		margin: 0 15px;
+		border: 1px solid #e9e9e9;
+		border-radius: 6px;
+		.dp_top {
+			background: #f9f9f9;
+			border-bottom: 1px solid #e9e9e9;
+			justify-content: center;
+			padding: 8px 10px;
+			height: 48px;
+			figure {
+				margin: 0;
+			}
+		}
+		.dp_body {
+				text-align: center;
+				padding: 11px 10px 18px;
+			p {
+				font-weight: 500;
+				font-size: 14px;
+				color: #000;
+				margin-bottom: 9px;
+			}
+		}
+	}
+}
+
+.btn2 {
+	border: 2px solid #0992f8;
+	border-radius: 4px;
+	display: inline-block;
+	padding: 0 10px;
+	color: #0992f8 !important;
+	font-size: 12px;
+	font-weight: 600;
+	transition: all 300ms ease;
+	min-width: 120px;
+	text-align: center;
+	background: #fff;
+	line-height: 22px;
+	&:hover {
+		background: #0052cc;
+		color: #fff !important;
+		border-color: #0052cc;
+		text-decoration: none !important;
+	}
+	&[disabled] {
+		background: #aeaeae;
+		border-color: #aeaeae;
+		color: #fff !important;
+		cursor: not-allowed;
+	}
+}
+
 .model-wrap {
 	p {
 		font-size: 18px;
@@ -4329,6 +4393,12 @@ code {
 		width: 28%;
 		margin: 0 15px;
 	}
+	.disp_platform_wrapper {
+		margin: 0 -10px;
+		.disp_platform_wrapper .disp_platform_item {
+			margin: 0 10px;
+		}
+	}
 	.nlp_content_item {
 		font-size: 18px;
 		line-height: 24px;
@@ -4840,6 +4910,18 @@ code {
 	.top_demos .tab-item {
 		width: 100%;
 	}
+	.disp_platform_wrapper {
+		flex-direction: column;
+		margin: 0;
+		padding-bottom: 10px;
+		.disp_platform_item {
+			width: 100%;
+			margin: 0 0 30px;
+		}
+	}
+	.model-wrap .btn-box {
+		padding: 40px 0 20px;
+	}
 }
 
 @media (max-width: 499px) {