Add landing page

core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/hub/workflow/HubWorkflowResource.scala

@@ -6,15 +6,21 @@ import edu.uci.ics.texera.web.model.jooq.generated.Tables._
 import edu.uci.ics.texera.web.model.jooq.generated.enums.UserRole
 import edu.uci.ics.texera.web.model.jooq.generated.tables.daos.WorkflowDao
 import edu.uci.ics.texera.web.model.jooq.generated.tables.pojos.{User, Workflow}
+import edu.uci.ics.texera.web.resource.dashboard.hub.workflow.HubWorkflowResource.fetchDashboardWorkflowsByWids
 import edu.uci.ics.texera.web.resource.dashboard.hub.workflow.HubWorkflowResource.recordUserActivity
 import edu.uci.ics.texera.web.resource.dashboard.user.workflow.WorkflowAccessResource
-import edu.uci.ics.texera.web.resource.dashboard.user.workflow.WorkflowResource.WorkflowWithPrivilege
+import edu.uci.ics.texera.web.resource.dashboard.user.workflow.WorkflowResource.{
+  DashboardWorkflow,
+  WorkflowWithPrivilege
+}
+import org.jooq.impl.DSL
 
+import scala.jdk.CollectionConverters._
 import java.util
 import javax.ws.rs._
 import javax.ws.rs.core.MediaType
 import org.jooq.types.UInteger
-
+import java.util.Collections
 import java.util.regex.Pattern
 import javax.servlet.http.HttpServletRequest
 import javax.ws.rs.core.Context
@@ -26,6 +32,53 @@ object HubWorkflowResource {
     "^([0-9]{1,3}\\.){3}[0-9]{1,3}$"
   )
 
