galaxy/config/plugins/visualizations/scatterplot/src/visualization-templates.html

<script type="text/template" class="template-visualization" id="template-visualization-scatterplotControlForm">
{{! main layout }}

<h1>WHAAAAA?</h1>
<div class="scatterplot-container chart-container tabbable tabs-left">
    {{! tab buttons/headers using Bootstrap }}
    <ul class="nav nav-tabs">
        {{! start with the data controls as the displayed tab }}
        <li class="active">
            <a title="Use this tab to change which data are used"
               href="#data-control" data-toggle="tab">Data Controls</a>
        </li>
        <li>
            <a title="Use this tab to change how the chart is drawn"
               href="#chart-control" data-toggle="tab" >Chart Controls</a>
        </li>
        <li>
            <a title="This tab will display overall statistics for your data"
               href="#stats-display" data-toggle="tab">Statistics</a>
        </li>
        <li>
            <a title="This tab will display the chart"
               href="#chart-display" data-toggle="tab">Chart</a>

            <div id="loading-indicator" style="display: none;">
                <img class="loading-img" src="{{loadingIndicatorImagePath}}" />
                <span class="loading-message">{{message}}</span>
            </div>
        </li>
    </ul>

    {{! data form, chart config form, stats, and chart all get their own tab }}
    <div class="tab-content">
        {{! ---------------------------- tab for data settings form }}
        <div id="data-control" class="tab-pane active">
            {{! rendered separately }}
        </div>
    
        {{! ---------------------------- tab for chart graphics control form }}
        <div id="chart-control" class="tab-pane">
            {{! rendered separately }}
        </div>

        {{! ---------------------------- tab for data statistics }}
        <div id="stats-display" class="tab-pane">
            <p class="help-text">By column:</p>
            <table id="chart-stats-table">
                <thead><th></th><th>X</th><th>Y</th></thead>
                {{#each stats}}
                <tr><td>{{name}}</td><td>{{xval}}</td><td>{{yval}}</td></tr>
                </tr>
                {{/each}}
            </table>
        </div>

        {{! ---------------------------- tab for actual chart }}
        <div id="chart-display" class="tab-pane">
            <svg width="{{width}}" height="{{height}}"></svg>
        </div>

    </div>{{! end .tab-content }}
</div>{{! end .chart-control }}
</script>

<script type="text/template" class="template-visualization" id="template-visualization-dataControl">

    <p class="help-text">
        Use the following controls to change the data used by the chart.
        Use the 'Draw' button to render (or re-render) the chart with the current settings.
    </p>

    {{! column selector containers }}
    <div class="column-select">
        <label for="X-select">Data column for X: </label>
        <select name="X" id="X-select">
        {{#each numericColumns}}
            <option value="{{index}}">{{name}}</option>
        {{/each}}
        </select>
    </div>
    <div class="column-select">
        <label for="Y-select">Data column for Y: </label>
        <select name="Y" id="Y-select">
        {{#each numericColumns}}
            <option value="{{index}}">{{name}}</option>
        {{/each}}
        </select>
    </div>

    {{! optional id column }}
    <div id="include-id">
        <label for="include-id-checkbox">Include a third column as data point IDs?</label>
        <input type="checkbox" name="include-id" id="include-id-checkbox" />
        <p class="help-text-small">
            These will be displayed (along with the x and y values) when you hover over
            a data point.
        </p>
    </div>
    <div class="column-select" style="display: none">
        <label for="ID-select">Data column for IDs: </label>
        <select name="ID" id="ID-select">
        {{#each allColumns}}
            <option value="{{index}}">{{name}}</option>
        {{/each}}
        </select>
    </div>

    {{! if we're using generic column selection names ('column 1') - allow the user to use the first line }}
    <div id="first-line-header" style="display: none;">
        <p>Possible headers: {{ possibleHeaders }}
        </p>
        <label for="first-line-header-checkbox">Use the above as column headers?</label>
        <input type="checkbox" name="include-id" id="first-line-header-checkbox"
            {{#if usePossibleHeaders }}checked="true"{{/if}}/>
        <p class="help-text-small">
            It looks like Galaxy couldn't get proper column headers for this data.
            Would you like to use the column headers above as column names to select columns?
        </p>
    </div>

    <input id="render-button" type="button" value="Draw" />
    <div class="clear"></div>
</script>

<script type="text/template" class="template-visualization" id="template-visualization-chartControl">
    <p class="help-text">
        Use the following controls to how the chart is displayed.
        The slide controls can be moved by the mouse or, if the 'handle' is in focus, your keyboard's arrow keys.
        Move the focus between controls by using the tab or shift+tab keys on your keyboard.
        Use the 'Draw' button to render (or re-render) the chart with the current settings.
    </p>

    <div id="datapointSize" class="form-input numeric-slider-input">
        <label for="datapointSize">Size of data point: </label>
        <div class="slider-output">{{datapointSize}}</div>
        <div class="slider"></div>
        <p class="form-help help-text-small">
            Size of the graphic representation of each data point
        </p>
    </div>

    <div id="animDuration" class="form-input checkbox-input">
        <label for="animate-chart">Animate chart transitions?: </label>
        <input type="checkbox" id="animate-chart"
            class="checkbox control"{{#if animDuration}} checked="true"{{/if}} />
        <p class="form-help help-text-small">
            Uncheck this to disable the animations used on the chart
        </p>
    </div>

    <div id="width" class="form-input numeric-slider-input">
        <label for="width">Chart width: </label>
        <div class="slider-output">{{width}}</div>
        <div class="slider"></div>
        <p class="form-help help-text-small">
            (not including chart margins and axes)
        </p>
    </div>

    <div id="height" class="form-input numeric-slider-input">
        <label for="height">Chart height: </label>
        <div class="slider-output">{{height}}</div>
        <div class="slider"></div>
        <p class="form-help help-text-small">
            (not including chart margins and axes)
        </p>
    </div>

    <div id="X-axis-label"class="text-input form-input">
        <label for="X-axis-label">Re-label the X axis: </label>
        <input type="text" name="X-axis-label" id="X-axis-label" value="{{xLabel}}" />
        <p class="form-help help-text-small"></p>
    </div>

    <div id="Y-axis-label" class="text-input form-input">
        <label for="Y-axis-label">Re-label the Y axis: </label>
        <input type="text" name="Y-axis-label" id="Y-axis-label" value="{{yLabel}}" />
        <p class="form-help help-text-small"></p>
    </div>

    <input id="render-button" type="button" value="Draw" />
</script>

<script type="text/template" class="template-visualization" id="template-visualization-statsDisplay">
    <p class="help-text">By column:</p>
    <table id="chart-stats-table">
        <thead><th></th><th>X</th><th>Y</th></thead>
        {{#each stats}}
        <tr><td>{{name}}</td><td>{{xval}}</td><td>{{yval}}</td></tr>
        </tr>
        {{/each}}
    </table>
</script>

<script type="text/template" class="template-visualization" id="template-visualization-chartDisplay">
    <svg width="{{width}}" height="{{height}}"></svg>
</script>