user-interface.ttl

@prefix ldh:    <https://w3id.org/atomgraph/linkeddatahub#> .
@prefix rdf:    <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix dh:     <https://www.w3.org/ns/ldt/document-hierarchy#> .
@prefix dct:    <http://purl.org/dc/terms/> .
  
<> a dh:Item ;
    dct:title "User interface" ;
    dct:description "A walk through the main features of application user interface" ;
    rdf:_1 <#content> .
    
<#content> a ldh:XHTML ;
    rdf:value """<div xmlns="http://www.w3.org/1999/xhtml">
    <p class="lead">This guide walks through the main features of LinkedDataHub user interface.
        See the <a href="../data-model/">Data model</a> guide for definitions of LinkedDataHub components such documents, content blocks, and resources.</p>
    <p>User interface is only one of the interfaces LinkedDataHub provides. The other one is the <a href="../command-line-interface/">
        Command line interface</a>, which supports most of the UI actions.</p>
    <p>The UI layout <a href="../../user-guide/change-layout/" target="_blank">can be customized</a> and extended using <a href="../../reference/stylesheets/" target="_blank">stylesheets</a>.</p>
    <div class="alert alert-info">
        <p><em>Note that user interface features are subject to <a href="../administration/acl/">access control</a>. For example,
            actions such as creating or editing documents are only available to users with the corresponding write access.</em></p>
    </div>
    <p>
        <img alt="User interface" src="../../uploads/df0b96b07dc6730536cb11d169ed34dfb25ea403"></img>
    </p>
    <div>
        <h2 id="nav-bar">Navigation bar</h2>
        <p>
            <img alt="Navigation bar" src="../../uploads/ec8cb7afb9cf360c34e859f97646642eb0331518"></img>
        </p>
        <p>The application title or logo in the top-left always links to the root container of the current application.</p>
        <p>The <dfn>address bar</dfn> in the middle accepts the URI of a resource to navigate to. Entering an external <code>http://</code> or <code>https://</code> URL loads it through the <a href="../http-api/#linked-data-proxy">Linked Data proxy</a> so that it can be browsed within LinkedDataHub.</p>
        <p>On the right, dropdown menus provide access to the list of applications and to your user account.</p>
        <div class="alert alert-info">
            <p><em>Due to current web browser limitations, it is not possible to logout using client certificate authentication.
              As a workaround, you can close the browser, and click <span class="btn">Cancel</span> when asked to select a
              certificate the next time.</em></p>
        </div>
    </div>
    <div>
        <h2 id="action-bar">Action bar</h2>
        <p>
            <img alt="Action bar" src="../../uploads/8a141225e1e96418aeb61da51b3b737454d9c01f"></img>
        </p>
        <p>The <span class="btn btn-primary create-action">Create <span class="caret"></span></span> button opens a dialog through which
        <a href="../data-model/documents/">documents</a> can be created.</p>
        <p>The path leading from the current document up the parent/child hierarchy to the root container is shown in
        the <dfn>breadcrumb bar</dfn>, where the current document is always the last breadcrumb. The user can always
        open any of the ascendant containers by clicking breadcrumbs left from the current one. The icon shows the
        type of the current document (<a href="../data-model/documents/containers/">container</a> or <a href="../data-model/documents/items/">item</a>). A label is displayed when the URL currently being browsed is external.</p>
        <p>Further to the right, the action bar displays buttons for performing actions on the current document.</p>
        <p>Last but not least, the settings button provides a link to the <a href="../administration/">administration</a>
        application.</p>
        <div class="alert alert-info">
            <p><em>Only administration users have access to the administration application.</em></p>
        </div>
    </div>
    <div>
        <h2 id="document-tree">Left sidebar</h2>
        <p>The left sidebar is the main way to navigate your data. At the top, the <dfn>search box</dfn> finds resources within the current application that have the specified keyword in their titles, descriptions etc.; results are shown in a dropdown list. Below the search box, the sidebar offers complementary ways to browse the dataspace — by document hierarchy, by class, and through a few other data-driven views.</p>
        <h3 id="document-hierarchy">Document hierarchy navigation</h3>
        <p>Document tree shows the document hierarchy of the dataspace. By clicking on a container, it expands to show its children.</p>
        <p>In a desktop layout mode, the document tree folds out when the mouse is moved to the left edge of the screen. In a responsive layout, it is always shown.</p>
        <h3 id="class-navigation">Class-based navigation</h3>
        <p>In addition to browsing by document hierarchy, you can navigate your data by class. The <dfn>Classes</dfn> list shows the classes (<code>rdf:type</code> values) that actually occur in the dataspace, each labelled with the number of its instances and ordered with the most-used classes first. Clicking a class opens a dialog listing all instances of that class across the dataspace.</p>
        <p>Class-based navigation is particularly useful when:</p>
        <ul>
            <li>You want to see all instances of a particular type across your entire dataspace</li>
            <li>You need to browse data organized by domain concepts rather than container structure</li>
        </ul>
        <p>Because the list is derived from the data itself, it reflects whatever types are present — you do not need to define an ontology or class hierarchy. It also respects your <a href="../administration/acl/">access control</a> settings: you only see classes and instances you are authorized to access.</p>
        <h3 id="other-views">Other views</h3>
        <p>Below the classes, the sidebar provides a couple of additional data-driven views of the dataspace:</p>
        <dl>
          <dt>Geo</dt>
          <dd>Opens a dialog listing all resources in the dataspace that have geographic coordinates.</dd>
          <dt>Latest</dt>
          <dd>Opens a dialog listing the most recently created resources in the dataspace, newest first.</dd>
        </dl>
    </div>
    <div>
        <h2 id="right-nav">Right sidebar</h2>
        <p>A right sidebar appears alongside the main view to show navigation into and out of the current data:</p>
        <dl>
            <dt>Backlinks</dt>
            <dd>In <a href="#layout-modes">properties mode</a>, lists resources that link <em>to</em> a resource in the current document — that is, resources that have a property whose value is the current resource. This complements the outgoing properties shown in the main view.</dd>
            <dt>Related results</dt>
            <dd>For <a href="../data-model/resources/views/#parallax">view</a> result sets, <dfn>parallax</dfn> navigation lets you jump from the current results to a related set by following a selected property (for example, from a set of products to the companies that supply them). It works together with the view's faceted search.</dd>
        </dl>
    </div>
    <div>
        <h2 id="layout-modes">Layout modes</h2>
        <p>The active document <dfn>layout mode</dfn> is displayed, and can be changed using, the nav tabs at the top of the page.</p>
        <p>Currently supported document layout modes:</p>
        <dl>
            <dt>Content</dt>
            <dd>List of <a href="../data-model/blocks/">content blocks</a>. Shown only if the current document has items in its content list or there is a content template defined for its type.</dd>
            <dt>Properties</dt>
            <dd>The most detailed view showing every property/value of every <a href="../data-model/resources/">resource</a> in the current document.</dd>
            <dt>Map</dt>
            <dd>Shows an interacitve map with all <a href="../data-model/resources/">resources</a> in the current document that have geo coordinates</dd>
            <dt>Chart</dt>
            <dd>Renders the metadata of the <a href="../data-model/resources/">resources</a> in the current document as a chart with (multiple chart types are supported, such as table, scatter chart, timeline etc.)</dd>
            <dt>Graph</dt>
            <dd>Renders <a href="../data-model/resources/">resources</a> in the current document graphically as nodes in an interactive 3D network using a
            force-directed layout. Clicking a node shows its details, double-clicking loads the resource, and right-clicking a URI node loads its backlinks (resources pointing at it).
            The canvas can be toggled to fullscreen (press <kbd>Esc</kbd> to exit), and the graph state is preserved across search and filter re-renders.</dd>
        </dl>
    </div>
    <div>
        <h2 id="document-tabs">Document tabs</h2>
        <p>LinkedDataHub navigates within a single page. When you follow a link to an external document (for example a resource fetched through the
            <a href="../http-api/#linked-data-proxy">Linked Data proxy</a>), it opens in its own tab so that several documents can be kept open side by side.
            A sticky tab bar appears at the top of the page once the first external tab is opened.</p>
        <p>Each tab keeps its own content pane, and modal dialogs (such as creation and edit forms) are scoped to the active tab pane. Switching between tabs is cached, so
            returning to a previously opened tab does not re-fetch it. Closing a tab removes its pane and falls back to the base document's tab.</p>
    </div>
    <div>
        <h2 id="creation-bar">Creation bar</h2>
        <p>The creation bar serves different functions depending on the current mode:</p>
        <dl>
            <dt>Content</dt>
            <dd>Appends new content blocks to the page</dd>
            <dt>Properties</dt>
            <dd>Creates new resource of the selected type</dd>
        </dl>
    </div>
</div>"""^^rdf:XMLLiteral .