+  def fetchDashboardWorkflowsByWids(wids: Seq[UInteger]): util.List[DashboardWorkflow] = {
+    if (wids.nonEmpty) {
+      context
+        .select(
+          WORKFLOW.NAME,
+          WORKFLOW.DESCRIPTION,
+          WORKFLOW.WID,
+          WORKFLOW.CREATION_TIME,
+          WORKFLOW.LAST_MODIFIED_TIME,
+          USER.NAME.as("ownerName"),
+          WORKFLOW_OF_USER.UID.as("ownerId")
+        )
+        .from(WORKFLOW)
+        .join(WORKFLOW_OF_USER)
+        .on(WORKFLOW.WID.eq(WORKFLOW_OF_USER.WID))
+        .join(USER)
+        .on(WORKFLOW_OF_USER.UID.eq(USER.UID))
+        .where(WORKFLOW.WID.in(wids: _*))
+        .fetch()
+        .asScala
+        .map(record => {
+          val workflow = new Workflow(
+            record.get(WORKFLOW.NAME),
+            record.get(WORKFLOW.DESCRIPTION),
+            record.get(WORKFLOW.WID),
+            null,
+            record.get(WORKFLOW.CREATION_TIME),
+            record.get(WORKFLOW.LAST_MODIFIED_TIME),
+            null
+          )
+
+          DashboardWorkflow(
+            isOwner = false,
+            accessLevel = "",
+            ownerName = record.get("ownerName", classOf[String]),
+            workflow = workflow,
+            projectIDs = List(),
+            ownerId = record.get("ownerId", classOf[UInteger])
+          )
+        })
+        .toList
+        .asJava
+    } else {
+      Collections.emptyList[DashboardWorkflow]()
+    }
+  }
+
   def recordUserActivity(
       request: HttpServletRequest,
       userId: UInteger = UInteger.valueOf(0),
@@ -71,9 +124,10 @@ class HubWorkflowResource {
 
   @GET
   @Path("/count")
-  def getWorkflowCount: Integer = {
+  def getPublishedWorkflowCount: Integer = {
     context.selectCount
       .from(WORKFLOW)
+      .where(WORKFLOW.IS_PUBLISHED.eq(1.toByte))
       .fetchOne(0, classOf[Integer])
   }
 
@@ -264,6 +318,44 @@ class HubWorkflowResource {
     cloneCount
   }
 
+  @GET
+  @Path("/topLovedWorkflows")
+  @Produces(Array(MediaType.APPLICATION_JSON))
+  def getTopLovedWorkflows: util.List[DashboardWorkflow] = {
+    val topLovedWorkflowsWids = context
+      .select(WORKFLOW_USER_LIKES.WID)
+      .from(WORKFLOW_USER_LIKES)
+      .groupBy(WORKFLOW_USER_LIKES.WID)
+      .orderBy(DSL.count(WORKFLOW_USER_LIKES.WID).desc())
+      .limit(8)
+      .fetchInto(classOf[UInteger])
+      .asScala
+      .toSeq
+
+    println(fetchDashboardWorkflowsByWids(topLovedWorkflowsWids))
+
+    fetchDashboardWorkflowsByWids(topLovedWorkflowsWids)
+  }
+
+  @GET
+  @Path("/topClonedWorkflows")
+  @Produces(Array(MediaType.APPLICATION_JSON))
+  def getTopClonedWorkflows: util.List[DashboardWorkflow] = {
+    val topClonedWorkflowsWids = context
+      .select(WORKFLOW_USER_CLONES.WID)
+      .from(WORKFLOW_USER_CLONES)
+      .groupBy(WORKFLOW_USER_CLONES.WID)
+      .orderBy(DSL.count(WORKFLOW_USER_CLONES.WID).desc())
+      .limit(8)
+      .fetchInto(classOf[UInteger])
+      .asScala
+      .toSeq
+
+    println(fetchDashboardWorkflowsByWids(topClonedWorkflowsWids))
+
+    fetchDashboardWorkflowsByWids(topClonedWorkflowsWids)
+  }
+
   @POST
   @Path("/view")
   @Consumes(Array(MediaType.APPLICATION_JSON))

core/gui/src/app/app-routing.module.ts

@@ -18,9 +18,9 @@ import { AdminGmailComponent } from "./dashboard/component/admin/gmail/admin-gma
 import { UserDatasetExplorerComponent } from "./dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-explorer.component";
 import { UserDatasetComponent } from "./dashboard/component/user/user-dataset/user-dataset.component";
 import { HubWorkflowSearchComponent } from "./hub/component/workflow/search/hub-workflow-search.component";
-import { HubWorkflowResultComponent } from "./hub/component/workflow/result/hub-workflow-result.component";
 import { HubWorkflowComponent } from "./hub/component/workflow/hub-workflow.component";
 import { HubWorkflowDetailComponent } from "./hub/component/workflow/detail/hub-workflow-detail.component";
+import { LandingPageComponent } from "./hub/component/landing-page/landing-page.component";
 
 const routes: Routes = [];
 
@@ -31,6 +31,10 @@ if (environment.userSystemEnabled) {
     children: [
       {
         path: "home",
+        component: LandingPageComponent,
+      },
+      {
+        path: "about",
         component: HomeComponent,
       },
       {
@@ -41,15 +45,11 @@ if (environment.userSystemEnabled) {
             component: HubWorkflowComponent,
             children: [
               {
-                path: "search",
+                path: "result",
                 component: HubWorkflowSearchComponent,
               },
               {
-                path: "search/result",
-                component: HubWorkflowResultComponent,
-              },
-              {
-                path: "search/result/detail/:id",
+                path: "result/detail/:id",
                 component: HubWorkflowDetailComponent,
               },
             ],

core/gui/src/app/app.module.ts

@@ -134,10 +134,10 @@ import { ListItemComponent } from "./dashboard/component/user/list-item/list-ite
 import { HubComponent } from "./hub/component/hub.component";
 import { HubWorkflowSearchComponent } from "./hub/component/workflow/search/hub-workflow-search.component";
 import { GoogleLoginComponent } from "./dashboard/component/user/google-login/google-login.component";
-import { HubWorkflowResultComponent } from "./hub/component/workflow/result/hub-workflow-result.component";
 import { HubWorkflowComponent } from "./hub/component/workflow/hub-workflow.component";
-import { HubWorkflowSearchBarComponent } from "./hub/component/workflow/search-bar/hub-workflow-search-bar.component";
 import { HubWorkflowDetailComponent } from "./hub/component/workflow/detail/hub-workflow-detail.component";
+import { LandingPageComponent } from "./hub/component/landing-page/landing-page.component";
+import { BrowseSectionComponent } from "./hub/component/browse-section/browse-section.component";
 import { BreakpointConditionInputComponent } from "./workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component";
 import { CodeDebuggerComponent } from "./workspace/component/code-editor-dialog/code-debugger.component";
 
@@ -224,10 +224,10 @@ registerLocaleData(en);
     HubComponent,
     HubWorkflowComponent,
     HubWorkflowSearchComponent,
-    HubWorkflowSearchBarComponent,
     HubWorkflowDetailComponent,
-    HubWorkflowResultComponent,
     GoogleLoginComponent,
+    LandingPageComponent,
+    BrowseSectionComponent,
     BreakpointConditionInputComponent,
     CodeDebuggerComponent,
   ],

core/gui/src/app/dashboard/component/dashboard.component.html

@@ -142,21 +142,27 @@
     <ul
       class="nav-links"
       [ngClass]="{ 'hidden': isLogin }">
-      <li class="nav-item">
+      <li
+        class="nav-item"
+        [hidden]="!showLinks">
         <a
           class="nav-link"
           href="https://github.com/Texera/texera/wiki/Getting-Started"
           >Getting Started</a
         >
       </li>
-      <li class="nav-item">
+      <li
+        class="nav-item"
+        [hidden]="!showLinks">
         <a
           class="nav-link"
           href="https://texera.github.io/blog/"
           >Blogs</a
         >
       </li>
-      <li class="nav-item">
+      <li
+        class="nav-item"
+        [hidden]="!showLinks">
         <iframe
           style="margin-top: 2px"
           src="https://ghbtns.com/github-btn.html?user=Texera&repo=texera&type=star&count=true"

core/gui/src/app/dashboard/component/dashboard.component.scss

@@ -67,6 +67,7 @@ nz-content {
 
 .nav-links {
   list-style-type: none;
+  min-height: 70px;
   height: 70px;
   padding: 10px;
   margin: 0;

core/gui/src/app/dashboard/component/dashboard.component.ts

@@ -4,7 +4,7 @@ import { UserService } from "../../common/service/user/user.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { FlarumService } from "../service/user/flarum/flarum.service";
 import { HttpErrorResponse } from "@angular/common/http";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
 import { HubComponent } from "../../hub/component/hub.component";
 import { GoogleAuthService } from "../../common/service/user/google-auth.service";
 import { NotificationService } from "../../common/service/notification/notification.service";
@@ -26,7 +26,8 @@ export class DashboardComponent implements OnInit {
   displayForum: boolean = true;
   displayNavbar: boolean = true;
   isCollpased: boolean = false;
-  routesWithoutNavbar: string[] = ["/workspace", "/home"];
+  routesWithoutNavbar: string[] = ["/workspace", "/home", "/about"];
+  showLinks: boolean = false;
 
   constructor(
     private userService: UserService,
@@ -39,16 +40,10 @@ export class DashboardComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.isCollpased = false;
+    this.isLogin = this.userService.isLogin();
+    this.isAdmin = this.userService.isAdmin();
 
-    this.userService
-      .userChanged()
-      .pipe(untilDestroyed(this))
-      .subscribe(() => {
-        this.isLogin = this.userService.isLogin();
-        this.isAdmin = this.userService.isAdmin();
-        this.cdr.detectChanges();
-      });
+    this.isCollpased = false;
 
     if (!this.isLogin) {
       this.googleAuthService.googleAuthInit(document.getElementById("googleButton"));
@@ -88,6 +83,22 @@ export class DashboardComponent implements OnInit {
     this.router.events.pipe(untilDestroyed(this)).subscribe(() => {
       this.checkRoute();
     });
+
+    this.router.events.pipe(untilDestroyed(this)).subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        this.checkRoute();
+        this.showLinks = event.url.includes("about");
+      }
+    });
+
+    this.userService
+      .userChanged()
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        this.isLogin = this.userService.isLogin();
+        this.isAdmin = this.userService.isAdmin();
+        this.cdr.detectChanges();
+      });
   }
 
   checkRoute() {

core/gui/src/app/dashboard/component/user/list-item/list-item.component.html

@@ -115,11 +115,33 @@
         </div>
         <div class="resource-info-grid">
           <div class="resource-info">
-            {{ entry.type==='workflow' ? formatViewCount(viewCount) + " " + (viewCount === 1 ? "view" : "views") : ''}}
+            <ng-container *ngIf="entry.type === 'workflow'; else sizeInfo">
+              {{ formatCount(viewCount) }} {{ viewCount === 1 ? 'view' : 'views' }}
+            </ng-container>
+            <ng-template #sizeInfo> Size: {{ formatSize(entry.size) }} </ng-template>
           </div>
-          <div class="resource-info">{{ entry.type === 'dataset' ? 'Size: ' + formatSize(entry.size) : '' }}</div>
           <div class="resource-info">Created: {{ formatTime(entry.creationTime) }}</div>
           <div class="resource-info">Edited: {{ formatTime(entry.lastModifiedTime) }}</div>
+
+          <button
+            *ngIf="!isPrivateSearch && entry.type==='workflow'"
+            nz-button
+            nzType="text"
+            class="resource-info like-button"
+            title="Like"
+            [ngClass]="{ liked: isLiked, 'disabled-like': !currentUid }"
+            (click)="toggleLike(this.entry.id, this.currentUid)"
+            (click)="$event.stopPropagation()"
+            [attr.disabled]="!currentUid ? true : null">
+            <i
+              nz-icon
+              [nzTheme]="isLiked ? 'fill' : 'outline'"
+              [nzType]="'like'"
+              [ngClass]="isLiked ? 'liked' : 'not-liked'"
+              class="like-icon">
+            </i>
+            <span>{{ formatCount(likeCount) }}</span>
+          </button>
         </div>
       </div>
     </div>
@@ -189,25 +211,4 @@
         nzType="delete"></i>
     </button>
   </div>
-  <div
-    *ngIf="!isPrivateSearch"
-    class="button-group">
-    <button
-      nz-button
-      nzType="text"
-      class="dropdown-item like-button"
-      title="Like"
-      [ngClass]="{ liked: isLiked, 'disabled-like': !currentUid }"
-      (click)="toggleLike(this.entry.id, this.currentUid)"
-      [attr.disabled]="!currentUid ? true : null">
-      <i
-        nz-icon
-        [nzTheme]="isLiked ? 'fill' : 'outline'"
-        [nzType]="'like'"
-        [ngClass]="isLiked ? 'liked' : 'not-liked'"
-        class="like-icon">
-      </i>
-      <span>{{ formatLikeCount(likeCount) }}</span>
-    </button>
-  </div>
 </nz-card>

core/gui/src/app/dashboard/component/user/list-item/list-item.component.scss

@@ -168,6 +168,7 @@
   color: black;
   width: auto;
   min-width: 70px;
+  max-width: 90px;
   height: 30px;
   border-radius: 6px;
   padding: 0 8px;

core/gui/src/app/dashboard/component/user/list-item/list-item.component.ts

@@ -46,7 +46,7 @@ export class ListItemComponent implements OnInit, OnChanges {
   ROUTER_WORKFLOW_BASE_URL = "/dashboard/user/workspace";
   ROUTER_USER_PROJECT_BASE_URL = "/dashboard/user/project";
   ROUTER_DATASET_BASE_URL = "/dashboard/user/dataset";
-  ROUTER_WORKFLOW_DETAIL_BASE_URL = "/dashboard/hub/workflow/search/result/detail";
+  ROUTER_WORKFLOW_DETAIL_BASE_URL = "/dashboard/hub/workflow/result/detail";
   entryLink: string[] = [];
   public iconType: string = "";
   isLiked: boolean = false;
@@ -367,14 +367,7 @@ export class ListItemComponent implements OnInit, OnChanges {
     }
   }
 
-  formatLikeCount(count: number): string {
-    if (count >= 1000) {
-      return (count / 1000).toFixed(1) + "k";
-    }
-    return count.toString();
-  }
-
-  formatViewCount(count: number): string {
+  formatCount(count: number): string {
     if (count >= 1000) {
       return (count / 1000).toFixed(1) + "k";
     }