removes SOS/EOS states

- updates docs, code and tests

SOS and EOS were automatically added to the depth 0 stepper node as a way to know when you get to start or end.  it ended up not being useful to end user, functionality could be delievered without it, and complicated many tests/code.

Author: gureckis

docs/api.md

@@ -49,9 +49,9 @@ The following functions are available when using `useViewAPI`:
 - `stepIndex`: Returns the current step index.
 - `paths`: Returns the current paths.
 - `path`: Returns the current path.
-- `length`: Returns the number of steps (excluding SOS/EOS).
+- `length`: Returns the number of steps
 - `nSteps`: Alias for `length`.
-- `nrows`: Returns the total number of rows including SOS/EOS.
+- `nrows`: Returns the total number of rows.
 
 ### Table Management
 
@@ -200,8 +200,6 @@ stepper.shuffle({ always: true }) // Always shuffles without a seed
 - The shuffle operation is tracked internally. Once shuffled, subsequent calls
   to shuffle will be ignored unless `always` is set to true.
 - If there is only one or zero states, the shuffle operation is skipped.
-- At depth 0 (root level), the shuffle operation preserves the SOS and EOS
-  states at the beginning and end of the sequence.
 
 ## Logging and Debugging
 

src/builtins/captcha/CaptchaView.vue

