From 40e2c86cfe850445e06da411cb39b93a209c9ea1 Mon Sep 17 00:00:00 2001
From: Andrew Edstrom <andrewedstrom@gmail.com>
Date: Sun, 17 Dec 2023 20:05:02 -0800
Subject: [PATCH] feat(widget): Display "no metadata found" in the details pane
 (#219)

* It was already displayed but now it's styled like the mockup and there are tests
* Also renames test fixture files to explain what's inside of them.
---
 packages/widget/src/detail-view.ts            |  4 +-
 packages/widget/src/styles.ts                 | 13 ++++++-
 ...ocmap-2.ts => anotherDocmapWithOneStep.ts} |  0
 ...docmap-1.ts => docmapWithMultipleSteps.ts} |  0
 .../test/fixtures/docmapWithNoMetadata.ts     | 38 +++++++++++++++++++
 ...ciety-docmap-1.ts => docmapWithOneStep.ts} |  0
 .../fake-docmap-with-every-thing-type.ts      |  2 +-
 .../fake-docmap-with-two-lonely-nodes.ts      |  2 +-
 .../test/integration/docmaps-widget.test.ts   | 21 ++++++++--
 packages/widget/test/integration/util.ts      |  2 +-
 .../test/unit/docmap-controller.test.ts       |  6 +--
 11 files changed, 76 insertions(+), 12 deletions(-)
 rename packages/widget/test/fixtures/{sciety-docmap-2.ts => anotherDocmapWithOneStep.ts} (100%)
 rename packages/widget/test/fixtures/{elife-docmap-1.ts => docmapWithMultipleSteps.ts} (100%)
 create mode 100644 packages/widget/test/fixtures/docmapWithNoMetadata.ts
 rename packages/widget/test/fixtures/{sciety-docmap-1.ts => docmapWithOneStep.ts} (100%)

diff --git a/packages/widget/src/detail-view.ts b/packages/widget/src/detail-view.ts
index 4b40317d..7fa23dea 100644
--- a/packages/widget/src/detail-view.ts
+++ b/packages/widget/src/detail-view.ts
@@ -124,8 +124,8 @@ const createGridItem = (
 };
 
 const emptyMetadataMessage = (): HTMLTemplateResult => {
-  return html` <div class="metadata-item">
-    <div class="metadata-key">no metadata found</div>
+  return html` <div class="no-metadata-found-grid">
+    <div class="metadata-grid-item">no metadata found</div>
   </div>`;
 };
 
diff --git a/packages/widget/src/styles.ts b/packages/widget/src/styles.ts
index 926b28be..03d5349a 100644
--- a/packages/widget/src/styles.ts
+++ b/packages/widget/src/styles.ts
@@ -123,13 +123,24 @@ export const customCss: CSSResult = css`
         overflow-x: hidden;
     }
 
