feat(widget): display an empty screen when no docmap is found (#215)

packages/widget/src/assets/index.ts

@@ -1,3 +1,4 @@
 // All files which will be accessible when the widget is installed via npm are declared here
 export * from './close-details-button';
-export * from './logo';
+export * from './logo-small';
+export * from './logo-large';

packages/widget/src/assets/logo-large.ts

@@ -0,0 +1,11 @@
+import { svg } from 'lit'
+
+export const logoLarge = svg`
+  <svg class='docmap-logo-large' width='133' height='133' viewBox='0 0 133 133' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path fill-rule='evenodd' clip-rule='evenodd' d='M41.9443 5.78261H14.2529C9.52991 5.78261 5.70117 9.66605 5.70117 14.4565V42.5435C5.70117 47.334 9.52991 51.2174 14.2529 51.2174H41.9443C46.6673 51.2174 50.496 47.334 50.496 42.5435V14.4565C50.496 9.66605 46.6673 5.78261 41.9443 5.78261ZM14.2529 0C6.38125 0 0 6.4724 0 14.4565V42.5435C0 50.5276 6.38124 57 14.2529 57H41.9443C49.816 57 56.1972 50.5276 56.1972 42.5435V14.4565C56.1972 6.47241 49.816 0 41.9443 0H14.2529Z' fill='#E2E2E2'/>
+    <path d='M0 104.5C0 88.7599 12.5802 76 28.0986 76C43.617 76 56.1972 88.7599 56.1972 104.5C56.1972 120.24 43.617 133 28.0986 133C12.5802 133 0 120.24 0 104.5Z' fill='#E2E2E2'/>
+    <path d='M76.8028 90.4565C76.8028 82.4724 83.184 76 91.0557 76H118.747C126.619 76 133 82.4724 133 90.4565V118.543C133 126.528 126.619 133 118.747 133H91.0557C83.184 133 76.8028 126.528 76.8028 118.543V90.4565Z' fill='#E2E2E2'/>
+    <path d='M0 104.5C0 88.7599 12.5802 76 28.0986 76C43.617 76 56.1972 88.7599 56.1972 104.5C56.1972 120.24 43.617 133 28.0986 133C12.5802 133 0 120.24 0 104.5Z' fill='#E2E2E2'/>
+    <path d='M76.8028 90.4565C76.8028 82.4724 83.184 76 91.0557 76H118.747C126.619 76 133 82.4724 133 90.4565V118.543C133 126.528 126.619 133 118.747 133H91.0557C83.184 133 76.8028 126.528 76.8028 118.543V90.4565Z' fill='#E2E2E2'/>
+  </svg>
+`;

packages/widget/src/assets/logo-small.ts

@@ -0,0 +1,11 @@
+import { svg } from 'lit';
+
+export const logoSmall = svg`
+  <svg class='docmap-logo-small' width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path fill-rule='evenodd' clip-rule='evenodd' d='M3.78445 0.521739H1.28598C0.859842 0.521739 0.514391 0.872125 0.514391 1.30435V3.83851C0.514391 4.27073 0.859842 4.62112 1.28598 4.62112H3.78445C4.21058 4.62112 4.55603 4.27073 4.55603 3.83851V1.30435C4.55603 0.872125 4.21058 0.521739 3.78445 0.521739ZM1.28598 0C0.575752 0 0 0.583976 0 1.30435V3.83851C0 4.55888 0.575751 5.14286 1.28598 5.14286H3.78445C4.49467 5.14286 5.07043 4.55888 5.07043 3.83851V1.30435C5.07043 0.583977 4.49467 0 3.78445 0H1.28598Z' fill='white'/>
+    <path d='M0 9.42857C0 8.00841 1.13505 6.85714 2.53521 6.85714C3.93537 6.85714 5.07043 8.00841 5.07043 9.42857C5.07043 10.8487 3.93537 12 2.53521 12C1.13505 12 0 10.8487 0 9.42857Z' fill='white'/>
+    <path d='M6.92957 8.16149C6.92957 7.44112 7.50533 6.85714 8.21555 6.85714H10.714C11.4242 6.85714 12 7.44112 12 8.16149V10.6957C12 11.416 11.4242 12 10.714 12H8.21555C7.50533 12 6.92957 11.416 6.92957 10.6957V8.16149Z' fill='white'/>
+    <path d='M0 9.42857C0 8.00841 1.13505 6.85714 2.53521 6.85714C3.93537 6.85714 5.07043 8.00841 5.07043 9.42857C5.07043 10.8487 3.93537 12 2.53521 12C1.13505 12 0 10.8487 0 9.42857Z' fill='white'/>
+    <path d='M6.92957 8.16149C6.92957 7.44112 7.50533 6.85714 8.21555 6.85714H10.714C11.4242 6.85714 12 7.44112 12 8.16149V10.6957C12 11.416 11.4242 12 10.714 12H8.21555C7.50533 12 6.92957 11.416 6.92957 10.6957V8.16149Z' fill='white'/>
+  </svg>
+`;

packages/widget/src/docmap-controller.ts

@@ -45,7 +45,9 @@ export const getDocmap: TaskFunction<DocmapFetchingParams, DisplayObjectGraph> =
   if (resp.status !== 200) {
     // TODO this is untested
     throw new Error(
-      `Failed to fetch docmap. ${resp.body ? 'Server response was ' + resp.body : ''}`,
+      `Failed to fetch docmap. ${
+        resp.body ? 'Server response was ' + JSON.stringify(resp.body) : ''
+      }`,
     );
   }
 

packages/widget/src/docmaps-widget.ts

@@ -1,11 +1,11 @@
 import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { customCss } from './styles';
-import { logo } from './assets';
+import { logoSmall } from './assets';
 import { Task } from '@lit/task';
 import { DocmapFetchingParams, docmapToDisplayObjectGraph, getDocmap } from './docmap-controller';
 import { DisplayObject, DisplayObjectGraph, GRAPH_CANVAS_ID } from './display-object';
-import { clearGraph, displayGraph } from './graph-view';
+import { clearGraph, displayGraph, noDocmapFoundScreen } from './graph-view';
 import { renderDetailsView } from './detail-view';
 import { loadFont } from './font';
 
@@ -24,6 +24,8 @@ export class DocmapsWidget extends LitElement {
   @state()
   graph?: DisplayObjectGraph;
 
+  // We keep track of this because we have to render once before drawing the graph
+  // so that D3 has a canvas to draw into.
   #hasRenderedOnce: boolean = false;
 
   set docmap(docmap: any) {
@@ -59,7 +61,7 @@ export class DocmapsWidget extends LitElement {
     return html`
       <div class="docmaps-widget">
         <div class="widget-header">
-          ${logo}
+          ${logoSmall}
           <span>DOCMAP</span>
         </div>
         ${d3Canvas} ${content}
@@ -85,17 +87,22 @@ export class DocmapsWidget extends LitElement {
   };
 
   private graphView() {
+    const tooltip = html` <div id="tooltip" class="tooltip" style="opacity:0;"></div>`;
+
     if (this.graph) {
       if (this.#hasRenderedOnce) {
+        // There is a canvas for D3 to draw in! We can render the graph now
         this.renderGraphView(this.graph);
       }
     } else {
-      this.#docmapFetchingTask?.render({
+      return html` ${this.#docmapFetchingTask?.render({
         complete: this.onFetchComplete,
-      });
+        error: (e) => noDocmapFoundScreen(e, this.doi),
+      })}
+      ${tooltip}`;
     }
 
-    return html` <div id="tooltip" class="tooltip" style="opacity:0;"></div>`;
+    return tooltip;
   }
 
   private detailView() {

packages/widget/src/graph-view.ts

@@ -13,6 +13,8 @@ import {
 } from './display-object';
 import * as Dagre from 'dagre';
 import { SimulationNodeDatum } from 'd3-force';
+import { html } from 'lit';
+import { logoLarge } from './assets';
 
 // D3Nodes represent a node that is being passed to D3's force simulation to be rendered in the graph view.
 // They are a superset of DisplayObjects, with additional fields that are used by D3.
@@ -38,6 +40,20 @@ export const displayGraph = (
   drawGraph(d3Nodes, d3Edges, graphWidth, svg, shadowRoot, onNodeClick);
 };
 
+export function noDocmapFoundScreen(e: unknown, doi: string) {
+  console.log('Error fetching docmap:\n\n', e);
+  return html`
+    <div class="not-found-screen">
+      <div class="not-found-message">
+        <p>No data found for DOI</p>
+        <p>${doi}</p>
+      </div>
+
+      ${logoLarge}
+    </div>
+  `;
+}
+
 export function createLabels(
   svg: d3.Selection<SVGSVGElement, unknown, null, undefined>,
   d3Nodes: D3Node[],