graphdb-workbench/dist/pages/domainRangeInfo.html

The web application for GraphDB APIs

<link href="css/domain-range-graph.css?v=3.3.0-TR3" rel="stylesheet"/>
<link href="css/rdf-details-side-panel.css?v=3.3.0-TR3" rel="stylesheet"/>

<title>Explore Data Graph</title>

<h1>
    {{title}}
    <span class="btn btn-link"
          ng-class="{ 'help-button': showExternalElements, 'help-button-disabled': !showExternalElements && !(!loader && !classHierarchyData.children.length) }"
          uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
          popover-trigger="mouseenter"
          popover-placement="bottom-right"
          popover-append-to-body="true"><span class="ri-information-2-line text-tertiary"></span></span>
</h1>

<div class="explore">
    <div class="toolbar-holder pull-right"
         ng-class="{ 'pushed-toolbar': showPredicatesInfoPanel }">
        <button class="btn btn-link p-0" type="button"
                ng-click="goToClassHierarchyView()"
                gdb-tooltip="{{'back.to.class.hierarchy.label' | translate}}"
                tooltip-placement="bottom">
            <em class="ri-arrow-left-circle-line ri-2x"></em>
        </button>

        <button class="btn btn-link p-0 compact-mode-toggle" type="button"
                ng-click="toggleCollapseEdgesState()"
                gdb-tooltip="{{collapseEdges ? 'show.preds' : 'show.collapsed.preds' | translate}}"
                tooltip-placement="bottom">
            <em class="fa fa-2x"
                ng-class="{'fa-toggle-off': collapseEdges, 'fa-toggle-on':!collapseEdges}"></em>
        </button>

        <a id="download-svg" href class="btn btn-link p-0"
           gdb-tooltip="{{'export.diagram.tooltip' | translate}}"
           tooltip-placement="bottom">
			<em class="ri-upload-2-line ri-2x"></em>
		</a>
    </div>
    <div class='explore_results'>
        <domain-range-graph
             show-predicates-info-panel="showPredicatesInfoPanel"
             selected-predicate="selectedPredicate"
             collapse-edges="collapseEdges">
        </domain-range-graph>

        <pageslide
             ps-class="rdf-info-side-panel"
             ps-open="showPredicatesInfoPanel"
             onopen="onopen"
             onclose="onclose"
             ps-side="right"
             ps-custom-height="calc(100vh - 55px)"
             ps-size="25vw">
            <div class="rdf-side-panel-content break-word-alt p-1">
                <button class="close mb-1 ml-1" ng-click="showPredicatesInfoPanel = false"></button>

                <h3 ng-switch on="sourceTargetObjectNodeName" class="hovered-parent">
                    <p ng-switch-when="&lt;i&gt;Literal&lt;/i&gt;"
                       ng-bind-html="sourceTargetObjectNodeName"></p>
                    <a class="uri"
                       href="resource?uri={{encodedSourceTargetObjectNodeUri}}"
                       ng-switch-default>
                        {{sourceTargetObjectNodeName}}
                    </a>
                    <button ng-show="sourceTargetObjectNodeName.indexOf('Literal') == -1" class="btn btn-link btn-sm p-0" title="{{'copy.to.clipboard.modal.ok.btn' | translate}}" ng-click="copyToClipboard(sourceTargetObjectNodeUri)">
                        <span class="ri-links-line"></span>
                    </button>
                </h3>

                <rdfs-comment-label
                        rdfs-label="rdfsLabel"
                        rdfs-comment="rdfsComment"
                        expanded="expanded">
                </rdfs-comment-label>



                <div ng-switch on="predicatesObj.items.length">

                    <list-items-search-filter
                            filter-query-obj="predicatesQueryObj"
                            filter-function="predicatesListFilterFunc"
                            list-items-obj="predicatesObj"
                            list-items-not-filtered="predicatesListNotFiltered"
                            search-placeholder="{{predicatesSearchPlaceholder}}">
                    </list-items-search-filter>

                    <div class="rdf-not-found-container" ng-switch-when="0">
                        <div class="alert alert-warning rdf-not-found-alert">
                            <p class="rdf-not-found-label">{{'no.preds.found.label' | translate}}</p>
                        </div>
                    </div>

                    <ul ng-switch-default ui-scroll-viewport class="rdf-list">
                        <li ui-scroll='item in datasource' class="item clearfix break-word-alt" adapter="adapterContainer.adapter" padding='li'>
                            <a class="uri pull-left" href="resource?uri={{item.absUri}}">{{item.resolvedUri}}</a>
                            <button class="btn btn-link btn-sm p-0 hovered-item" title="{{'copy.to.clipboard.modal.ok.btn' | translate}}" ng-click="copyToClipboard(item.absUriNonEncoded)">
                                <span class="ri-links-line"></span>
                            </button>
                            <svg class="pull-right" ng-switch on="item.isImplicit" height="7" width="240">
                                <path ng-switch-when="true" class="property-type-list-item-legend"
                                      d="M5 45 l215 0"
                                      transform="translate(200, -45)"
                                      stroke-dasharray="3,3"/>
                                <path ng-switch-default class="property-type-list-item-legend"
                                      d="M5 45 l215 0"
                                      transform="translate(200, -45)"/>
                            </svg>
                        </li>
                    </ul>
                </div>
            </div>
        </pageslide>

        <div class="legend-container"></div>
    </div>
</div>