IterativeCycle.vue

<template>
  <div class="iterative-cycle">
    <!-- Module Selector Tabs -->
    <div class="module-tabs">
      <div
        v-for="(module, index) in modules"
        :key="index"
        :class="['module-tab', { active: selectedModule === index }]"
        @click="selectModule(index)"
      >
        {{ module.title }}
      </div>
    </div>

    <!-- Cycles Display -->
    <div v-if="selectedModule !== null" class="collapsible-cards">
      <h2>{{ modules[selectedModule].title }}</h2>
      <div
        v-for="(cycle, index) in modules[selectedModule].cycles"
        :key="index"
        class="card"
      >
        <h4 @click="toggleCycle(index)">
          {{ cycle.title }}
          <span v-if="isCycleOpen(index)">▲</span>
          <span v-else>▼</span>
        </h4>
        <div v-if="isCycleOpen(index)" class="content">
          <h3>Phases:</h3>
          <ul>
            <li v-for="(phase, phaseIndex) in cycle.phases" :key="phaseIndex">
              <strong>{{ phase.title }}:</strong> {{ phase.description }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedModule: 0, // Default module selected
      openCycles: [], // Track which cycles are open
      modules: [
        {
          title: 'Module 1: Gibson Assemblies',
          cycles: [
            {
              title: 'Cycle 1: Assembly',
              phases: [
                { title: 'Design', description: 'Designing DNA fragments for assembly.' },
                { title: 'Build', description: 'Performing the Gibson assembly procedure.' },
                { title: 'Test', description: 'Validating the characterization results.' },
                { title: 'Learn', description: 'Refining methods based on outcomes.' },
              ]
            },
            {
              title: 'Cycle 2: Optimization',
              phases: [
                { title: 'Design', description: 'Adjusting fragment lengths for better efficiency.' },
                { title: 'Build', description: 'Re-running the assembly with optimized parameters.' },
                { title: 'Test', description: 'Validating the characterization results.' },
                { title: 'Learn', description: 'Refining methods based on outcomes.' },
              ]
            },
            {
              title: 'Cycle 3: Verification',
              phases: [
                { title: 'Design', description: 'Designing verification tests for assemblies.' },
                { title: 'Build', description: 'Executing verification assays.' },
                { title: 'Test', description: 'Validating the characterization results.' },
                { title: 'Learn', description: 'Refining methods based on outcomes.' },
              ]
            },
            {
              title: 'Cycle 4: IDK',
              phases: [
                { title: 'Design', description: 'Designing DNA fragments for assembly.' },
                { title: 'Build', description: 'Performing the Gibson assembly procedure.' },
                { title: 'Test', description: 'Validating the characterization results.' },
                { title: 'Learn', description: 'Refining methods based on outcomes.' },
              ]
            },
          ]
        },
        {
          title: 'Module 2: Characterisation',
          cycles: [
            {
              title: 'Cycle 1: Characterization',
              phases: [
                { title: 'Design', description: 'Planning experiments to characterize assemblies.' },
                { title: 'Build', description: 'Executing characterization assays.' },
              ]
            },
          ]
        },
        {
          title: 'Module 3: Integrative Vector',
          cycles: [
            {
              title: 'Cycle 1: Construction',
              phases: [
                { title: 'Design', description: 'Designing the integrative vector.' },
              ]
            },
          ]
        },
        {
          title: 'Module 4: Bioinformatics',
          description: 'As part of our future engineering efforts, we intend to optimise the growth of the engineered *Vibrio natriegens* by utilising the GenomeSPOT (Genome-based Salinity, pH, Oxygen Tolerance, and Temperature for Bacteria and Archaea) Python package (Barnum et al., 2024). This powerful computational tool, introduced to us through our collaboration with Cultivarium, predicts optimal growth conditions based on bacterial and archeal genome sequences with no need for functional annotations (Barnum et al., 2024).',
          cycles: [
            {
              title: 'Cycle 1: Data Analysis',
              phases: [
                { title: 'Design', description: <p>Our objective is to utilise GenomeSPOT to compare the computationally predicted optimal growth conditions with experimentally determined conditions for both the native and genetically modified strain of <em>Vibrio natriegens</em> after integration of the construct into the genome. First, it is necessary to obtain complete genome sequences for both of the strains. These will serve as input data for the GenomeSPOT package and will be processed to generate predictions for key factors affecting bacterial growth, such as temperature, salinity, pH, and oxygen levels. This computational model is based on well-studied correlations between amino acid frequencies and growth factors (e.g., tryptophan frequency and positive correlation with oxygen tolerance associated with it) (Barnum et al., 2024).</p>

          <p>After simulating the optimal conditions, we will conduct laboratory experiments to test both strains under various conditions and determine if the experimental results match the predictions. The growth of both bacterial strains will be monitored under conditions provided by GenomeSPOT by measuring optical density (OD600) at regular intervals. In addition, the strains will be subjected to various alternative conditions to determine those that result in most optimal growth rates. Any discrepancies between the experimental and computationally predicted results will be carefully examined. This analysis will allow us to understand if the modified <em>Vibrio natriegens</em> has distinct requirements for optimal growth compared to the native strain. Furthermore, it will allow for an assessment of the accuracy of GenomeSPOT in predicting optimal growth conditions for engineered microbial strains.</p> },
              ]
            },
          ]
        }
      ]
    };
  },
  methods: {
    toggleCycle(index) {
      if (this.openCycles.includes(index)) {
        this.openCycles = this.openCycles.filter(i => i !== index);
      } else {
        this.openCycles.push(index);
      }
    },
    isCycleOpen(index) {
      return this.openCycles.includes(index);
    },
    selectModule(index) {
      this.selectedModule = index;
      this.openCycles = []; // Close all cycles when switching modules
    }
  }
};
</script>

<style scoped>
/* Layout styles */
.iterative-cycle {
  font-family: 'Arial', sans-serif;
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Module Selector Tabs */
.module-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.module-tab {
  padding: 10px 20px;
  margin: 0 10px;
  font-size: 16px;
  background-color: #f0f0f0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.module-tab:hover {
  background-color: #dfe6e9;
}

.module-tab.active {
  background-color: #73aba2;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Collapsible Cards */
.collapsible-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;
}

.card {
  background-color: #e3f2fd;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.card h4 {
  color: #396d7e;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.card .content {
  margin-top: 10px;
  font-size: 1.1em;
  color: #333;
}

/* Typography */
h2 {
  color: #2c3e50;
  text-align: center;
}

h3 {
  color: #3498db;
  margin-bottom: 10px;
}

ul {
  margin-left: 20px;
}

li {
  color: #555;
}
</style>