+    .no-metadata-found-grid {
+        max-height: 100%;
+        max-width: 100%;
+        display: grid;
+        grid-template-columns: auto;
+        grid-gap: 0;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+
     .metadata-grid-item {
         min-height: 47px;
         max-width: 100%;
         display: flex;
         align-items: center;
         justify-content: flex-start;
-        padding-left: 33px;
+        padding-left: 36px;
         word-wrap: break-word;
         overflow-wrap: break-word;
         word-break: break-all;
diff --git a/packages/widget/test/fixtures/sciety-docmap-2.ts b/packages/widget/test/fixtures/anotherDocmapWithOneStep.ts
similarity index 100%
rename from packages/widget/test/fixtures/sciety-docmap-2.ts
rename to packages/widget/test/fixtures/anotherDocmapWithOneStep.ts
diff --git a/packages/widget/test/fixtures/elife-docmap-1.ts b/packages/widget/test/fixtures/docmapWithMultipleSteps.ts
similarity index 100%
rename from packages/widget/test/fixtures/elife-docmap-1.ts
rename to packages/widget/test/fixtures/docmapWithMultipleSteps.ts
diff --git a/packages/widget/test/fixtures/docmapWithNoMetadata.ts b/packages/widget/test/fixtures/docmapWithNoMetadata.ts
new file mode 100644
index 00000000..f06b5166
--- /dev/null
+++ b/packages/widget/test/fixtures/docmapWithNoMetadata.ts
@@ -0,0 +1,38 @@
+export default {
+  "id": "https://sciety.org/docmaps/v1/articles/10.21203/rs.4.rs-1043992/v1/biophysics-colab.docmap.json",
+  "type": "docmap",
+  "created": "2022-04-19T11:40:09.289Z",
+  "publisher": {
+    "id": "https://biophysics.sciencecolab.org",
+    "homepage": "https://biophysics.sciencecolab.org/",
+    "logo": "https://sciety.org/static/groups/biophysics-colab--4bbf0c12-629b-4bb8-91d6-974f4df8efb2.png",
+    "name": "Biophysics Colab",
+    "account": {
+      "id": "https://sciety.org/groups/biophysics-colab",
+      "service": "https://sciety.org/"
+    }
+  },
+  "first-step": "_:b1",
+  "steps": {
+    "_:b1": {
+      "inputs": [
+        {
+          "doi": "10.21203/rs.4.rs-1043992/v1",
+          "url": "https://doi.org/10.21203/rs.4.rs-1043992/v1"
+        }
+      ],
+      "actions": [
+        {
+          "participants": [],
+          "outputs": [
+            {
+              "type": "review-article"
+            }
+          ]
+        }
+      ],
+      "assertions": []
+    }
+  },
+  "@context": "https://w3id.org/docmaps/context.jsonld"
+}
diff --git a/packages/widget/test/fixtures/sciety-docmap-1.ts b/packages/widget/test/fixtures/docmapWithOneStep.ts
similarity index 100%
rename from packages/widget/test/fixtures/sciety-docmap-1.ts
rename to packages/widget/test/fixtures/docmapWithOneStep.ts
diff --git a/packages/widget/test/fixtures/fake-docmap-with-every-thing-type.ts b/packages/widget/test/fixtures/fake-docmap-with-every-thing-type.ts
index f9a3f392..d89b5182 100644
--- a/packages/widget/test/fixtures/fake-docmap-with-every-thing-type.ts
+++ b/packages/widget/test/fixtures/fake-docmap-with-every-thing-type.ts
@@ -1,4 +1,4 @@
-// This is a copy of elife-docmap-1.ts but with every supported display type in the last step
+// This is a copy of docmapWithMultipleSteps.ts but with every supported display type in the last step
 
 export default {
     "@context": "https://w3id.org/docmaps/context.jsonld",
diff --git a/packages/widget/test/fixtures/fake-docmap-with-two-lonely-nodes.ts b/packages/widget/test/fixtures/fake-docmap-with-two-lonely-nodes.ts
index f39433e1..050a693b 100644
--- a/packages/widget/test/fixtures/fake-docmap-with-two-lonely-nodes.ts
+++ b/packages/widget/test/fixtures/fake-docmap-with-two-lonely-nodes.ts
@@ -1,4 +1,4 @@
-// This is a copy of elife-docmap-1.ts but with every supported display type in the last step
+// This docmap's display objects form a graph 3 layers deep, with the first and second layers only having one node each.
 
 export default {
   "@context": "https://w3id.org/docmaps/context.jsonld",
diff --git a/packages/widget/test/integration/docmaps-widget.test.ts b/packages/widget/test/integration/docmaps-widget.test.ts
index 23f46ffe..060497e9 100644
--- a/packages/widget/test/integration/docmaps-widget.test.ts
+++ b/packages/widget/test/integration/docmaps-widget.test.ts
@@ -1,9 +1,10 @@
 import { expect, Locator, test } from '@playwright/test';
-import docmapWithMultipleSteps from '../fixtures/elife-docmap-1';
-import docmapWithOneStep from '../fixtures/sciety-docmap-1';
-import anotherDocmapWithOneStep from '../fixtures/sciety-docmap-2';
+import docmapWithMultipleSteps from '../fixtures/docmapWithMultipleSteps';
+import docmapWithOneStep from '../fixtures/docmapWithOneStep';
+import anotherDocmapWithOneStep from '../fixtures/anotherDocmapWithOneStep';
 import fakeDocmapWithEveryType from '../fixtures/fake-docmap-with-every-thing-type';
 import fakeDocmapWithTwoLonelyNodes from '../fixtures/fake-docmap-with-two-lonely-nodes';
+import docmapWithNoMetadata from '../fixtures/docmapWithNoMetadata';
 import {
   renderWidgetWithDocmapLiteral,
   renderWidgetWithServerMock,
@@ -34,6 +35,10 @@ const fixtures: { [docmapName: string]: { docmap: any; types: string[] } } = {
     docmap: fakeDocmapWithTwoLonelyNodes,
     types: ['P', 'RA', 'RA', 'RA', '', 'JA'],
   },
+  docmapWithNoMetadata: {
+    docmap: docmapWithNoMetadata,
+    types: ['', 'RA'],
+  }
 };
 
 [
@@ -369,6 +374,16 @@ test('When the docmap cannot be found, the empty screen is shown', async ({ page
   await expect(widget).toContainText('No data found for DOI unknown-doi');
 });
 
+test('Can render a docmap with no metadata', async ({ page }) => {
+  const widget = await renderWidgetWithServerMock(page, 'docmap-with-no-metadata', docmapWithNoMetadata);
+  await expect(widget.locator('.node')).toHaveCount(2);
+
+  const nodeWithoutMetadata = widget.locator('.node').last();
+  await nodeWithoutMetadata.click({ force: true });
+
+  await expect(widget.locator('.detail-body')).toContainText('no metadata found');
+})
+
 async function assertGraphTooltipAppearsOnHover(
   widget: Locator,
   thingToHoverOver: Locator,
diff --git a/packages/widget/test/integration/util.ts b/packages/widget/test/integration/util.ts
index 21cae9de..e715c9f3 100644
--- a/packages/widget/test/integration/util.ts
+++ b/packages/widget/test/integration/util.ts
@@ -1,6 +1,6 @@
 import { Page, Request, Route } from '@playwright/test';
 import { DocmapsWidget } from '../../src';
-import docmapWithOneStep from '../fixtures/sciety-docmap-1';
+import docmapWithOneStep from '../fixtures/docmapWithOneStep';
 
 
 const STAGING_SERVER_URL: string = 'https://example.com';
diff --git a/packages/widget/test/unit/docmap-controller.test.ts b/packages/widget/test/unit/docmap-controller.test.ts
index 30dcb8c9..c58de8e6 100644
--- a/packages/widget/test/unit/docmap-controller.test.ts
+++ b/packages/widget/test/unit/docmap-controller.test.ts
@@ -1,9 +1,9 @@
 import test from 'ava';
 import { getSteps, stepsToGraph } from '../../src';
 import type { DisplayObjectEdge } from '../../src/util';
-import smallDocmapWithOneStep from '../fixtures/sciety-docmap-1';
-import largeDocmapWithOneStep from '../fixtures/sciety-docmap-2';
-import docmapWithMultipleSteps from '../fixtures/elife-docmap-1';
+import smallDocmapWithOneStep from '../fixtures/docmapWithOneStep';
+import largeDocmapWithOneStep from '../fixtures/anotherDocmapWithOneStep';
+import docmapWithMultipleSteps from '../fixtures/docmapWithMultipleSteps';
 
 interface Item {
   type: string;