UI: article JSON preview

* ref: cern-sis/issues-scoap3#226
ErnestaP · Nov 27, 2023 · 9788082 · 9788082
1 parent ad583ad
commit 9788082
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 30 deletions.
diff --git a/ui/src/components/shared/JsonPreview.tsx b/ui/src/components/shared/JsonPreview.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Collapse } from "antd";
+
+import { Result } from "@/types";
+
+interface JsonPreviewProps {
+  article: Result;
+}
+
+export const JsonPreview = ({ article }: JsonPreviewProps) => {
+  return (
+    <Collapse
+      items={[
+        {
+          key: "1",
+          label: "Metadata preview. Preview of JSON metadata for this article.",
+          children: (
+            <p className="p-8 json-preview-content">
+              <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed">
+                {JSON.stringify(article, undefined, 2)}
+              </pre>
+            </p>
+          ),
+        },
+      ]}
+    />
+  );
+};
diff --git a/ui/src/pages/records/[recordId].tsx b/ui/src/pages/records/[recordId].tsx
@@ -6,33 +6,39 @@ import { Result } from "@/types";
 import Authors from "@/components/shared/Authors";
 import DetailPageInfo from "@/components/detail/DetailPageInfo";
 import { authToken, getApiUrl } from "@/utils/utils";
+import { JsonPreview } from "@/components/shared/JsonPreview";
 
 interface RecordPageProps {
   article: Result;
 }
 
 const RecordPage: React.FC<RecordPageProps> = ({ article }) => {
   return (
-    <div className="container">
-      <div className="container-inner detail-page lg:flex">
-        <div className="detail-page-main">
-          <h2 className="font-normal mb-3">
-            {ReactHtmlParser(article?.title)}
-          </h2>
-          <Authors
-            authors={article?.authors}
-            page="detail"
-            affiliations
-            className="mb-3"
-          />
-          <p className="text-justify leading-relaxed">
-            {ReactHtmlParser(article?.abstract)}
-          </p>
+    <div className="container grid grid-cols-4 gap-8">
+      <div id="abstract_and_preview" className="col-span-3">
+        <div id="abstract">
+          <div className="detail-page-main">
+            <h2 className="font-normal mb-3">
+              {ReactHtmlParser(article?.title)}
+            </h2>
+            <Authors
+              authors={article?.authors}
+              page="detail"
+              affiliations
+              className="mb-3"
+            />
+            <p className="text-justify leading-relaxed">
+              {ReactHtmlParser(article?.abstract)}
+            </p>
+          </div>
         </div>
-        <div className="detail-page-right">
-          <DetailPageInfo article={article} />
+        <div id="preview">
+          <JsonPreview article={article} />
         </div>
       </div>
+      <div id="abstract_and_preview" className="col-span-1 detail-page-right">
+        <DetailPageInfo article={article} />
+      </div>
     </div>
   );
 };

diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
@@ -94,7 +94,6 @@ a {
   display: flex;
   align-items: center;
   cursor: pointer;
-  color:
 }
 
 .ant-menu-item a {
@@ -111,7 +110,7 @@ a {
 
 .banner {
   width: 100%;
-  height: auto
+  height: auto;
 }
 
 @media (max-width: 830px) {
@@ -161,8 +160,10 @@ a {
 .ant-input-wrapper:focus-within {
   border-radius: 4px;
   border-color: #66afe9;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6)
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 8px rgba(102, 175, 233, 0.6);
 }
 
 .ant-input-wrapper:focus input,
@@ -183,7 +184,7 @@ a {
   inset-inline-start: 0 !important;
 }
 
-.ant-input-group-addon .ant-btn > div  {
+.ant-input-group-addon .ant-btn > div {
   display: none;
 }
 
@@ -233,7 +234,7 @@ a {
   border-bottom: none !important;
 }
 
-.ant-tabs-top >.ant-tabs-nav::before {
+.ant-tabs-top > .ant-tabs-nav::before {
   border-bottom: 1px solid #d9d9d9 !important;
 }
 
@@ -388,12 +389,6 @@ a {
 /* DETAIL */
 
 .detail-page-main {
-  width: 75%;
-  padding: 0 15px;
-}
-
-.detail-page-right {
-  width: 25%;
   padding: 0 15px;
 }
 
@@ -455,3 +450,11 @@ a {
     margin-top: 20px;
   }
 }
+
+.json-preview-content {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+#json-preview-card .ant-card-body {
+  padding: 0;
+}
diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -783,7 +783,7 @@ [email protected], classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classna
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
-[email protected]:
+[email protected], client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -3211,6 +3211,14 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swr@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07"
+  integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==
+  dependencies:
+    client-only "^0.0.1"
+    use-sync-external-store "^1.2.0"
+
 tailwindcss@^3:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
@@ -3391,6 +3399,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"