source: trunk/grails-app/views/home/index.gsp @ 1755

Last change on this file since 1755 was 1755, checked in by work@…, 9 years ago
  • makes no sense showing a statistics box if there is nothing to show
  • Property svn:keywords set to Rev Author Date
File size: 12.1 KB
Line 
1<html>
2<head>
3        <title>Generic Study Capture Framework</title>
4        <meta property="og:title" content="Generic Study Capture Framework"/>
5        <meta property="og:description" content="A generic tool for planning scientific studies, and capturing study meta-data, integrating with analysis platform(s) / LIMS systems and searching relevant studies."/>
6        <meta name="layout" content="main"/>
7        <g:if test="${showstats}"><script type="text/javascript" src="${resource(dir: 'js', file: 'highcharts.js')}"></script></g:if>
8        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.ui.autocomplete.html.js', plugin: 'gdt')}"></script>
9        <script type="text/javascript">
10                $(document).ready(function() {
11<g:if test="${showstats}">
12                        Highcharts.theme = { colors: ['#4572A7'] };
13                        var highchartsOptions = Highcharts.getOptions();
14                        var studiesPieChart, dailyStatistics;
15
16                        studiesPieChart = new Highcharts.Chart({
17                                chart: {
18                                        renderTo: 'studies-pie',
19                                        plotBackgroundColor: null,
20                                        plotBorderWidth: null,
21                                        plotShadow: false
22                                },
23                                title: {
24                                        text: '${studyCount} Studies'
25                                },
26                                tooltip: {
27                                        formatter: function() {
28                                                return '<b>' + this.point.name + '</b>: ' + this.y + ' ' + ((this.y == 1) ? 'study' : 'studies');
29                                        }
30                                },
31                                plotOptions: {
32                                        pie: {
33                                                allowPointSelect: true,
34                                                cursor: 'pointer',
35                                                dataLabels: {
36                                                        enabled: true,
37                                                        color: Highcharts.theme.textColor || '#000000',
38                                                        connectorColor: Highcharts.theme.textColor || '#000000',
39                                                        formatter: function() {
40                                                                return '<b>' + this.point.name + '</b>: ' + this.y + ' ' + ((this.y == 1) ? 'study' : 'studies');
41                                                        }
42                                                }
43                                        }
44                                },
45                                series: [
46                                        {
47                                                type: 'pie',
48                                                name: 'Your statistics',<sec:ifLoggedIn>
49                                                size: '45%',
50                                                innerSize: '25%',
51                                                </sec:ifLoggedIn><sec:ifNotLoggedIn>
52                                                innerSize: '45%',
53                                                </sec:ifNotLoggedIn>
54                                                data: [
55                                                        { name: 'Public', y: ${publicStudyCount}, color: '#89A54E' },
56                                                        { name: 'Private', y: ${privateStudyCount}, color: '#AA4643' }
57                                                ],
58                                                dataLabels: {
59                                                        enabled: <sec:ifLoggedIn>false</sec:ifLoggedIn><sec:ifNotLoggedIn>true</sec:ifNotLoggedIn>
60                                                }
61                                        },
62                                        {
63                                                type: 'pie',
64                                                name: 'Your statistics',<sec:ifLoggedIn>
65                                                size: '25%',
66                                                innerSize: '10%',
67                                                </sec:ifLoggedIn><sec:ifNotLoggedIn>
68                                                size: '45%',
69                                                </sec:ifNotLoggedIn>
70                                                data: [
71                                                        { name: 'Published public', y: ${publishedPublicStudyCount}, color: '#89A54E' },
72                                                        { name: 'Unpublished Public', y: ${unPublishedPublicStudyCount}, color: '#bbc695' },
73                                                        { name: 'Published Private', y: ${publishedPrivateStudyCount}, color: '#AA4643' },
74                                                        { name: 'Unpublished Private', y: ${unPublishedPrivateStudyCount}, color: '#ae6e6c' }
75                                                ],
76                                                dataLabels: {
77                                                        enabled: false
78                                                }
79                                        }
80                                        <sec:ifLoggedIn>
81                                        ,
82                                        {
83                                                type: 'pie',
84                                                name: 'Total statistics',
85
86                                                innerSize: '45%',
87                                                data: [
88                                                        { name: 'Read only', y: ${readOnlyStudyCount}, color: '#80699B' },
89                                                        { name: 'Readable & writable', y: ${readWriteStudyCount}, color: '#89A54E' },
90                                                        { name: 'Not accessible', y: ${noAccessStudyCount}, color: '#AA4643' }
91                                                ],
92                                                dataLabels: {
93                                                        enabled: true
94                                                }
95                                        },
96                                        </sec:ifLoggedIn>
97                                ]
98                        });
99
100                        <g:if test="${startDate && dailyStatistics?.size()}">
101                        dailyStatistics = new Highcharts.Chart({
102                                chart: {
103                                        renderTo: 'daily-statistics',
104                                        zoomType: 'x',
105                                        spacingRight: 20
106                                },
107                                title: {
108                                        text: 'Users, studies and templates'
109                                },
110                                subtitle: {
111                                        text: document.ontouchstart === undefined ?
112                                                'Click and drag in the plot area to zoom in' :
113                                                'Drag your finger over the plot to zoom in'
114                                },
115                                xAxis: {
116                                        type: 'datetime',
117                                        maxZoom: 14 * 24 * 3600000, // fourteen days
118                                        title: {
119                                                text: null
120                                        }
121                                },
122                                yAxis: {
123                                        title: {
124                                                text: 'Total'
125                                        },
126                                        min: 0,
127                                        startOnTick: false,
128                                        showFirstLabel: false
129                                },
130                                tooltip: {
131                                        shared: true
132                                },
133                                legend: {
134                                        enabled: false
135                                },
136                                plotOptions: {
137                                        area: {
138
139                                                lineWidth: 1,
140                                                marker: {
141                                                        enabled: false,
142                                                        states: {
143                                                                hover: {
144                                                                        enabled: true,
145                                                                        radius: 5
146                                                                }
147                                                        }
148                                                },
149                                                shadow: false,
150                                                states: {
151                                                        hover: {
152                                                                lineWidth: 1
153                                                        }
154                                                }
155                                        }
156                                },
157
158                                series: [
159                                        {
160                                                type: 'area',
161                                                name: 'Studies',
162                                                pointInterval: 24 * 3600 * 1000,
163                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
164                                                data: [
165                                                        <g:each var="day" in="${dailyStatistics}">${day.value.studyTotal},</g:each>
166                                                ]
167                                        },
168                                        {
169                                                type: 'area',
170                                                name: 'Templates',
171                                                pointInterval: 24 * 3600 * 1000,
172                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
173                                                data: [
174                                                        <g:each var="day" in="${dailyStatistics}">${day.value.templateTotal},</g:each>
175                                                ]
176                                        },
177                                        {
178                                                type: 'area',
179                                                name: 'Users',
180                                                pointInterval: 24 * 3600 * 1000,
181                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
182                                                data: [
183                                                        <g:each var="day" in="${dailyStatistics}">${day.value.userTotal},</g:each>
184                                                ]
185                                        }
186                                ]
187                        });
188                        </g:if>
189</g:if>
190                        var quickSearch = $("#search_term");
191                        quickSearch.autocomplete({
192                                minLength: 2,
193                                delay: 300,
194                                search: function(event, ui) {
195                                        quickSearch.css({ 'background': 'url(${resource(dir: 'images', file: 'spinner.gif')}) no-repeat left top' });
196                                },
197                                source: function(request, response) {
198                                        quickSearch.css({ 'background': 'none' });
199
200                                        $.ajax({
201                                                //url: "http://ws.geonames.org/searchJSON",
202                                                url: "${createLink(action:'ajaxQuickSearch')}",
203                                                dataType: "jsonp",
204                                                data: {
205                                                        featureClass: "P",
206                                                        style: "full",
207                                                        maxRows: 12,
208                                                        name_startsWith: request.term
209                                                },
210                                                success: function(data) {
211                                                        response($.map(data.data, function(item) {
212                                                                return {
213                                                                        label           : '<span class="about">'+item.category+'</div> <span class="from">'+item.name+'</span>',
214                                                                        value           : item.link
215                                                                }
216                                                        }));
217                                                }
218                                        });
219                                },
220                                minLength: 2,
221                                select: function(event, ui) {
222                                        // redirect ?
223                                        if (ui.item.value) {
224                                                // hide, so the URL does not show in the input field
225                                                quickSearch.css( { 'display': 'none' } );
226
227                                                // and redirect
228                                                window.location = ui.item.value;
229                                        }
230                                },
231                                open: function() {
232                                        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
233                                },
234                                close: function() {
235                                        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
236                                },
237                                html: true
238                        });
239                });
240        </script>
241        <style type="text/css">
242        #simpleQuery {
243        }
244
245        #simpleQuery .search {
246                display: block;
247                height: 30px;
248                margin-bottom: 10px;
249                zoom: 1; /* IE 6 & 7 hack */
250                *display: inline; /* IE 6 & 7 hack */
251        }
252
253        #simpleQuery .search .begin {
254                margin: 0px;
255                padding: 0px;
256                display: inline-block;
257                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-begin.png')});
258                height: 30px;
259                width: 140px;
260                vertical-align: top;
261                text-align: right;
262                zoom: 1; /* IE 6 & 7 hack */
263                *display: inline; /* IE 6 & 7 hack */
264        }
265
266        #simpleQuery .search .begin .label {
267                color: #fff;
268                font-face: Arial;
269                line-height: 30px;
270                text-shadow: 0px 0px 1px #006DBA;
271                font-size: 12px;
272                margin-right: 23px;
273        }
274
275        #simpleQuery .search .middle {
276                margin: 0px 0px -20px 0px;
277                padding: 0;
278                display: inline-block;
279                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-middle.png')});
280                height: 30px;
281                width: 300px;
282                vertical-align: top;
283                zoom: 1; /* IE 6 & 7 hack */
284                *display: inline; /* IE 6 & 7 hack */
285        }
286
287        #simpleQuery .search .searchfield {
288                vertical-align: middle;
289                width: 100%;
290                height: 100%;
291                color: #006DBA;
292                border-width: 0px;
293                border: none;
294                background-color: Transparent;
295                zoom: 1; /* IE 6 & 7 hack */
296                *display: inline; /* IE 6 & 7 hack */
297        }
298
299        #simpleQuery .search .end {
300                margin: 0px;
301                padding: 0px;
302                display: inline-block;
303                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-end.png')});
304                height: 30px;
305                width: 28px;
306                zoom: 1; /* IE 6 & 7 hack */
307                *display: inline; /* IE 6 & 7 hack */
308        }
309
310        </style>
311</head>
312<body>
313
314<div style="clear:both;display:block;">
315        <div style="margin-right:8px;width:472px;display:inline-block;float:left;zoom:1;*display:inline;">
316                <h1>Introduction</h1>
317                <p>
318                        The phenotype database (dbNP) is an application that can store any biological study. It contains
319                        templates which makes it possible to customize.
320                </p>
321                <p>
322                        In order to allow flexibility to capture all information you require within a study, <i>and</i> to
323                        make it possible to compare studies or study data, the system uses customizable templates and ontologies.
324                        It is especially designed to store complex study designs including cross-over designs and challenges.
325                </p>
326                <p>
327                        The application facilitates sharing of data within a research group or consortium, as the study owner can
328                        decide who can view or access the data. In addition, the application can stimulate collaborations by making
329                        study information publicly visible. New studies can be based on study data within the database, as
330                        standardized storage is stimulated by the system.
331                </p>
332        </div>
333        <div style="margin-left:8px;width:472px;display:inline-block;float:left;zoom:1;*display:inline;">
334                <h1>Quicksearch</h1>
335                <div id="simpleQuery" class="simplequery">
336                <g:form action="pages" name="simpleQueryForm" id="simpleQueryForm">
337                        <g:if test="${search_term}"><g:set var="preterm" value="${search_term}"/></g:if>
338                        <div class="searchContainer">
339                                <div class="search">
340                                        <div class="begin"><span class="label">Search term</span></div><div class="middle"><g:textField name="search_term" id="search_term" class="searchfield" value="${preterm}"/></div><div class="end"><a onClick="$('#search_term').val('');"><img src="${resource(dir: 'images', file: 'simpleQuery/spotlight-end.png')}" value="Reset" alt="Reset" border="0"></a></div>
341                                </div>
342                                <span style="font-style:italic;color:#aaa;font-size:10px;">more advanced searches can be performed <g:link controller="advancedQuery">here</g:link>...</span>
343                        </div>
344                        </g:form>
345                        <h1>Quick Start</h1>
346                        <p>
347                                Through the <i>studies</i> menu you can either <i>create</i>, <i>view</i> or <i>import</i> studies
348                                (or study data). '<g:link controller="studyWizard" action="index" params="[jump:'create']">Create a new study</g:link>' will guide you through several steps to include your study
349                                into the system where question marks (<img src="${fam.icon(name: 'help')}">) will explain what information is
350                                required. You can (quick) save your study to complete it at another point in time, or use
351                                <i>import study data</i> to import large datasets (for example: many subjects) from an excel sheet
352                                into your study. Several data-types of different platforms (assays) can
353                                be linked to your study, like <i>simple assays</i> (e.g. clinical chemistry or Western blot)
354                                or <i>metabolomics</i>.
355                        </p>
356                </div>
357        </div>
358</div>
359
360<g:if test="${showstats && studyCount}">
361<div style="clear:both;display:block;padding-top:10px;">
362        <h1>Usage Statistics</h1>
363        <div id="graphs" style="display:block;border:1px solid #6c6f70;width:100%;height:300px;">
364                <div id="studies-pie" style="margin:2px;width:476px;height:296px;display:inline-block;float:left;zoom:1;*display:inline;"></div>
365                <div id="daily-statistics" style="margin:2px;width:476px;height:296px;display:inline-block;float:left;zoom:1;*display:inline;"></div>
366        </div>
367</div>
368</g:if>
369
370<g:if env="ci">
371<h1>DEBUG: Installed Plugins</h1>
372<ul>
373        <g:set var="pluginManager"
374                   value="${applicationContext.getBean('pluginManager')}"></g:set>
375        <g:each var="plugin" in="${pluginManager.allPlugins}">
376                <li>${plugin.name} - ${plugin.version}</li>
377        </g:each>
378</ul>
379</g:if>
380
381</body>
382</html>
Note: See TracBrowser for help on using the repository browser.