counting.html

	<div class="row" id="introduction">
		<div class="colW600">
			The number of nested secondary structures that can be formed by an RNA sequence grows
			exponentially with sequence length $n$ (about $\sim 2.3^{n}$, see
			<a href="https://doi.org/10.1016/S0166-218X(98)00073-0">(Hofacker et al., 1997)</a>).
			<br />
			<br />
			Here, we use a variant of the algorithm by
			<a href="http://dx.doi.org/10.1016/0025-5564(78)90099-8">Michael S. Waterman and Temple F. Smith (1970)</a>
			to compute the exact number of nested structures a sequence can form.
			The approach applies dynamic programming, i.e. tabularizes results for subproblems.
			To this end, it populates a matrix $C$, where an entry $C_{i,j}$
			provides the <em>exact number</em> of admissible structures for the subsequence from
			position $i$ to $j$. The overall number of admissible structures for the
			sequences can be found in the upper right corner $C_{1,n}$, where $n$ denotes
			the sequence's length and Watson-Crick as well as GU base pairs are considered complementary.
		</div>
		<div class="colW150">
			<img alt="counting structures" src="counting-120x90.png" width=120 height=90 >
		</div>
	</div>

    <div id="inputContainer">
        <div class="row">
            <div class="colW200" style="font-size: 120%">RNA sequence $S$:</div>
            <div class="colW400">
                <input data-bind="value: rawSeq" class="userInput"
                       placeholder="Example 'GCACGACG'" onkeydown="validate(event)"
                       style="text-transform:uppercase">
            </div>
        </div>

        <div class="row">
            <div class="colW200" style="font-size: 120%">Minimal loop length $l$:</div>
            <div class="colW400">
                <select data-bind="value: loopLength" id="ll" style="width:40px;">
                    <option value=0>0</option>
                    <option value=1>1</option>
                    <option value=2>2</option>
                    <option value=3>3</option>
                    <option value=4>4</option>
                    <option value=5>5</option>
                </select>
                <label for="ll" style="margin-left:10px;">i.e. minimal number of enclosed positions</label>
            </div>
        </div>
        <div class="row">
            <div class="colW400" style="font-size: 120%; white-space: nowrap;">Recursion for counting the number of possible structures:</div>
        </div>

		<div class="row" id="rec_id" data-bind="text: latex()[0]"></div>
        <div id="rec_select" style="display: none;">nussinovCounting</div>

    </div>

    <div id="output">
			<div class="scroll_table">
        <table id="matrix">
            <thead>
            <tr>
                <th class="cell_count"  style="font-size: 16px; color: darkslategray">$C$</th>
                <th class="cell_count"></th>
                <!-- ko foreach: { data: seqList, as: 'base' } -->
                <th class="cell_count" data-bind="writeSeq: [base, $index()+1]"></th>
                <!-- /ko -->
            </tr>
            </thead>

            <tbody id='matrix_data' data-bind="foreach: { data: cells()[0], as: 'cell' }">
            <tr>
                <th class="cell_count" data-bind="writeSeq: [$root.seqList()[$index()], $index()+1]"></th>
                <!-- ko foreach: { data: cell, as: 'v' } -->
                    <td class="cell_count"  data-bind="text: v.i < v.j+2 ? v.value : '', style: { background: (v.i==1 && v.j==$root.seqList().length) ? 'lightblue' : 'white'}, attr: {title: 'i=' + v.i + ' j=' + v.j}"></td>
                <!-- /ko -->
            </tr>
            </tbody>
        </table>
			</div>
        <div><a href="javascript:generate_tables()">Download Table</a></div>
    </div>

    <script src="js/visualize.js"></script>