ucsb-dataverse-homepage.html

<style>
    /* Custom CSS for the custom homepage... */
    .lite-header {font-weight: normal;}
    .heavy-rule {border: 1px solid #DDD;}
    .spacer-rule {border:0;margin-top:0;}
    .activity-rule {width:85%;margin-left:30px;}
    div.hmpg-action-block {padding-top:1em;}
    .btn-ucsb { 
      color: #003660; /* UCSB Navy */
      background: #FFFFFF;
      font-weight: bold;
    }
    .btn-ucsb:hover, 
    .btn-ucsb:focus, 
    .btn-ucsb:active, 
    .btn-ucsb.active, 
    .open .dropdown-toggle.btn-ucsb { 
      color: #005AA3; /* UCSB Light Blue */
      background: #FFFFFF;
      font-weight: bold;
    }
    .btn-ucsb span.glyphicon {margin-right:0;}

    div.search-widget {padding-bottom: 2em;}

    div.panel-primary.featured-panel {padding:0;border-color:var(--ucsb-navy);}
    div.panel-primary.featured-panel .panel-body {padding:0;}
    div.panel-primary.featured-panel .featured-header {vertical-align:middle;height:60px;padding:12px;background:var(--ucsb-navy);}
    div.panel-primary.featured-panel .featured-header div.small {line-height:60px;color:#ffffff;font-weight:bold;}
    div.panel-primary.featured-panel .featured-logo {vertical-align:middle;height:60px;padding:12px 0 12px 12px;}
    div.panel-primary.featured-panel .featured-logo img {max-width:160px;max-height:60px;}
    div.panel-primary.featured-panel .featured-body {vertical-align:middle;padding:12px;}
    div.panel-primary.featured-panel .featured-body a {color:var(--ucsb-navy);}
    
    @media (min-width: 768px) {
        #dataversesBySubject {-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; overflow: hidden; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; break-inside: avoid-column;}

        #journals {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; overflow: hidden;}
        #researchers {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; overflow: hidden;}
        #journals div.hmpg-recent-block, #researchers div.hmpg-recent-block {-webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; break-inside: avoid-column;}

    }
    #browseBySubject p.browse-subjects, #searchDataverse p.browse-all-data {display:inline-block; width:100%; padding:0 2px;}
    #searchDataverse p.browse-all-data {padding:10px;}
    #browseBySubject p.browse-subjects a, #searchDataverse p.browse-all-data a {color:var(--ucsb-light-blue);}
    #browseBySubject p.browse-subjects a:focus, #browseBySubject p.browse-subjects a:hover
    , #searchDataverse p.browse-all-data a:focus, #searchDataverse p.browse-all-data a:hover {color:var(--ucsb-coral);}

    div.hmpg-recent-col p.placeholder {display:inline-block;}
    div.hmpg-recent-col div.hmpg-recent-block {border-bottom:1px solid #DDD;margin-bottom:12px;}
    
    /* NOTE: REMOVED THUMBNAILS
    div.hmpg-recent-col div.col-xs-2.hmpg-recent-thumb {width: 48px !important;height:48px;padding: 0 !important;}
    div.hmpg-recent-col div.hmpg-recent-thumb img {max-height:48px;max-width:48px;}
    div.hmpg-recent-col div.hmpg-recent-thumb span {font-size:38px;}
    */

    div.activity-label {line-height: 19px;margin-top: 10px;margin-bottom: 10px;}

    .hmpg-action-block {
        background: #f8f9fa;
        padding: 2rem;
        border-radius: 8px;
        margin-bottom: 2rem;
    }

    .search-widget input {
        border-radius: 20px 0 0 20px;
        border: 2px solid var(--ucsb-navy);
        padding: 10px 20px;
    }

    .search-widget .btn {
        border-radius: 0 20px 20px 0;
        border: 2px solid var(--ucsb-navy);
        border-left: none;
    }

    .activity-label {
        font-weight: 500;
        color: var(--ucsb-navy);
    }

    /* Add card-like styling to recent items */
    div.hmpg-recent-block {
        padding: 1rem;
        margin: 1rem 0;
        border: 1px solid #eee;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    div.hmpg-recent-block:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }

    .margin-bottom {
        margin-bottom: 1.5rem;
    }

    .h4.lite-header {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        color: var(--ucsb-navy);
    }

    .heavy-rule {
        margin: 2rem 0;
        border-color: #eee;
    }
</style>

    <!-- ACTIONS -->
    <div class="row hmpg-action-block">
        <div class="col-sm-4 col-xs-12">
            <div class="h4 lite-header">Deposit and share your data. Get academic credit.</div>
            <p class="text-muted margin-bottom">UCSB Dataverse is a repository for research data. Deposit data and code here.</p>
            
            <!-- <p class="margin-bottom-half">
                <span id="headAllTimeAllDatasetsValue" class="h4 lite-header"></span> <span class="text-muted">datasets</span>
                &nbsp;&nbsp;
                <span id="headAllTimeAllDownloadsValue" class="h4 lite-header"></span> <span class="text-muted">downloads</span>
            </p> -->

            <a class="btn btn-default btn-ucsb margin-top margin-bottom" href="/dataset.xhtml?ownerId=1">
                Add a dataset <span class="glyphicon glyphicon-plus text-muted"></span>
            </a>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="h4 lite-header">Organize datasets and gather metrics in your own repository.</div>
            <p class="text-muted margin-bottom">A dataverse is a container for all your datasets, files, and metadata.</p>
            
            <!-- <p class="margin-bottom-half">
                <span id="headAllTimeAllDataversesValue" class="h4 lite-header"></span> <span class="text-muted">dataverses</span>
            </p> -->

            <a class="btn btn-default btn-ucsb margin-top margin-bottom" href="/dataverse.xhtml?ownerId=1">
                Add a dataverse <span class="glyphicon glyphicon-plus text-muted"></span>
            </a>
        </div>
    </div>

    <hr class="heavy-rule"/>

    <!-- SEARCH + BROWSE + RECENT -->
    <div class="row hmpg-browse-block">
        
        <!-- SEARCH -->
        <!-- 
        NOTE: The alias of the root dataverse will need to be configured in this URL 
        -->
        <div id="searchDataverse" class="col-xs-12">
            <div class="h4 lite-header margin-bottom">Find data across research fields, preview metadata, and download files</div>
            <div class="row">
                <div class="col-md-5 col-sm-6 col-xs-11">
                    <div class="search-widget input-group">
                        <input id="inputDataverseSearch" class="form-control" type="text" placeholder="" onkeydown="if (event.keyCode == 13) document.getElementById('btnDataverseSearch').click();" aria-label="Search all data">
                        <span class="input-group-btn">
                            <button id="btnDataverseSearch" class="btn btn-default bootstrap-button-tooltip" type="button" data-original-title="Find"
                            	onclick="window.location = '/dataverse/ucsb?q=' + document.getElementById('inputDataverseSearch').value;return false;"><span class="glyphicon glyphicon-search"></span></button>
                        </span>
                    </div>
                </div>
                <div class="col-md-5 col-sm-6 col-xs-11">
                    <p class="browse-all-data small text-muted"><a href= "/dataverse/ucsb">VIEW ALL DATA</a> <span class="glyphicon glyphicon-chevron-right"></span></p>
                </div>
            </div>
        </div>
        <!-- END: SEARCH -->

        <!-- FEATURED DATAVERSE -->
        <!-- <div id="featuredDataverse" class="col-xs-12">
            <div class="panel panel-primary featured-panel col-xs-12">
              <div class="panel-body">
                <div class="media">
                  <div class="media-left featured-header">
                    <div class="small">Featured</div>
                  </div>
                  <div class="media-left featured-logo">
                    <a href="/dataverse/covid19" title="COVID-19 Data Collection"><img class="media-object" src="/logos/3824668/23312.png" alt="COVID-19 Data Collection logo"></a>
                  </div>
                  <div class="media-body featured-body">
                    <h4 class="media-heading"><a href="/dataverse/covid19" title="COVID-19 Data Collection">COVID-19 Data Collection</a></h4>
                    <p>A curated collection of COVID-19 data deposited in the Harvard Dataverse repository.</p>
                  </div>
                </div>
              </div>
            </div>
        </div> -->
        <!-- END: FEATURED DATAVERSE -->
        
        <!-- BROWSE SUBJECT -->
        <div id="browseBySubject" class="col-xs-12">
            <p class="text-muted margin-bottom">Browse by subject</p>
            <div class="row margin-bottom">
                <!-- SUBJECTS -->
                <div id="dataversesBySubject" class="col-xs-12">
                </div>
                
                <!-- VIEW ALL -->
                <!-- 
                NOTE: The alias of the root dataverse will need to be configured in this URL 
                -->
                <div class="col-xs-12 margin-top">
                    <p class="browse-subjects small text-muted"><a href= "/dataverse/ucsb">ALL SUBJECTS</a> <span class="glyphicon glyphicon-chevron-right"></span></p>
                </div>
            </div>
        </div>
        <!-- END: BROWSE SUBJECT -->

        <!-- RECENT CATEGORY -->
        <div id="recentActivity" class="col-xs-12">
            <p class="text-muted margin-bottom">Recent datasets</p>
            <div class="row">

                <hr class="col-xs-12 hidden-lg spacer-rule" />

                <div class="col-lg-6 col-xs-12 hmpg-recent-col">
                    <div class="h4 lite-header margin-bottom">From other dataverses</div>

                    <hr class="col-xs-11 no-margin-top"/>

                    <!-- RESEARCHERS RESULTS -->
                    <div id="researchers" class="row col-xs-12"><p class="placeholder text-muted">Loading...</p></div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-lg-6 col-xs-12 hmpg-recent-col">
                    <!-- VIEW ALL -->
                    <!-- 
                    NOTE: The alias of the root dataverse will need to be configured in this URL 
                    -->
                    <div class="row col-xs-12 margin-top">
                        <p class="small text-muted"><a href= "/dataverse/ucsb">ALL RECENT ACTIVITY</a> <span class="glyphicon glyphicon-chevron-right"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: RECENT CATEGORY -->

    <hr/>

    <!-- ACTIVITY -->
    <div class="row hmpg-activity-block">
        <div class="col-xs-12">
            <div class="h4 lite-header margin-bottom">Activity</div>
        </div>

        <div class="row">

            <div class="col-md-6 col-xs-12">
                <div class="col-xs-12 row">
                    <div class="col-xs-4 highlightBold">Datasets</div>
                    <div class="col-xs-4 highlightBold">All Activity</div>
                    <div class="col-xs-4 highlightBold">Past 30 Days</div>
                </div>
                <div class="col-xs-12 row">
                    <div class="col-xs-4 activity-label">All</div>
                    <div class="col-xs-4 h4 lite-header" id="activityAllTimeAllDatasetsValue"><span class="text-muted">...</span></div>
                    <div class="col-xs-4 h4 lite-header" id="activity30DaysAllDatasetsValue"><span class="text-muted">...</span></div>
                </div>
                <div class="col-xs-12 row">
                    <div class="col-xs-4 activity-label">Deposited</div>
                    <div class="col-xs-4 h4 lite-header" id="activityAllTimeDepositedDatasetsValue"><span class="text-muted">...</span></div>
                    <div class="col-xs-4 h4 lite-header" id="activity30DaysDepositedDatasetsValue"><span class="text-muted">...</span></div>
                </div>
                <div class="col-xs-12 row">
                    <div class="col-xs-4 activity-label">Harvested</div>
                    <div class="col-xs-4 h4 lite-header" id="activityAllTimeHarvestedDatasetsValue"><span class="text-muted">...</span></div>
                    <div class="col-xs-4 h4 lite-header" id="activity30DaysHarvestedDatasetsValue"><span class="text-muted">...</span></div>
                </div>
            </div>

            <hr class="col-sm-12 hidden-md hidden-lg activity-rule" />

            <div class="col-md-6 col-xs-12">
                <div class="col-xs-12 row">
                    <div class="col-xs-4 highlightBold">Files</div>
                    <div class="col-xs-4 highlightBold">All Activity</div>
                    <div class="col-xs-4 highlightBold">Past 30 Days</div>
                </div>
                <div class="col-xs-12 row">
                    <div class="col-xs-4 activity-label">Downloaded</div>
                    <div class="col-xs-4 h4 lite-header" id="activityAllTimeAllDownloadsValue"><span class="text-muted">...</span></div>
                    <div class="col-xs-4 h4 lite-header" id="activity30DaysAllDownloadsValue"><span class="text-muted">...</span></div>
                </div>
                <div class="col-xs-12 row">
                    <div class="col-xs-4 activity-label">Deposited</div>
                    <div class="col-xs-4 h4 lite-header" id="activityAllTimeDepositedFilesValue"><span class="text-muted">...</span></div>
                    <div class="col-xs-4 h4 lite-header" id="activity30DaysDepositedFilesValue"><span class="text-muted">...</span></div>
                </div>
            </div>

        </div>
    </div>
    <!-- END: ACTIVITY -->

    <hr class="heavy-rule"/>

<script type="text/javascript">
//<![CDATA[

    //switch baseUrl to point to a different server than the local box
    var baseUrl = ""; 

    // NOTE: REMOVED THUMBNAILS
    // var thumbBaseURL = baseUrl + "/api/datasets/:persistentId/thumbnail" + "?persistentId=";
    var metricBaseUrl = baseUrl + "/api/info/metrics/";
    var simpleCatSearch = baseUrl + "/api/search?q=*&type=dataset&sort=dateSort&order=desc&fq=categoryOfDataverse:";

    function writeRecentDatasetsInDataverses(fqString, resultCount, elm) {
        $.get(simpleCatSearch + fqString + "&per_page=" + resultCount, function(jData) {
            var resultHtml = "";
            jData.data.items.forEach(function(item){
                var options = { year: 'numeric', month: 'short', day: 'numeric' };
                var date = new Date(item.published_at).toLocaleString('en-US', options);
                resultHtml += "<div class=\"hmpg-recent-block clearfix\">";
                // NOTE: REMOVED THUMBNAILS
                // resultHtml += "<div class=\"col-xs-2 text-center hmpg-recent-thumb\"><a href=\"/dataset.xhtml?persistentId=" + item.global_id + "\">";
                // resultHtml += "<object data=\"" + thumbBaseURL + item.global_id + "\" type=\"image/png\"/><span class=\"icon-dataset\"></span></object>";
                // resultHtml += "</a></div>";
                // NOTE: REMOVED THUMBNAILS... in next line, change grid layout class to `col-xs-9 col-md-10`
                resultHtml += "<div class=\"col-xs-12 hmpg-recent-metadata\"><p><a href=\"/dataset.xhtml?persistentId=" + item.global_id + "\">" + item.name + "</a></p><p class=\"small text-muted\"><a href=\"/dataverse/" + item.identifier_of_dataverse + "\" class=\"highlightBold\">" + item.name_of_dataverse + "</a> " + date + "</p></div>";
                resultHtml += "</div>";
            });
            document.getElementById(elm).innerHTML = resultHtml;
        });
    }
    
    //For metrics that return simple json with a count
    //Can take a single element or an array of elements
    function queryMetricSimple(metricRelPath, month, elm) {
        $.get(metricBaseUrl + metricRelPath + month, function(jData) {
            var resultCount = jData.data.count;
            if(Array.isArray(elm)) {
                elm.forEach(function(e) {
                    document.getElementById(e).innerHTML = resultCount.toLocaleString('en');
                });
            } else {
                document.getElementById(elm).innerHTML = resultCount.toLocaleString('en');
            }
        });
    }
    
    function queryMetricSearch(metricRelPath, month) {
        $.get(metricBaseUrl + metricRelPath + month, function(jData) {
            var resultCount = jData.data.count;
            var roundedDatasetCount = Math.floor(resultCount / 100) * 100;
            var dynamicSearchPlaceholder = "Search over " + roundedDatasetCount.toLocaleString('en') + " datasets...";
            $("#inputDataverseSearch").attr({"placeholder" : dynamicSearchPlaceholder});
        });
    }
    
    function querySubjectDataverseDataset(elm) {
        var dvArray = [];
        var fullArray = [];
        $.ajax({url: metricBaseUrl + "dataverses/bySubject", headers: { "Accept": "application/json" }, success: function(jData) {
            jData.data.forEach(function(item) {
                if(item.subject !== "N/A" && item.subject !== "Other") {
                    dvArray.push([item.subject, item.count]);
                }
            });
            $.ajax({url: metricBaseUrl + "datasets/bySubject?dataLocation=all", headers: { "Accept": "application/json" }, success: function(jData) {
                var resultHtml = "";
                jData.data.forEach(function(item) {
                    if(item.subject !== "N/A" && item.subject !== "Other") {
                        var dvCount = 0;
                        for (var dvi = 0; dvi < dvArray.length; dvi++) {
                            if(item.subject === dvArray[dvi][0]) {
                                dvCount = dvArray[dvi][1];
                                break;
                            }
                        }
                        fullArray.push([item.subject, (item.count + dvCount -1).toLocaleString('en')]); //subtract 1 to remove root dv from counts
                    }
                });
                fullArray.sort();
                fullArray.forEach(function(subject){
                    // NOTE: The alias of the root dataverse will need to be configured in this URL 
                    resultHtml += "<p class=\"browse-subjects\"><a href=\"/dataverse/ucsb?q=&fq0=subject_ss%3A%22" + subject[0] + "%22&types=dataverses%3Adatasets&sort=dateSort&order=desc\">" + subject[0] + "</a> <span class=\"text-muted\">" + subject[1] + "</span></p>";
                });
                document.getElementById(elm).innerHTML = resultHtml;
            }});
        }});
    }

    // queryMetricSimple("datasets", "?dataLocation=all", ["headAllTimeAllDatasetsValue", "activityAllTimeAllDatasetsValue"]);
    // queryMetricSimple("downloads", "", ["headAllTimeAllDownloadsValue", "activityAllTimeAllDownloadsValue"]);
    // queryMetricSimple("dataverses", "", "headAllTimeAllDataversesValue");

    queryMetricSimple("datasets", "?dataLocation=all", "activityAllTimeAllDatasetsValue");
    queryMetricSimple("downloads", "", "activityAllTimeAllDownloadsValue");

    writeRecentDatasetsInDataverses("(Journal)" , 3, "journals");
    writeRecentDatasetsInDataverses("(\"Research+Project\"%20OR%20Researcher%20OR%20\"Research+Group\")" , 3, "researchers");
    
    queryMetricSimple("datasets/pastDays", "/30?dataLocation=all", "activity30DaysAllDatasetsValue");
    queryMetricSimple("datasets", "?dataLocation=local", "activityAllTimeDepositedDatasetsValue");
    queryMetricSimple("datasets/pastDays", "/30?dataLocation=local", "activity30DaysDepositedDatasetsValue");
    queryMetricSimple("datasets", "?dataLocation=remote", "activityAllTimeHarvestedDatasetsValue");
    queryMetricSimple("datasets/pastDays", "/30?dataLocation=remote", "activity30DaysHarvestedDatasetsValue");

    queryMetricSimple("downloads/pastDays", "/30", "activity30DaysAllDownloadsValue");
    queryMetricSimple("files", "", "activityAllTimeDepositedFilesValue");
    queryMetricSimple("files/pastDays", "/30", "activity30DaysDepositedFilesValue");

    querySubjectDataverseDataset("dataversesBySubject");
    queryMetricSearch("datasets", "?dataLocation=all");
//]]>
</script>