app/views/ontologies/browse.html.erb
<link href="font/whhg.css"rel="stylesheet" type="text/css" media="all" />
<link href="//cdnjs.cloudflare.com/ajax/libs/unsemantic/0/unsemantic-grid-responsive-tablet.css" rel="stylesheet" type="text/css" media="screen" />
<meta name="viewport" content="
width=device-width,
initial-scale=1,
minimum-scale=1,
maximum-scale=1
" />
<main class="flex-shrink-0" role="main">
<div class="container-fluid">
<div id="angular-notices">
<%=render partial: 'layouts/notices'%>
</div>
<div class="splash" ng-cloak>
<div style="font-size: 3em;">Ontologies loading</div>
<p>please wait...</p>
</div>
</div>
<div class="grid-container" style="margin-bottom: 1em; margin-top: 1em;" ng-cloak>
<h1 style="font-size: 3em;">Browse</h1>
<p>
<%= t('ontologies.intro').html_safe %>
<%= link_to(Rails.configuration.settings.links[:help_ontology_browse], id: 'ontology-browse-help',
'aria-label': 'View ontology browse help') do %>
<i class='fas fa-question-circle fa-lg' aria-hidden='true'></i>
<% end %>
</p>
<div ng-controller="OntologyList">
<div class="welcome_admin admin" ng-show="admin">
<b>Welcome admin</b><br/>This coloring indicates admin-only features
</div>
<div ng-show="debug" class="facet" style="position: relative;">
<h2>Debug Info</h2>
types: {{facets.types.active}}<br/>
artifacts: {{facets.artifacts.active}}<br/>
formats: {{facets.formats.active}}<br/>
groups: {{facets.groups.active}}<br/>
categories: {{facets.categories.active}}<br/>
Selected ontologies: {{visible_ont_count}}
</div>
<div id="facets" class="grid-20">
<%if session[:user].nil?%>
<a class="new_ontology_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/login?redirect=/ontologies/new">
<span class="ui-button-text">Submit New Ontology</span>
</a>
<%else%>
<a class="new_ontology_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/ontologies/new">
<span class="ui-button-text">Submit New Ontology</span>
</a>
<%end%>
<div id="ont_view_facet" class="facet">
<h4>Entry Type</h4>
<div class="checkbox_list">
<span ng-repeat="type in types | toArray | orderBy:'sort'">
<input type="checkbox" checklist-model="facets.types.active" checklist-value="type.id" id="include_{{type.id}}" name="include_{{type.id}}" ng-disabled="!facet_counts['types'][type.id]">
<label for="include_{{type.id}}" ng-class="{facet_disabled: !facet_counts['types'][type.id]}">
{{type.id | idToTitle}}
<span class="smaller">({{facet_counts["types"][type.id] || 0}})</span>
</label>
<br/>
</span>
</div>
</div>
<div id="upload_date_facet" class="facet">
<h4>Uploaded in the Last</h4>
<div class="checkbox_list">
<select ng-model="facets.upload_date.active" ng-change="ontologySortOrder('-creationDate')">
<option ng-repeat="day in facets.upload_date.day_text" value="{{facets.upload_date.values[day]}}">
{{day | idToTitle}}
</option>
</select>
</div>
</div>
<div id="category_facet" class="facet">
<h4>Category</h4>
<div class="checkbox_list">
<span ng-repeat="category in categories">
<input type="checkbox" checklist-model="facets.categories.active" checklist-value="category.id" name="category" id="category_{{category.acronym}}" ng-disabled="!facet_counts['categories'][category.id]">
<label for="category_{{category.acronym}}" ng-class="{facet_disabled: !facet_counts['categories'][category.id]}">{{category.name}}</label>
<span class="smaller">({{facet_counts["categories"][category.id] || 0}})</span>
<br/>
</span>
</div>
</div>
<div id="group_facet" class="facet">
<h4>Group</h4>
<div class="checkbox_list">
<span ng-repeat="group in groups">
<input type="checkbox" checklist-model="facets.groups.active" checklist-value="group.id" name="group" id="group_{{group.acronym}}" ng-disabled="!facet_counts['groups'][group.id]">
<label for="group_{{group.acronym}}" title="{{group.name}}" ng-class="{facet_disabled: !facet_counts['groups'][group.id]}">{{group.acronym}}</label>
<span class="smaller">({{facet_counts["groups"][group.id] || 0}})</span>
<br/>
</span>
</div>
</div>
<div id="format_facet" class="facet">
<h4>Format</h4>
<div class="checkbox_list">
<span ng-repeat="format in formats">
<input type="checkbox" checklist-model="facets.formats.active" checklist-value="format" name="format" id="format_{{format}}" ng-disabled="!facet_counts['formats'][format]">
<label for="format_{{format}}" ng-class="{facet_disabled: !facet_counts['formats'][format]}">{{format}}</label>
<span class="smaller">({{facet_counts["formats"][format] || 0}})</span>
<br/>
</span>
</div>
</div>
<div id="missing_status_facet" class="facet admin" ng-show="admin">
<h4>Missing Status</h4>
<div class="checkbox_list">
<select ng-model="facets.missing_status.active">
<option ng-repeat="status in facets.missing_status.values" value="{{status}}">
{{status | idToTitle}}
</option>
</select>
</div>
</div>
<div id="admin_facet" class="facet admin" ng-show="admin">
<h4>Admin Only</h4>
<div class="checkbox_list">
<span ng-repeat="artifact in artifacts">
<input type="checkbox" checklist-model="facets.artifacts.active" checklist-value="artifact" name="artifact" id="artifact_{{artifact}}" ng-disabled="!facet_counts['artifacts'][artifact]">
<label for="artifact_{{artifact}}" ng-class="{facet_disabled: !facet_counts['artifacts'][artifact]}">{{artifact | idToTitle}}</label>
<span class="smaller">({{facet_counts["artifacts"][artifact] || 0}})</span>
<br/>
</span>
</div>
</div>
</div>
<div id="ontologies" class="grid-80">
<div id="searching">
<input type="text" placeholder="Search…" ng-model="searchText" ng-model-options="{debounce: 100}" class="search">
</div>
<div id="sorting" ng-show="visible_ont_count" style="margin-bottom: 2em;">
<div id="sorting_float">
<span style="padding: 7px 7px 4px;" id="visible_ont_count">Showing {{visible_ont_count}} of {{ontologies.length}}</span>
<label for="sort_order">Sort:</label>
<select ng-model="ontology_sort_order">
<option value="-popularity" selected="selected">Popular</option>
<option value="name">Name</option>
<option value="-class_count">Classes count</option>
<option value="-individual_count">Instances/Concepts count</option>
<option value="-project_count">Projects</option>
<option value="-note_count">Notes</option>
<option value="-creationDate">Upload Date</option>
<option value="-search_rank" ng-show="searchText.length > 0">Search Rank</option>
</select>
</div>
</div>
<div class="ontology" ng-show="visible_ont_count == 0" style="border: solid thin lightGray;">
<div style="text-align: center; color: gray; height: 2em; padding: 4em;">
<h2 style="font-weight: normal;">No matches!</h2>
</div>
</div>
<div class="ontology grid-parent clearfix" ng-repeat="ontology in ontologies | orderBy:ontology_sort_order" ng-if="ontology.show">
<div class="grid-75">
<div ng-if="ontology.type == 'ontology_view'" class="ontology_view_badge" title="This ontology is a view of {{ontology.viewOfOnt.name}}">VIEW</div>
<h2 style="font-size: 1.5em;">
<a href="/ontologies/{{ontology.acronym}}">
<span ng-if="debug">{{$index}} </span>
{{ontology.name}} ({{ontology.acronym}})
</a>
<i title="Private Ontology" ng-if="ontology.private" class="icon-key locked_ont"></i>
</h2>
<div ng-if="ontology.submission">
<p style="margin-bottom: 5px;">{{ontology.description | descriptionToText}}</p>
<span class="ont-info">
<b>Uploaded</b>: {{ontology.creationDate | date:'shortDate'}}
</span>
<span class="ont-info" ng-if="facets.formats.active.length > 1">
<b>Format</b>: {{ontology.format}}
</span>
<span class="ont-info" ng-if="ontology.type == 'ontology_view'">
<b>View of</b>: <a href="/ontologies/{{ontology.viewOfOnt.acronym}}">{{ontology.viewOfOnt.acronym}}</a>
</span>
<span class="ont-info" ng-if="ontology.summaryOnly">
<b>Summary Only</b>
</span>
<span class="ont-info" ng-if="facets.groups.active.length > 1">
<b>Groups</b>: {{groupAcronyms(ontology.groups).join(', ')}}
</span>
<span class="ont-info" ng-if="facets.categories.active.length > 1">
<b>Categories</b>: {{categoryNames(ontology.categories).join(', ')}}
</span>
<span>
<span class="ont-info admin" ng-if="admin">
<b>Admins</b>: {{adminUsernames(ontology.administeredBy).join(', ')}}
</span>
<span class="ont-info admin" ng-if="admin && ontology.pullLocation">
<b><a href="{{ontology.pullLocation}}">Pull URL</a></b>
</span>
<span class="ont-info admin" ng-if="admin && ontology.submission">
<b>Status</b>: {{ontology.submissionStatusFormatted}}
</span>
</span>
</div>
<span ng-hide="ontology.submission">No submissions available</span>
</div>
<div class="badges grid-25 grid-parent" ng-if="ontology.submission !== null && ontology.class_count > 0">
<a href="/ontologies/{{ontology.acronym}}?p=classes" ng-if="ontology.format !== 'SKOS'">
<div class="grid-50 badge_grid">
<div class="ontology_badge">
<div class="badge_title">classes</div>
<div class="badge_count">{{ontology.class_count_formatted}}</div>
</div>
</div>
</a>
<a href="/ontologies/{{ontology.acronym}}?p=classes" ng-if="ontology.individual_count > 0 ">
<div class="grid-50 badge_grid">
<div class="ontology_badge">
<div class="badge_title">{{ontology.format === 'SKOS' ? "concepts" : "instances"}}</div>
<div class="badge_count">{{ontology.individual_count_formatted}}</div>
</div>
</div>
</a>
<a href="/ontologies/{{ontology.acronym}}#projects_content">
<div class="grid-50 badge_grid" ng-if="ontology.projects.length > 0">
<div class="ontology_badge">
<div class="badge_title">projects</div>
<div class="badge_count">{{ontology.projects.length}}</div>
</div>
</div>
</a>
<a href="/ontologies/{{ontology.acronym}}?p=notes">
<div class="grid-50 badge_grid" ng-if="ontology.notes.length > 0">
<div class="ontology_badge">
<div class="badge_title">notes</div>
<div class="badge_count">{{ontology.notes.length}}</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
jQuery(document).data().bp.ontologies = <%=MultiJson.dump(@ontologies[0..19]).html_safe%>;
jQuery(document).data().bp.fullOntologies = <%=MultiJson.dump(@ontologies).html_safe%>;
jQuery(document).data().bp.categories = <%=MultiJson.dump(@categories).html_safe%>;
jQuery(document).data().bp.categories_hash = <%=MultiJson.dump(@categories_hash).html_safe%>;
jQuery(document).data().bp.groups = <%=MultiJson.dump(@groups).html_safe%>;
jQuery(document).data().bp.groups_hash = <%=MultiJson.dump(@groups_hash).html_safe%>;
jQuery(document).data().bp.formats = <%=MultiJson.dump(@formats).html_safe%>;
jQuery(document).data().bp.admin = <%=MultiJson.dump(@admin).html_safe%>;
jQuery(document).data().bp.development = <%=MultiJson.dump(@development).html_safe%>;
</script>
<script src="lib/lunr.js/lunr.min.js"></script>