@@ -88,7 +88,7 @@ function next_trial() {
 
 <template>
   <div class="page">
-    <div class="instructions" v-if="api.paths == 'EOS'">
+    <div class="instructions" v-if="api.stepIndex >= api.nSteps">
       <div class="formstep">
         <article class="message is-danger">
           <div class="message-header">

src/builtins/tasks/Task2View.vue

@@ -34,7 +34,7 @@ const trials = api.steps.append([
 // set up the call backs that take you through the task
 
 function next() {
-  if (api.stepIndex < api.nSteps) {
+  if (api.stepIndex < api.nSteps - 1) {
     api.goNextStep()
   } else {
     api.goNextView()

src/core/composables/useStepper.js

@@ -8,7 +8,7 @@
  */
 import Stepper from '@/core/stepper/Stepper'
 import useSmileStore from '@/core/stores/smilestore'
-
+import useLog from '@/core/stores/log'
 /**
  * @class StepperAPI
  * @description Wraps a Stepper instance to provide a consistent API for managing multi-step processes
@@ -29,6 +29,7 @@ import useSmileStore from '@/core/stores/smilestore'
  */
 export function useStepper(view) {
   const smilestore = useSmileStore()
+  const log = useLog()
 
   // Set viewProvidesStepper to true for the dev bar
   smilestore.dev.viewProvidesStepper = true
@@ -41,19 +42,19 @@ export function useStepper(view) {
     const savedState = smilestore.getStepper(view)?.data
     if (savedState) {
       try {
-        console.log('STEPPER: Loading saved state from smilestore for view', view)
+        //console.log('STEPPER: Loading saved state from smilestore for view', view)
         stepper = new Stepper({ serializedState: savedState.stepperState, store: smilestore })
       } catch (error) {
-        console.error('STEPPER: Failed to load saved state, creating new stepper:', error.message)
+        log.error('STEPPER: Failed to load saved state, creating new stepper:', error.message)
         stepper = new Stepper({ id: '/', parent: null, data: { gvars: {} }, store: smilestore })
       }
     } else {
-      console.log('STEPPER: Initializing state machine with SOS and EOS nodes for view', view)
+      //console.log('STEPPER: Initializing state machine for view', view)
       stepper = new Stepper({ id: '/', parent: null, data: { gvars: {} }, store: smilestore })
     }
     stepper.name = view
     // Register stepper if not already registered
-    console.log('STEPPER: Registering stepper for view', stepper.name)
+    //console.log('STEPPER: Registering stepper for view', stepper.name)
     if (view) {
       stepper = smilestore.registerStepper(view, stepper)
     }

src/core/composables/useViewAPI.js

@@ -274,15 +274,15 @@ class ViewAPI extends SmileAPI {
   }
 
   get length() {
-    return this._stepper.value.countLeafNodes - 2
+    return this._stepper.value.countLeafNodes
   }
 
   get nSteps() {
-    return this._stepper.value.countLeafNodes - 2
+    return this._stepper.value.countLeafNodes
   }
 
   get nrows() {
-    return this._stepper.value.countLeafNodes
+    return this.nSteps
   }
 
   // Getter for persisted variable that provides access to gvars from stepper root data
@@ -354,9 +354,6 @@ class ViewAPI extends SmileAPI {
 
     const getLeafData = (state) => {
       if (state.isLeaf) {
-        if (state.id === 'SOS' || state.id === 'EOS') {
-          return []
-        }
         if (matchesFilter(state.pathString, pathFilter)) {
           return state.data
         }
@@ -375,9 +372,6 @@ class ViewAPI extends SmileAPI {
       this.store.browserPersisted.viewSteppers[this._page.value].data = pageData
 
       this._stepper.value.clearSubTree()
-      this._stepper.value.push('SOS')
-      this._stepper.value.push('EOS')
-      this._stepper.value._currentIndex = 1
 
       // this._path.value = []
       // this._pathString.value = ''

src/core/stepper/StepState.js

@@ -201,7 +201,7 @@ export class StepState {
    *
    * A leaf node is considered "first" if:
    * 1. It is a leaf node (has no children)
-   * 2. It is the leftmost leaf node when traversing the tree that is not marked as 'SOS' or 'EOS'
+   * 2. It is the leftmost leaf node when traversing the tree
    *
    * @returns {boolean} True if this is the first non-special leaf node, false otherwise
    */
@@ -219,13 +219,11 @@ export class StepState {
       return findLeftmostLeaf(state._states[0])
     }
 
-    // Find first non-SOS leaf by checking each branch from left
+    // Find first  leaf by checking each branch from left
     for (let i = 0; i < this._root._states.length; i++) {
       const leftmostLeaf = findLeftmostLeaf(this._root._states[i])
-      if (leftmostLeaf.id !== 'SOS' && leftmostLeaf.id !== 'EOS') {
-        // Return true if this is that first non-SOS leaf
-        return leftmostLeaf.pathString === this.pathString
-      }
+      // Return true if this is that first  leaf
+      return leftmostLeaf.pathString === this.pathString
     }
 
     return false
@@ -357,11 +355,7 @@ export class StepState {
    * then recursively resets all child nodes.
    */
   reset() {
-    if (this._depth === 0) {
-      this._currentIndex = 1
-    } else {
-      this._currentIndex = 0
-    }
+    this._currentIndex = 0
     this._states.forEach((state) => state.reset())
   }
 

src/core/stepper/Stepper.js

@@ -53,13 +53,6 @@ export class Stepper extends StepState {
     if (serializedState !== null) {
       this._log.debug('STEPSTATE:loading serialized state')
       this.loadFromJSON(serializedState)
-    } else {
-      // Initialize the state machine with SOS and EOS nodes
-      if (this.depth === 0) {
-        this.push('SOS')
-        this.push('EOS')
-        this._currentIndex = 1 // start at EOS or whatever is first
-      }
     }
 
     return new StepperProxy(this)
@@ -144,19 +137,9 @@ export class Stepper extends StepState {
     try {
       // Create a new state with auto-incremented id
       if (item.path !== undefined) {
-        // If at level 0, insert before EOS state
-        if (this.depth === 0) {
-          state = this.insert(item.path, -2, item)
-        } else {
-          state = this.push(item.path, item)
-        }
+        state = this.push(item.path, item)
       } else {
-        // If at level 0, insert before EOS state
-        if (this.depth === 0) {
-          state = this.insert(null, -2, item)
-        } else {
-          state = this.push(null, item)
-        }
+        state = this.push(null, item)
       }
     } catch (error) {
       this._log.error(error.message)
@@ -176,8 +159,7 @@ export class Stepper extends StepState {
     const itemsToAdd = Array.isArray(items) ? items : [items]
 
     // Check if adding these items would exceed maxStepperRows
-    // Subtract 2 to account for SOS and EOS states
-    if (this._states.length - 2 + itemsToAdd.length > config.maxStepperRows) {
+    if (this._states.length + itemsToAdd.length > config.maxStepperRows) {
       this._log.error(
         `Cannot append ${itemsToAdd.length} rows as it exceeds the safety limit of ${config.maxStepperRows}`
       )
@@ -402,32 +384,14 @@ export class Stepper extends StepState {
       rng = Math.random
     }
 
-    // Fisher-Yates shuffle algorithm
-    if (this.depth === 0) {
-      // At depth 0, we need to preserve SOS and EOS states
-      // Only shuffle the middle elements (excluding first and last)
-      const start = 1 // Skip SOS
-      const end = this._states.length - 1 // Skip EOS
-
-      for (let i = end - 1; i > start; i--) {
-        // j can be between start and i (excluding SOS and EOS)
-        const j = start + Math.floor(rng() * (i - start + 1))
-        ;[this._states[i], this._states[j]] = [this._states[j], this._states[i]]
-
-        // Update indices for the swapped elements
-        this._states[i]._currentIndex = i - 1 // -1 because we skip SOS
-        this._states[j]._currentIndex = j - 1 // -1 because we skip SOS
-      }
-    } else {
-      // For other depths, shuffle all elements
-      for (let i = this._states.length - 1; i > 0; i--) {
-        const j = Math.floor(rng() * (i + 1))
-        ;[this._states[i], this._states[j]] = [this._states[j], this._states[i]]
-
-        // Update indices for the swapped elements
-        this._states[i]._currentIndex = i
-        this._states[j]._currentIndex = j
-      }
+    // For other depths, shuffle all elements
+    for (let i = this._states.length - 1; i > 0; i--) {
+      const j = Math.floor(rng() * (i + 1))
+      ;[this._states[i], this._states[j]] = [this._states[j], this._states[i]]
+
+      // Update indices for the swapped elements
+      this._states[i]._currentIndex = i
+      this._states[j]._currentIndex = j
     }
 
     // Mark as shuffled
@@ -447,11 +411,6 @@ export class Stepper extends StepState {
    */
   forEach(callback) {
     this._states.forEach((item, index) => {
-      // Skip SOS and EOS states when at depth 0
-      if (this.depth === 0 && (index === 0 || index === this.states.length - 1)) {
-        return
-      }
-
       // Call the callback and check if it returns a new value
       const result = callback(item, index)
       if (result !== undefined) {
@@ -585,12 +544,6 @@ export class Stepper extends StepState {
    */
   clearSubTree() {
     super.clearSubTree()
-    // Initialize the state machine with SOS and EOS nodes
-    if (this.depth === 0) {
-      this.push('SOS')
-      this.push('EOS')
-      this._currentIndex = 1 // start at EOS or whatever is first
-    }
 
     this._shuffled = false
   }

src/core/stepper/StepperProxy.js

@@ -1,6 +1,6 @@
 /**
  * @class StepperProxy
- * @description Proxy handler for TableAPI objects that handles array-like access and SOS/EOS states
+ * @description Proxy handler for TableAPI objects that handles array-like access
  */
 class StepperProxy {
   /**
@@ -20,7 +20,7 @@ class StepperProxy {
    * @returns {*} The value of the property
    */
   get(target, prop) {
-    console.log('get', prop)
+    //console.log('get', prop)
     // Handle array/object access
     if (typeof prop === 'string' || typeof prop === 'number') {
       // Convert string numbers to actual numbers
@@ -35,9 +35,6 @@ class StepperProxy {
           // If still negative after adjustment, return undefined
           if (prop < 0) return undefined
         }
-
-        // Then adjust for SOS/EOS states at the root level
-        prop = this.adjustIndex(prop, target)
       }
 
       // IMPORTANT: We first try to get a child node by id before checking properties/methods
@@ -55,26 +52,6 @@ class StepperProxy {
     }
     return target[prop]
   }
-
-  /**
-   * Adjusts the index to account for SOS/EOS states at the root level
-   * @param {number} index - The index to adjust
-   * @param {StepState} node - The node being accessed
-   * @returns {number} The adjusted index
-   */
-  adjustIndex(index, node) {
-    // If this is the root node (depth 0), adjust indices to skip SOS/EOS states
-    if (node.depth === 0) {
-      if (index >= 0) {
-        // Add 1 to skip SOS state
-        return index + 1
-      } else {
-        // Subtract 1 to skip EOS state
-        return index - 1
-      }
-    }
-    return index
-  }
 }
 
 export default StepperProxy

src/dev/developer_mode/StateTreeViewer.vue

@@ -111,10 +111,6 @@ const handleReload = () => {
   window.location.reload()
 }
 
-const isEndState = computed(() => {
-  if (!api.steps) return false
-  return api.pathString === 'SOS' || api.pathString === 'EOS'
-})
 
 // Add refs for container and selected node tracking
 const treeContainer = ref(null)
@@ -167,7 +163,7 @@ watch(
       <div class="path-info">
         <div class="path-display">{{ api.pathString }}</div>
 
-        &nbsp;<FAIcon icon="fa-solid fa-ban" v-if="isEndState" />
+        
       </div>
 
       <div class="field has-addons">

src/dev/developer_mode/TreeNode.vue

@@ -54,10 +54,6 @@ const getChildVerticalLines = (verticalLines, index, total) => {
 
   return newLines
 }
-
-const isEndState = computed(() => {
-  return props.state.path === 'SOS' || props.state.path === 'EOS'
-})
 </script>
 
 <template>
@@ -70,12 +66,11 @@ const isEndState = computed(() => {
       @click="handleClick"
     >
       <span class="vertical-lines">{{ getVerticalPrefix(verticalLines) }}</span>
-      <span class="tree-branch" :class="{ 'end-state': isEndState }">{{ getBranchType(index, total, depth) }}</span>
-      <span class="node-path" :class="{ 'end-state': isEndState, 'leaf-state': !state.isLeaf }"
+      <span class="tree-branch">{{ getBranchType(index, total, depth) }}</span>
+      <span class="node-path" :class="{ 'leaf-state': !state.isLeaf }"
         >{{ state.path }} <FAIcon icon="fa-solid fa-house-flag" class="home-icon" v-if="state.isFirstLeaf" />
-        <FAIcon icon="fa-solid fa-leaf" class="leaf-icon" v-else-if="state.isLeaf && !isEndState" />
-        <FAIcon icon="fa-solid fa-ban" v-if="isEndState"
-      /></span>
+        <FAIcon icon="fa-solid fa-leaf" class="leaf-icon" v-else-if="state.isLeaf" />
+      </span>
     </div>
 
     <!-- Recursive tree nodes, but limit depth -->
@@ -123,6 +118,7 @@ const isEndState = computed(() => {
   background-color: rgb(146, 249, 224);
   color: black;
   border-radius: 10px;
+  margin-right: 35px;
 }
 
 .vertical-lines {