<template>
  <div>
    <div class="welcome">
      Welcome to the guided tour on a LoopGrafter case use. LoopGrafter is intended to provide guidance on transplanting loops between two structurally related proteins, (<span style="color: var(--insert-light)">insert</span> or source and <span style="color: var(--scaffold-light)">scaffold</span> or target), while assessing their dynamic properties. For the tool to work as intended, we recommend performing the grafting in between proteins that differ in no more than 8 Angstroms RMSD and than 20% of sequence length. In the presented example, scaffold and insert differ <strong>1.27 Angstrom RSMD</strong> and <strong>2% in sequence length</strong>.
    </div>

    <div class="dark">
      <div class="step">
        <div class="number">
        1
        </div>
        <div class="content">
          Candidates from one protein to the other one is performed. The tool will present the results in the form of sequences, structures, and scores of the grafted mutants that the user can download and perform further analysis locally. 
        </div>
      </div>
    </div>

    <div class="light">
      <div class="step">
        <div class="number"> 2 </div>
        <div class="content">
          Download the scaffold protein PDB from RCSB.org
          <img src="../assets/UseCase/image1.png" alt="Italian Trulli">
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 3 </div>
        <div class="content">
          Type in the PDB ID (6G75) and on the Chain window type (A)
          <img src="../assets/UseCase/image2.png" alt="Italian Trulli">
        </div>
      </div>
    </div>  

    <div class="light">
      <div class="step">
        <div class="number"> 4 </div>
        <div class="content">
          Click download to proceed.
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 5 </div>
        <div class="content">
          The DSSP calculation assigns the 150 - 155 residues a small 3:10 helix. This is not desired, and it can be modified to coil. Select those six residues and set them to coil.<br>
          <img src="../assets/UseCase/image3.png" alt="Italian Trulli">
        </div>
      </div>
    </div>  

    <div class="light">
      <div class="step">
        <div class="number"> 6 </div>
        <div class="content">
          The scaffold protein can be inspected on the visualization window on the left side of the page.
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 7 </div>
        <div class="content">
          Load the insert protein in the same way: Type in the PDB ID (2PSF) and on the chain window type (B).
        </div>
      </div>
    </div>  

    <div class="light">
      <div class="step">
        <div class="number"> 8 </div>
        <div class="content">
          Click <i>download</i> to proceed.<br>
          <img src="../assets/UseCase/image4.png" alt="Italian Trulli"> <br>
          The first step (Protein upload) is now completed. To continue with the second one (Loop exploration), click on the header to unfold the step interface.
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 9 </div>
        <div class="content">
          Click on the <i>compute loops</i> button to calculate the scaffold protein loops and their geometries.
          <img src="../assets/UseCase/image5.png" alt="Italian Trulli">
        </div>
      </div>
    </div>  

    <div class="light">
      <div class="step">
        <div class="number"> 10 </div>
        <div class="content">
          An overview of all the loops on the scaffold protein can be seen on the left side of the page, under the 3D viewer window.<br>
          <img src="../assets/UseCase/image6.png" alt="Italian Trulli">          
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 11 </div>
        <div class="content">
          Click on <i>compute</i> to calculate the insert protein loops and their geometries as before.
          <img src="../assets/UseCase/image7.png" alt="Italian Trulli">
        </div>
      </div>
    </div>  

    <div class="light">
      <div class="step">
        <div class="number"> 12 </div>
        <div class="content">
          The attributes of the loops can be inspected at any step. By clicking on the loop that was initially modified (different secondary structure assignment) to obtain a detailed view of it and its comparison with the similar loop on the insert protein. Had we not changed the small 3:10 helix the comparison would not be as accurate and a grafting of this loop might yield unreassonable results.<br>
          <img src="../assets/UseCase/image8.png" alt="Italian Trulli"><br>
          To continue with the third step (Flexibility evaluation), click on the header to unfold the step interface.
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 13 </div>
        <div class="content">
          For the flexibility assessment, Gausian and Ansiotropic Network Models can be used in addition to B-factors obtained from the PDB file. Additionally, custom values can be also inputted by clicking on the right-side arrow. <br>
          <img src="../assets/UseCase/image9.png" alt="Italian Trulli">
        </div>
      </div>
    </div>  

    <div class="light">
      <div class="step">
        <div class="number"> 14 </div>
        <div class="content">
          To proceed with the workflow, click <i>Compute Flexibility</i>.<br>
          The calculated flexibility for all scaffold loops is shown colour-coded here, being more flexible loops warm-coloured and the less flexible ones shown in cold colours, and the correlation in between the different used methods for flexibility assessment is shown under the coloured loops. <br>
          <img src="../assets/UseCase/image10.png" alt="Italian Trulli">
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 15 </div>
        <div class="content">
          The flexibility values can also be shown for secondary structures elements or individual residues. This can be done on the drop-down menu on the top right corner of the <i>Flexibility Evaluation</i> where now it says <i>None</i>.
        </div>
      </div>
    </div>  

    <div class="light">
      <div class="step">
        <div class="number"> 16 </div>
        <div class="content">
          The 6G75_A_13 loop looks interesting, because joins a relatively static region of the protein (left, bluish colour) with a very flexible one (right, bright orange colour). Add it to the list of candidate loops using the + button. The scaffold list now shows the selected loop as a candidate loop for grafting.<br>
          <img src="../assets/UseCase/image11.png" alt="Italian Trulli"><br>
          To continue with the fourth step (Motion-correlation evaluation), click on the header to unfold the step interface.
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 17 </div>
        <div class="content">
          The motion cross-correlation between the currently selected candidate loops and the remaining ones in the scaffold protein are shown in this menu. <br>
        </div>
      </div>
    </div>  

    <div class="light">
      <div class="step">
        <div class="number"> 18 </div>
        <div class="content">
          The flexible regions of the 6G75_A_18 loop show a good cross-correlation with the loop already selected. Add it to the candidate list by clicking on the + button.<br>
          <img src="../assets/UseCase/image12.png" alt="Italian Trulli"><br>
          To continue with the fifth step (Loop pairing), click on the header to unfold the step interface.
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 19 </div>
        <div class="content">
          We select a loop from the insert protein to pair with the loop from the scaffold protein by clicking on the button Pick Replacement Loop and choosing the appropriate insert loop. Although a non-similar loop is possible to be chosen, we advise against it. The loop located in the equivalent structural region in the insert protein is selected for grafting and the geometrical similarity of the paired loops can be reviewed again. <br>
          <img src="../assets/UseCase/image13.png" alt="Italian Trulli">
        </div>
      </div>
    </div>  

    <div class="light">
      <div class="step">
        <div class="number"> 20 </div>
        <div class="content">
          Proceed in the same way for all the loops you want to graft.<br>
          <img src="../assets/UseCase/image14.png" alt="Italian Trulli"><br>
          To continue with the sixth step (Loop Grafting), click on the header to unfold the step interface.
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 21 </div>
        <div class="content">
          The grafted protein sequences are ready immediately at this step. In addition to the sequences, to obtain (minimised) models and their scores the ownership of third-party software licenses needs to be stated. Tick both boxes, if that is the case, and submit the selected and paired loops for grafting by clicking on Start modelling! <br>
          <img src="../assets/UseCase/image15.png" alt="Italian Trulli">
        </div>
      </div>
    </div>  

    <div class="light">
      <div class="step">
        <div class="number"> 22 </div>
        <div class="content">
          And the process is done! Bookmark this link and visit the page later to see the results. Or you can impatiently look at the working server page and wait until all the steps are done. The calculation on this example (which yields almost 400 solutions) typically needs less than one hour. Other experiments may take longer.  Due to computational restrictions, the maximum number of solutions is limited to 1000. <br>
          <img src="../assets/UseCase/image16.png" alt="Italian Trulli"><br>
          To continue with the sixth step (Loop Grafting), click on the header to unfold the step interface.
        </div>
      </div>
    </div>

    <div class="dark">
      <div class="step">
        <div class="number"> 23 </div>
        <div class="content">
          The last step is downloading all the data you want to keep in your local machine and proceed with further analysis locally and in the wet lab. <br>
          <img src="../assets/UseCase/image17.png" alt="Italian Trulli">
        </div>
      </div>
    </div>  

    <!-- <div>
      <div class="static-element-header">3D View</div>
      <div class="static-element">
        <Solution3DView />
      </div>
    </div>
    <div>
      <div class="static-element-header">Selected Solution</div>
      <div class="static-element">
        <SolutionView />
      </div>
      <div class="static-element-header">All Solutions</div>
      <div class="static-element">
        <SolutionsTable />
      </div>
    </div> -->
    <!-- <Tooltip /> -->
  </div>
</template>

<script>
</script>

<style scoped>

img {
    max-width: 100%;
    max-height: 100%;
}

.welcome{
  text-align: center;
  padding-left: 10vh;
  padding-right: 10vh;
  margin: 5vh;
  /*font-weight: bold;*/
}

.dark{
  background: #cecece;
  padding: 1vh;
}

.light{
  padding-left: 1vh;
  padding-right: 1vh;
}

.step{
  margin: 5vh;
  display: flex;
  /*float: left;*/
  /*height: 470px;*/
  
  /*padding: 0 10px;*/
}

.number {
  /*background-color: #a1edcc;*/
  width: 5%;
  font-size: xx-large;
  color: #cecece;
  text-align: right;
}

.content {
  margin-left: 5vh;
  /*background-color: #a0e9ed;*/
  width: 85%;
}

.dark .step .number{
  color: #faf9f8;
}


</style>