Latest prototype of a minimal workflow UI.

client/src/components/ActivityBar/ActivityBar.vue

@@ -132,11 +132,21 @@ function onToggleSidebar(toggle: string = "", to: string | null = null) {
     userStore.toggleSideBar(toggle);
 }
 
+const syncActivities = () => {
+    activityStore.sync();
+    if (config.value && config.value.client_mode == "minimal_workflow") {
+        userStore.untoggleToolbarIfNeeded();
+    }
+};
+
 watch(
     () => hashedUserId.value,
-    () => {
-        activityStore.sync();
-    }
+    syncActivities,
+);
+
+watch(
+    isConfigLoaded,
+    syncActivities,
 );
 </script>
 

client/src/components/Workflow/List/WorkflowList.vue

@@ -28,10 +28,14 @@ type WorkflowsList = Record<string, never>[];
 
 interface Props {
     activeList?: "my" | "shared_with_me" | "published";
+    advancedOptions?: boolean;
+    initialFilterText?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     activeList: "my",
+    advancedOptions: true,
+    initialFilterText: "",
 });
 
 const router = useRouter();
@@ -194,6 +198,16 @@ watch([filterText, sortBy, sortDesc, showBookmarked], async () => {
     await load(true);
 });
 
+watch(
+    props,
+    () => {
+        if(props.initialFilterText && filterText.value == "") {
+            filterText.value = props.initialFilterText;
+        }
+    },
+    { immediate: true },
+);
+
 onMounted(() => {
     if (router.currentRoute.query.owner) {
         updateFilterValue("user", `'${router.currentRoute.query.owner}'`);
@@ -208,7 +222,7 @@ onMounted(() => {
             <div class="d-flex flex-gapx-1">
                 <Heading h1 separator inline size="xl" class="flex-grow-1 mb-2">Workflows</Heading>
 
-                <WorkflowListActions />
+                <WorkflowListActions :advanced-options="advancedOptions" />
             </div>
 
             <BNav pills justified class="mb-2">
@@ -219,6 +233,7 @@ onMounted(() => {
 
                 <BNavItem
                     id="shared-with-me"
+                    v-if="advancedOptions"
                     :active="sharedWithMe"
                     :disabled="userStore.isAnonymous"
                     to="/workflows/list_shared_with_me">
@@ -247,7 +262,7 @@ onMounted(() => {
                 </template>
             </FilterMenu>
 
-            <ListHeader ref="listHeader" show-view-toggle>
+            <ListHeader ref="listHeader" :show-view-toggle="advancedOptions">
                 <template v-slot:extra-filter>
                     <div v-if="activeList === 'my'">
                         Filter:

client/src/components/Workflow/List/WorkflowListActions.vue

@@ -17,6 +17,12 @@ const userStore = useUserStore();
 
 const { isAnonymous } = storeToRefs(userStore);
 
+interface Props {
+    advancedOptions: boolean;
+}
+
+const props = defineProps<Props>();
+
 const createButtonTitle = computed(() => {
     if (isAnonymous.value) {
         return "Log in to create workflow";
@@ -47,6 +53,7 @@ function navigateToOldCreate() {
             <BButton
                 id="workflow-create"
                 v-b-tooltip.hover.noninteractive
+                v-if="advancedOptions"
                 size="sm"
                 :title="createButtonTitle"
                 variant="outline-primary"

client/src/entry/analysis/modules/Analysis.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { usePanels } from "@/composables/usePanels";
+import { useConfig } from "@/composables/config";
 
 import CenterFrame from "./CenterFrame.vue";
+import WorkflowLanding from "./WorkflowLanding.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import HistoryIndex from "@/components/History/Index.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
@@ -13,6 +15,16 @@ import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 const router = useRouter();
 const showCenter = ref(false);
 const { showPanels } = usePanels();
+const { config, isConfigLoaded } = useConfig();
+
+const showHistoryPanel = computed(() => {
+    return showPanels.value && config.value && config.value.client_mode == "full";
+});
+
+const showWorkflowCenter = computed(() => {
+    console.log(config.value && config.value.client_mode);
+    return config.value && config.value.client_mode == "minimal_workflow";
+});
 
 // methods
 function hideCenter() {
@@ -44,7 +56,7 @@ onUnmounted(() => {
                 <router-view :key="$route.fullPath" class="h-100" />
             </div>
         </div>
-        <FlexPanel v-if="showPanels" side="right">
+        <FlexPanel v-if="showHistoryPanel" side="right">
             <HistoryIndex />
         </FlexPanel>
         <DragAndDropModal />

client/src/entry/analysis/modules/Home.vue

@@ -3,13 +3,17 @@
         <ToolForm v-if="isTool && !isUpload" v-bind="toolParams" />
         <WorkflowRun v-else-if="isWorkflow" v-bind="workflowParams" />
         <div v-else-if="isController" :src="controllerParams" />
+        <div v-else-if="isWorkflowLanding">
+            <WorkflowLanding initial-filter-text="config.simplified_workflow_landing_initial_tags" />
+        </div>
         <CenterFrame v-else src="/welcome" />
     </div>
 </template>
 
 <script>
 import ToolForm from "components/Tool/ToolForm";
 import WorkflowRun from "components/Workflow/Run/WorkflowRun";
+import WorkflowLanding from "./WorkflowLanding";
 import decodeUriComponent from "decode-uri-component";
 import CenterFrame from "entry/analysis/modules/CenterFrame";
 
@@ -18,6 +22,7 @@ export default {
         CenterFrame,
         ToolForm,
         WorkflowRun,
+        WorkflowLanding,
     },
     props: {
         config: {
@@ -30,6 +35,9 @@ export default {
         },
     },
     computed: {
+        isWorkflowLanding() {
+            return this.config.client_mode == "minimal_workflow";
+        },
         isController() {
             return this.query.m_c && this.query.m_a;
         },

client/src/entry/analysis/modules/WorkflowLanding.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+interface Props {
+    initialFilterText: string;
+}
+
+import WorkflowList from "@/components/Workflow/WorkflowList.vue";
+</script>
+
+<template>
+    <div>
+        <WorkflowList active-list="published" :advanced-options="false" :initial-filter-text="initialFilterText" />
+    </div>
+</template>

client/src/stores/activitySetup.ts

@@ -1,48 +1,56 @@
 /**
  * List of built-in activities
  */
-import { type Activity } from "@/stores/activityStore";
+import { type ClientMode, type Activity, type RawActivity } from "@/stores/activityStore";
 import { type EventData } from "@/stores/eventStore";
 
-export const Activities = [
+function unlessMinimalWorkflow(clientMode: ClientMode): boolean {
+    return !(clientMode == "minimal_workflow");
+}
+
+function ifMinimalWorkflow(clientMode: ClientMode): boolean {
+    return !(clientMode == "minimal_workflow");
+}
+
+export const ActivitiesRaw: RawActivity[] = [
     {
         anonymous: false,
         description: "Displays currently running interactive tools (ITs), if these are enabled by the administrator.",
         icon: "fa-laptop",
         id: "interactivetools",
         mutable: false,
-        optional: false,
+        optional: ifMinimalWorkflow,
         panel: false,
         title: "Interactive Tools",
         tooltip: "Show active interactive tools",
         to: "/interactivetool_entry_points/list",
-        visible: true,
+        visible: unlessMinimalWorkflow,
     },
     {
         anonymous: true,
         description: "Opens a data dialog, allowing uploads from URL, pasted content or disk.",
         icon: "upload",
         id: "upload",
         mutable: false,
-        optional: false,
+        optional: ifMinimalWorkflow,
         panel: false,
         title: "Upload",
         to: null,
         tooltip: "Download from URL or upload files from disk",
-        visible: true,
+        visible: unlessMinimalWorkflow,
     },
     {
         anonymous: true,
         description: "Displays the tool panel to search and access all available tools.",
         icon: "wrench",
         id: "tools",
         mutable: false,
-        optional: false,
+        optional: ifMinimalWorkflow,
         panel: true,
         title: "Tools",
-        to: null,
+        to: "/tools",
         tooltip: "Search and run tools",
-        visible: true,
+        visible: unlessMinimalWorkflow,
     },
     {
         anonymous: true,
@@ -81,7 +89,7 @@ export const Activities = [
         title: "Visualization",
         to: null,
         tooltip: "Visualize datasets",
-        visible: true,
+        visible: unlessMinimalWorkflow,
     },
     {
         anonymous: true,
@@ -94,7 +102,7 @@ export const Activities = [
         title: "Histories",
         tooltip: "Show all histories",
         to: "/histories/list",
-        visible: true,
+        visible: unlessMinimalWorkflow,
     },
     {
         anonymous: false,
@@ -107,7 +115,7 @@ export const Activities = [
         title: "History Multiview",
         tooltip: "Select histories to show in History Multiview",
         to: "/histories/view_multiple",
-        visible: true,
+        visible: unlessMinimalWorkflow,
     },
     {
         anonymous: false,
@@ -120,7 +128,7 @@ export const Activities = [
         title: "Datasets",
         tooltip: "Show all datasets",
         to: "/datasets/list",
-        visible: true,
+        visible: unlessMinimalWorkflow,
     },
     {
         anonymous: true,
@@ -133,7 +141,7 @@ export const Activities = [
         title: "Pages",
         tooltip: "Show all pages",
         to: "/pages/list",
-        visible: true,
+        visible: unlessMinimalWorkflow,
     },
     {
         anonymous: false,
@@ -150,6 +158,25 @@ export const Activities = [
     },
 ];
 
+function resolveActivity(activity: RawActivity, clientMode: ClientMode) : Activity {
+    let optional = activity.optional;
+    let visible = activity.visible;
+    if (typeof optional === 'function') {
+        optional = optional(clientMode);
+    }
+    if (typeof visible === 'function') {
+        visible = visible(clientMode);
+    }
+    return { ...activity, optional, visible};
+}
+
+export function getActivities(clientMode: ClientMode) {
+    const resolve = (activity: RawActivity) => {
+        return resolveActivity(activity, clientMode);
+    }
+    return ActivitiesRaw.map(resolve);
+}
+
 export function convertDropData(data: EventData): Activity | null {
     if (data.history_content_type === "dataset") {
         return {