1.5. Presentation layer and user interface

Sema's presentation layer and user interface components provide the user with client-side navigation between dashboards with customizable layouts and a library of dynamic components (i.e., widgets such as code editors, visualizer, debugging tools).

The main panels—Playground and Tutorial—are implemented with Svelte component hierarchies and controlled by a client-side routing system as application routes. The client-side routing system (Sema uses Routify) allows the user to access and navigate between pages such as the Playground and each of the Tutorial subpages without server redirects, all with client-side, single page application behaviour. This will also allow deep-indexing, shareability, and better SEO in the future.

Routes are generated automatically based on the routes folder structure (https://github.com/mimic-sussex/sema/tree/master/client/routes). In the folder, there is a main container component and Svelte components for each main route or sub-routes, playground.svelte and tutorial/*.

In the Playground and Tutorial panels, Sema supports custom configurable layout and responsive dashboard behaviour, using a custom 3rd-party Svelte component svelte-grid.

In the Playground component, a sidebar component gives access to a library of widgets and the dashboard component enables the to user customize his workspace and freely explore the live coding, language design, and ML workflows.

<div class="container">
  <div class="sidebar-container">
    <Sidebar />
  </div>
  <div class="dashboard-container scrollable">
    <Dashboard  {items}
                {breakpoints}
                {cols}
                {rowHeight}
                {gap}
                on:update={ e => update(e) }
                />
  </div>
</div>

In the Tutorials panel, the user may engage in a guided tour with tutorials, each structured with a custom layout, different levels of granularity and gradually increased challenge. Each tutorial is implemented as a sub-route that the user can navigate to using the combo-box selector. All content—i.e. table of contents, tutorial content, layout, widgets content—is dynamic and populated from JSON service that is published with the website.

<div class="container">
  <div class="sidebar-container">
    <div class="sidebar">

      <div class="tutorial-navigator">
        <button class="button-dark left">
          ◄
        </button>

        <div class="combobox-dark middle">
        <select
                bind:value={ $selected }
                on:change={ e => handleSelect(e) }
                >
          {#if $tutorials !== undefined}
            {#each $tutorials as chapter, i}
              <optgroup label="{i + 1}. {chapter.title}">
                {#if chapter.sections !== undefined}
                  {#each chapter.sections as section, i}
                    <!-- <option value={section}>{String.fromCharCode(i + 97)}. {section.title}</option> -->
                    <option value={section}>{section.title}</option>
                  {/each}
                {/if}
              </optgroup>
            {/each}
          {/if}
        </select>
        </div>

        <button class="button-dark right">
          ►
        </button>

      </div>

      <!-- <Markdown /> -->
      <slot scoped={ $selected }>
      </slot>

    </div>
  </div>
  <div class="dashboard-container">
    <Dashboard  {items}
                {breakpoints}
                {cols}
                {rowHeight}
                {gap}
                />
  </div>
</div>