view popoto_dev/ismi.html @ 12:d67c5ad47709

implementation with dropdown popup, unfinished
author alistair
date Fri, 02 Oct 2015 01:08:46 -0400
parents
children
line wrap: on
line source

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Popoto Search</title>
    <link rel="stylesheet" href="css/popoto.min.css">
</head>
<body class="ppt-body">

<header class="ppt-header">
    <span class="ppt-header-span">POPOTO JS alpha version</span>
</header>

<section class="ppt-section-main">
    <div class="ppt-section-header" style="height: auto; line-height: 35px;">
        <span class="ppt-header-span">Graph</span> search
        <form>
            <table width="100%">
                <tr>
                    <th>Person Constraints</th>
                    <th>Codex Constraints</th>
                    <th>Witness Constraints</th>
                </tr>
                <tr>
                    <td>
                        <label>
                            <input id="person-constraint" type="text" style="width: 90%;" value='$identifier.label IN [""]'>
                        </label>
                    </td>
                    <td>
                        <label>
                            <input id="codex-constraint" type="text" style="width: 90%;" value='$identifier.label IN [""]'>
                        </label>
                    </td>
                    <td>
                        <label>
                            <input id="witness-constraint" type="text" style="width: 90%;" value='$identifier.label IN [""]'>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>
                            <input id="person-constraint2" type="text" style="width: 90%;" value='$identifier.label IN [""]'>
                        </label>
                    </td>
                    <td>
                        <label>
                            <input id="codex-constraint2" type="text" style="width: 90%;" value='$identifier.label IN [""]'>
                        </label>
                    </td>
                    <td>
                        <label>
                            <input id="witness-constraint2" type="text" style="width: 90%;" value='$identifier.label IN [""]'>
                        </label>
                    </td>
                </tr>
            </table>
            <!-- fill labels conditionally and have a single filter button with one id-->
            <input id="filter-button" type="button" value="Use these filters">
            <input id="clear-button" type="button" value="Reset">
            <!--
            use:
            clickedNode.data = popoto.graph.node.parseResultData(data);
            to get data to use in drop down boxes
            where:
            popoto.graph.node.nodeClick = function () {
            has var:
            var clickedNode = d3.select(this).data()[0]; // Clicked node data

            note: could just do that for all [i] if not null
            should test to see whether the .data returns the attribute type or the actual attribute
            just console.log results array in popoto.graph.node.parseResultData
            -->
        </form>

        <select id="dropdown" name="select12" style="visibility: hidden; overflow: scroll; position: fixed;">
            <option>- Select -</option>
        </select>

    </div>

    <div class="ppt-container-graph">
        <nav id="popoto-taxonomy" class="ppt-taxo-nav">
            <!-- Label/taxonomy filter will be generated here -->
        </nav>
        <div id="popoto-graph" class="ppt-div-graph">
            <!-- Graph will be generated here-->
        </div>
    </div>

    <div id="popoto-query" class="ppt-container-query">
        <!-- Query viewer will be generated here -->
    </div>

    <!-- Cypher query viewer has been partially disabled for this alpha release and only display the query as text if enabled -->
    <!--<div id="popoto-cypher" class="ppt-container-cypher">-->
    <!--</div>-->

    <div class="ppt-section-header">
        <!-- The total results count is updated with a listener defined in app-template.js -->
        RESULTS <span id="result-total-count" class="ppt-count"></span>
    </div>

    <div id="popoto-results" class="ppt-container-results">
        <!-- Results will be generated here -->
    </div>

</section>

<!---------------------->
<!-- Required scripts -->

<!-- Jquery is only used in popoto.js to send ajax POST request on Neo4j REST API -->
<!-- This dependency will probably be removed in future releases -->
<script src="js/jquery-2.1.0.min.js" charset="utf-8"></script>

<script src="js/d3.v3.min.js" charset="utf-8"></script>
<!-- <script src="js/popoto.min.js" charset="utf-8"></script> -->
<script src="src/js/popoto.js" charset="utf-8"></script>

<!-- You can modify the parameters defined in this script to customize this application template -->
<script src="js/app-ismi.js" charset="utf-8"></script>
</body>
</html>