fix: presentation mode fix

- no longer on side panel
- presentation mode page lives in user space
- updated build scripts (closes #194), presentation mode is a build type variable rather than runtime
- updated docs
- a few UI updates

Author: gureckis

.github/workflows/deploy.yml

@@ -172,7 +172,7 @@ jobs:
       # Build the web app
       - name: Build web app
         run: |
-          if ${{ github.ref == 'refs/heads/presentation'}}; then 
+          if ${{ github.ref == 'refs/heads/presentation' || secrets.EXP_DEPLOY_MODE == 'presentation' }}; then 
             npm run build:present 
           else
             npm run build

docs/coding/configuration.md

@@ -399,6 +399,7 @@ EXP_DEPLOY_HOST        = "exps.mydomain.org"
 EXP_DEPLOY_PATH        = "/home/user/exps.mydomain.org"
 EXP_DEPLOY_PORT        = 22
 EXP_DEPLOY_USER        = user
+EXP_DEPLOY_MODE        = production
 SLACK_WEBHOOK_URL      = https://hooks.slack.com/workflows/something
 SLACK_WEBHOOK_ERROR_URL= https://hooks.slack.com/workflows/somethingelse
 EXP_DEPLOY_KEY         = "-----BEGIN RSA PRIVATE KEY-----\n-----END RSA PRIVATE KEY-----"
@@ -409,6 +410,8 @@ EXP_DEPLOY_KEY         = "-----BEGIN RSA PRIVATE KEY-----\n-----END RSA PRIVATE
 - `EXP_DEPLOY_PATH` is the directory you upload your experiment to
 - `EXP_DEPLOY_PORT` is the ssh port for your server (usually 22)
 - `EXP_DEPLOY_USER` is the username for your server
+- `EXP_DEPLOY_MODE` is the mode of the deployment (production, development, or
+  presentation)
 - `SLACK_WEBHOOK_URL` is the url for the Slack Webhook for posting deployment
   messages
 - `SLACK_WEBHOOK_ERROR_URL` is the url for the Slack Webhook for posting error

docs/presentation.md

@@ -46,31 +46,30 @@ mode website.
 ## How to customize Presentation Mode
 
 To customize this presentation mode page edit the
-`src/components/presentation_mode/PresentationModeHomePage.vue` component. You
-can add links to papers, hot link to different parts of your experiment, or add
-custom routes that help to visualize your data, etc...
+`src/userPresentationModeView.vue` component. You can add links to papers, hot
+link to different parts of your experiment, or add custom routes that help to
+visualize your data, etc...
 
 ## How to deploy in Presentation Mode
 
-To deploy your project in presentation mode there are two options. The first is
-to create a new branch titled 'presentation' and push this to GitHub. This will
+To deploy your project in presentation mode there are two options:
+
+### Option 1: Branch-based deployment
+
+Create a new branch titled 'presentation' and push this to GitHub. This will
 generate a special "presentation mode" deployment and you'll receive a slack
 notification about when the website is ready. An example from the default
 <SmileText/> repo is
 [here](https://exps.gureckislab.org/nyuccl/smile/presentation/#/)
 
-The second option is to edit `src/config/config.js` and change the line that
-reads
+### Option 2: Environment variable deployment
 
-```
-mode: import.meta.env.MODE,
-```
+Set the `EXP_DEPLOY_MODE` environment variable in your local `.env.deploy.local`
+file to `'presentation'`. This can be done by:
 
-to
-
-```
-mode: 'presentation',
-```
+1. Create or edit the file `.env.deploy.local` in your project root
+2. Add the line: `EXP_DEPLOY_MODE = presentation`
+3. Run the update script: `npm run update_config`
 
-When you next commit this change to your repo, the new site will be built in
-presentation mode. This can be done on any branch.
+When you next commit and push to any branch, the site will be built in
+presentation mode.

plugins/strip-devtool.js

@@ -15,11 +15,17 @@ export default function stripDevToolPlugin() {
       if (id.endsWith('main.js')) {
         console.log('  ➜  processing main.js for mode:', config.mode)
 
-        if (config.mode !== 'development') {
-          // Replace MainApp import with SmileApp import for production builds
+        if (config.mode == 'development') {
+          // Replace MainApp import with SmileApp import for developer mode builds
           const updatedSrc = src.replace(
-            /import App from '@\/core\/SmileApp\.vue'/g,
-            "import App from '@/core/MainApp.vue'"
+            /import App from '@\/core\/MainApp\.vue'/g,
+            "import App from '@/core/SmileApp.vue'"
+          )
+          return { code: updatedSrc }
+        } else if (config.mode == 'presentation') {
+          const updatedSrc = src.replace(
+            /import App from '@\/core\/MainApp\.vue'/g,
+            "import App from '@/dev/presentation_mode/PresentationModeApp.vue'"
           )
           return { code: updatedSrc }
         }

src/core/MainApp.vue

@@ -135,7 +135,7 @@ const effectiveDeviceHeight = computed(() => {
  * - Returns true otherwise
  */
 const showStatusBar = computed(() => {
-  return api.currentRouteName() !== 'recruit' && api.config.mode != 'presentation'
+  return api.currentRouteName() !== 'recruit' && api.currentRouteName() !== 'presentation_home'
 })
 
 // Pure computed property without side effects

src/core/SmileApp.vue

@@ -5,10 +5,15 @@
 
 import { ref, computed, onMounted } from 'vue'
 
+/**
+ * Import toast notification components and styles
+ * @requires Toaster Toast notification component from sonner UI library
+ * @requires vue-sonner/style.css Required styles for vue-sonner v2 toast notifications
+ */
 import { Toaster } from '@/uikit/components/ui/sonner'
 import 'vue-sonner/style.css' // vue-sonner v2 requires this import
 
-import DevAppSidebar from '@/dev/DevAppSidebar.vue'
+import SmileAppSidebar from '@/core/SmileAppSidebar.vue'
 import { SidebarInset, SidebarProvider } from '@/uikit/components/ui/sidebar'
 /**
  * Developer mode components for debugging and development tools
@@ -21,12 +26,6 @@ import DeveloperNavBar from '@/dev/developer_mode/DeveloperNavBar.vue'
 import DevConsoleBar from '@/dev/developer_mode/DevConsoleBar.vue'
 import DevSideBar from '@/dev/developer_mode/DevSideBar.vue'
 
-/**
- * Presentation mode components
- * @requires PresentationNavBar Navigation bar for presentation mode
- */
-import PresentationNavBar from '@/dev/presentation_mode/PresentationNavBar.vue'
-import PresentationModeView from '@/dev/presentation_mode/PresentationModeView.vue'
 /**
  * Built-in experiment components
  * @requires ResponsiveDeviceContainer Responsive device container component
@@ -134,6 +133,11 @@ function onIframeLoad() {
   }
 }
 
+/**
+ * Initialize dashboard URL when component is mounted
+ * Calls initializeDashboardUrl() to set up the initial dashboard URL
+ * from localStorage or default value
+ */
 onMounted(() => {
   initializeDashboardUrl()
 })
@@ -146,8 +150,10 @@ onMounted(() => {
       '--sidebar-width': '48px',
     }"
   >
-    <DevAppSidebar />
+    <!-- Sidebar for developer tools -->
+    <SmileAppSidebar />
     <SidebarInset>
+      <!-- Main app container for developer mode -->
       <div class="app-container">
         <!-- Analyze Mode - Clean full-screen dashboard -->
         <div v-if="api.store.dev.mainView === 'dashboard'" class="analyze-container">
@@ -181,19 +187,6 @@ onMounted(() => {
           ></iframe>
         </div>
 
-        <!-- Presentation Mode - Clean full-screen presentation -->
-        <template v-else-if="api.store.dev.mainView === 'presentation'">
-          <!-- Top toolbar -->
-          <div class="toolbar">
-            <PresentationNavBar />
-          </div>
-
-          <!-- Middle row - content and sidebar -->
-          <div class="presentation-content-wrapper">
-            <PresentationModeView />
-          </div>
-        </template>
-
         <!-- Developer Mode - Full interface with toolbar, sidebar, console -->
         <template v-else>
           <!-- Top toolbar -->
@@ -202,7 +195,6 @@ onMounted(() => {
           </div>
 
           <!-- Middle row - content and sidebar -->
-
           <div class="content-wrapper">
             <div class="content-and-console">
               <!-- Main content - scrollable -->
@@ -357,6 +349,13 @@ onMounted(() => {
   overflow: hidden;
 }
 
+.presentation-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  overflow: hidden;
+}
+
 .docs-iframe {
   width: 100%;
   height: 100%;

src/dev/DevAppSidebar.vue src/core/SmileAppSidebar.vuesrc/dev/DevAppSidebar.vue renamed to src/core/SmileAppSidebar.vue

@@ -7,17 +7,13 @@ import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarHeader,
-  SidebarInput,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarTrigger,
-  useSidebar,
 } from '@/uikit/components/ui/sidebar'
 
 import { Popover, PopoverContent, PopoverTrigger } from '@/uikit/components/ui/popover'
 import ConfigDevPanel from '@/dev/developer_mode/ConfigDevPanel.vue'
-import Toggle from '@/uikit/components/ui/toggle/Toggle.vue'
 import { Sun, Moon } from 'lucide-vue-next'
 import { useColorMode } from '@vueuse/core'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/uikit/components/ui/tooltip'
@@ -99,20 +95,6 @@ const isDarkMode = computed({
             </SidebarMenuItem>
             -->
 
-            <!-- Present -->
-            <SidebarMenuItem>
-              <SidebarMenuButton
-                class="px-[0.05rem] group-data-[collapsible=icon]:!p-1.5 my-1"
-                :class="{
-                  'bg-chart-4 hover:!bg-chart-4/80': api.store.dev.mainView === 'presentation',
-                  'hover:!bg-sidebar-border': api.store.dev.mainView !== 'presentation',
-                }"
-                tooltip="Presentation Mode"
-                @click="api.store.dev.mainView = 'presentation'"
-              >
-                <i-uil-presentation-line class="!size-5" />
-              </SidebarMenuButton>
-            </SidebarMenuItem>
             <!-- Recruit 
             <SidebarMenuItem>
               <SidebarMenuButton
@@ -159,7 +141,7 @@ const isDarkMode = computed({
             </SidebarMenuButton>
           </TooltipTrigger>
           <TooltipContent side="right">
-            <p>{{ isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode' }}</p>
+            <p>{{ isDarkMode ? 'Switch to Light Mode in Dev Tools' : 'Switch to Dark Mode in Dev Tools' }}</p>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>

src/core/composables/useAPI.js

@@ -464,7 +464,8 @@ export class SmileAPI {
    */
   setAutofill(autofill) {
     this.logStore.debug('SMILEAPI: registering autofill function')
-    if (this.store.config.mode === 'development') this.store.setAutofill(autofill)
+    if (this.store.config.mode === 'development' || this.store.config.mode === 'presentation')
+      this.store.setAutofill(autofill)
   }
 
   /**
@@ -473,7 +474,8 @@ export class SmileAPI {
    */
   removeAutofill() {
     this.logStore.debug('SMILEAPI: removing autofill')
-    if (this.store.config.mode === 'development') this.store.removeAutofill()
+    if (this.store.config.mode === 'development' || this.store.config.mode === 'presentation')
+      this.store.removeAutofill()
   }
 
   // Completion and recruitment
@@ -520,6 +522,15 @@ export class SmileAPI {
     return this.route.name
   }
 
+  // routes
+  /**
+   * Gets the info of the current route
+   * @returns {Object} The current route info
+   */
+  currentRouteInfo() {
+    return this.route
+  }
+
   /**
    * Gets the name of the current view
    * @returns {string} The current view name

src/core/main.js

@@ -4,15 +4,17 @@
 
 /**
  * Core imports for the SMILE application including:
- * - Vue and Vue plugins (FormKit, Router, Pinia, Google Analytics)
- * - UI components and styling (FontAwesome, FormKit theme)
+ * - Vue and Vue plugins (Router, Pinia, Google Analytics)
  * - Application configuration (timeline, icons)
  */
 import { useRouter, addGuards } from '@/core/router'
 import { pinia } from '@/core/stores/createPinia'
 
 import timeline from '@/user/design'
-import App from '@/core/SmileApp.vue'
+
+// this is automatically replaced with SmileApp.vue in the vite strip-devtool.js plugin for developer mode
+// or PresentationModeApp.vue in the presentation mode
+import App from '@/core/MainApp.vue'
 import { createApp } from 'vue'
 import VueGtag from 'vue-gtag'
 import '@/core/main.css'

src/dev/developer_mode/DeveloperNavBar.vue

@@ -249,7 +249,7 @@ const notificationType = ref('default')
         </div>
 
         <!-- color mode button -->
-        <div class="flex items-center" v-if="api.store.dev.isFullscreen">
+        <div class="flex items-center" v-if="api.store.dev.isFullscreen && api.currentRouteName() !== 'recruit'">
           <ColorModeButton></ColorModeButton>
         </div>