Add documentation splash screen and server-specific documentation cap…

…ability.

Adds documentation splash screen (not yet including images).

Adds documentation module for client-specific in-line documentation, and ability for clients to provide their own first page and last page to the splash screen.

PiperOrigin-RevId: 428492449

documentation/api.md

@@ -769,6 +769,12 @@ to `dev_server.Server()`. These include:
     the section below for available layouts.
 *   `demo_mode`: demo / kiosk mode, which disables some functionality (such as
     save/load datapoints) which you may not want to expose to untrusted users.
+*   `inline_doc`: a markdown string that will be rendered in a documentation
+    module in the main LIT panel.
+*   `onboard_start_doc`: a markdown string that will be rendered as the first
+    panel of the LIT onboarding splash-screen.
+*   `onboard_end_doc`: a markdown string that will be rendered as the last
+    panel of the LIT onboarding splash-screen.
 
 For detailed documentation, see
 [server_flags.py](../lit_nlp/server_flags.py).

lit_nlp/app.py

@@ -123,6 +123,9 @@ def _build_metadata(self):
         'defaultLayout': self._default_layout,
         'canonicalURL': self._canonical_url,
         'pageTitle': self._page_title,
+        'inlineDoc': self._inline_doc,
+        'onboardStartDoc': self._onboard_start_doc,
+        'onboardEndDoc': self._onboard_end_doc,
     }
 
   def _get_model_spec(self, name: Text):
@@ -409,6 +412,9 @@ def __init__(
       canonical_url: Optional[str] = None,
       page_title: Optional[str] = None,
       development_demo: bool = False,
+      inline_doc: Optional[str] = None,
+      onboard_start_doc: Optional[str] = None,
+      onboard_end_doc: Optional[str] = None,
   ):
     if client_root is None:
       raise ValueError('client_root must be set on application')
@@ -417,6 +423,9 @@ def __init__(
     self._default_layout = default_layout
     self._canonical_url = canonical_url
     self._page_title = page_title
+    self._inline_doc = inline_doc
+    self._onboard_start_doc = onboard_start_doc
+    self._onboard_end_doc = onboard_end_doc
     self._data_dir = data_dir
     self._layouts = layouts or {}
     if data_dir and not os.path.isdir(data_dir):

lit_nlp/client/core/app_statusbar.css

@@ -112,7 +112,7 @@ mwc-icon.icon-button:hover {
   width: 80vw;
   box-sizing: border-box;
   background-color: white;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+  box-shadow: var(--lit-box-shadow);
   display: flex;
   flex-direction: column;
   justify-content: space-between;

lit_nlp/client/core/app_toolbar.ts

@@ -21,6 +21,7 @@
 
 // tslint:disable:no-new-decorators
 import '@material/mwc-icon';
+import './documentation';
 import './global_settings';
 import './main_toolbar';
 
@@ -37,13 +38,15 @@ import {AppState, ModulesService, SettingsService, StatusService} from '../servi
 
 import {app} from './app';
 import {styles} from './app_toolbar.css';
+import {DocumentationComponent} from './documentation';
 import {GlobalSettingsComponent, TabName} from './global_settings';
 
 /**
  * The header/toolbar of the LIT app.
  */
 @customElement('lit-app-toolbar')
 export class ToolbarComponent extends MobxLitElement {
+  @query('lit-documentation') docElement!: DocumentationComponent;
   @query('lit-global-settings') globalSettingsElement!: GlobalSettingsComponent;
 
   static override get styles() {
@@ -64,6 +67,15 @@ export class ToolbarComponent extends MobxLitElement {
     }
   }
 
+  toggleDocumentation() {
+    if (this.docElement === undefined) return;
+    if (this.docElement.isOpen) {
+      this.docElement.close();
+    } else {
+      this.docElement.open();
+    }
+  }
+
   jumpToSettingsTab(targetTab: TabName) {
     if (this.globalSettingsElement === undefined) return;
     if (this.globalSettingsElement.isOpen &&
@@ -246,7 +258,15 @@ export class ToolbarComponent extends MobxLitElement {
 
   renderRightCorner() {
     // clang-format off
+    const docButton = this.appState.metadata != null ?
+        html`
+          <mwc-icon class="icon-button"
+            title="Documentation"
+            @click=${this.toggleDocumentation}>
+            help_outline
+          </mwc-icon>` : null;
     return html`
+      ${docButton}
       <button class='headline-button unbordered' title="Copy link to this page"
         @click=${this.onClickCopyLink}>
         <span class='material-icon'>link</span>
@@ -266,6 +286,8 @@ export class ToolbarComponent extends MobxLitElement {
     return html`
       ${this.appState.initialized ?
         html`<lit-global-settings></lit-global-settings>` : null}
+      ${this.appState.metadata != null ?
+        html`<lit-documentation></lit-documentation>` : null}
       <div id="at-top">
         <div id="headline">
           <div class="headline-section">

lit_nlp/client/core/documentation.css

@@ -0,0 +1,103 @@
+#doc-holder {
+  width: 0;
+  height: 0;
+  z-index: 4;
+  position: fixed;
+}
+
+#overlay {
+  background: rgba(4, 29, 51, .47);
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  transition: opacity 250ms;
+}
+
+#overlay.hide {
+  opacity: 0;
+  visibility: hidden;
+}
+
+#doc {
+  font-family: 'Google Sans';
+  position: absolute;
+  top: 30vh;
+  left: 27vw;
+  height: 40vh;
+  width: 46vw;
+  padding: 16px 8px 8px 8px;
+  box-sizing: border-box;
+  background-color: white;
+  box-shadow: var(--lit-box-shadow);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#doc.hide {
+  display: none;
+}
+
+a {
+  text-decoration: none;
+  color: var(--lit-neutral-700);
+  padding: 0 5pt;
+}
+
+#holder {
+  padding: 12pt;
+  height: calc(100% - 48pt);
+}
+
+.page-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.prev-next-container {
+  display: flex;
+}
+
+.dot {
+  height: 12px;
+  width: 12px;
+  margin: 6px;
+  background-color: var(--lit-neutral-500);
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.filled {
+  background-color: var(--lit-cyea-500);
+}
+
+.nav-button {
+  width: 94px;
+}
+
+.dots-line {
+  margin: auto;
+}
+
+.dots-holder {
+  display: flex;
+}
+
+.checkbox {
+  color: var(--lit-neutral-700);
+}
+
+.doc-open-icon {
+  --mdc-icon-size: 14px;
+  vertical-align: middle;
+}
+
+.nav-icon {
+  margin: 0 4px;
+}