rename datasets with impresso corpus

impresso · Dec 16, 2024 · e414d32 · e414d32
1 parent b4e7fba
commit e414d32
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 37 deletions.
diff --git a/src/components/DatasetsModal.tsx → src/components/CorpusOverviewModal.tsx b/src/components/DatasetsModal.tsx → src/components/CorpusOverviewModal.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState } from "react"
-import type { Dataset } from "./../types"
+import type { Dataset } from "../types"
 import Page from "./Page"
 import { Col, Container, Form, Row } from "react-bootstrap"
 import DatasetCard from "./DatasetCard"
@@ -8,7 +8,7 @@ import { BrowserViewLogin } from "../constants"
 import MarkdownSnippet from "./MarkdownSnippet"
 import { DocStar, MediaImage } from "iconoir-react"
 
-export type DatasetModalProps = {
+export type CorpusOverviewModalProps = {
   title?: string
   modalTitle?: string
   content: string
@@ -48,8 +48,8 @@ interface DatasetFilter {
   accessor: (dataset: Dataset) => boolean
 }
 
-const DatasetModal: React.FC<DatasetModalProps> = ({
-  modalTitle = "Datasets",
+const CorpusOverviewModal: React.FC<CorpusOverviewModalProps> = ({
+  modalTitle = "Impresso Corpus Overview",
   content,
   title,
   datasets = [],
@@ -76,7 +76,7 @@ const DatasetModal: React.FC<DatasetModalProps> = ({
 
   const updateFilterBy = (key: keyof filterValues, value: string) => {
     filterValuesRef.current[key] = value
-    console.info("[DatasetModal] @updateFilterBy", key, value)
+    console.info("[CorpusOverviewModal] @updateFilterBy", key, value)
     // handpick the fields to preview
     if (delaySetStateTimerRef.current) {
       clearTimeout(delaySetStateTimerRef.current)
@@ -127,13 +127,13 @@ const DatasetModal: React.FC<DatasetModalProps> = ({
           <Col sm={12}>
             <div className="pt-3 h-1px"></div>
           </Col>
-          <Col sm={2} className="font-weight-medium border-end">
-            Period
+          <Col sm={3} className="font-weight-medium border-end">
+            <Row className="h-100">
+              <Col className="border-end">Period</Col>
+              <Col>Media</Col>
+            </Row>
           </Col>
-          <Col sm={2} className="font-weight-medium">
-            Medium
-          </Col>
-          <Col sm={5}>
+          <Col sm={4}>
             <Form.Group controlId="ModalRegisterForm.email">
               <Form.Label className="font-weight-bold">
                 Title{" "}
@@ -151,14 +151,35 @@ const DatasetModal: React.FC<DatasetModalProps> = ({
           </Col>
           <Col sm={3} className="font-weight-medium">
             Data Availability
-            <br />
+          </Col>
+          <Col sm={2} className="font-weight-medium">
+            Availability for <br />
             <div
               className={`badge d-inline-block small-caps px-2 shadow-sm   ${
                 user ? "bg-primary text-dark" : "bg-secondary text-paper"
               }`}
             >
               {user ? userPlan : "(guest)"}
             </div>
+          </Col>
+          <Col sm={3} className="font-weight-medium border-end">
+            <Row className="h-100">
+              <Col className="border-end"></Col>
+              <Col></Col>
+            </Row>
+          </Col>
+          <Col sm={{ offset: 4, span: 1 }}>
+            <div className="very-small">Explore in Impresso App</div>
+          </Col>
+          <Col sm={1}>
+            <DocStar />
+            <div className="very-small">Export transcripts</div>
+          </Col>
+          <Col sm={1}>
+            <MediaImage />
+            <div className="very-small">Export illustrations</div>
+          </Col>
+          <Col sm={2}>
             <div className="very-small mt-2 mb-2 muted">
               {user ? (
                 "Discover Available Datasets according to your plan"
@@ -176,17 +197,6 @@ const DatasetModal: React.FC<DatasetModalProps> = ({
               )}
             </div>
           </Col>
-          <Col sm={{ offset: 9, span: 1 }}>
-            <div className="very-small">Explore in Impresso App</div>
-          </Col>
-          <Col sm={1}>
-            <DocStar />
-            <div className="very-small">Export transcripts</div>
-          </Col>
-          <Col sm={1}>
-            <MediaImage />
-            <div className="very-small">Export illustrations</div>
-          </Col>
           <Col sm={12}>
             <div className="border-dark pt-3 border-bottom h-1px"></div>
           </Col>
@@ -204,4 +214,4 @@ const DatasetModal: React.FC<DatasetModalProps> = ({
   )
 }
 
-export default DatasetModal
+export default CorpusOverviewModal
diff --git a/src/components/DatasetCard.tsx b/src/components/DatasetCard.tsx
@@ -7,6 +7,7 @@ import {
   PlanEducational,
   PlanGuest,
   PlanImpressoUser,
+  PlanLabels,
   PlanNone,
   PlanResearcher,
 } from "../constants"
@@ -17,6 +18,16 @@ export type DatasetCardProps = {
   className?: string
 }
 
+const compareDatasetPlanWithUserPlans = (userPlan: string, plans: string[]) => {
+  return (
+    <Row>
+      {plans.map((plan, i) => (
+        <Col key={i}>{compareDatasetPlanWithUserPlan(userPlan, plan)}</Col>
+      ))}
+    </Row>
+  )
+}
+
 const compareDatasetPlanWithUserPlan = (
   userPlan: string,
   datasetPlan: string
@@ -65,15 +76,20 @@ const DatasetCard: FC<DatasetCardProps> = ({
   // translate
   return (
     <Row key={dataset.id} className={`DatasetCard ${className}`}>
-      <Col sm={1}>{dataset.startYear}</Col>
-      <Col sm={1}>{dataset.endYear}</Col>
-      <Col sm={2}>{dataset.medium}</Col>
-      <Col sm={5}>
+      <Col sm={3}>
+        <Row>
+          <Col>
+            {dataset.startYear} - {dataset.endYear}
+          </Col>
+          <Col>{dataset.media}</Col>
+        </Row>
+      </Col>
+      <Col sm={4}>
         <h3 className="font-size-inherit mb-1">
           {dataset.mediaTitle} &mdash; {dataset.associatedPartner}
         </h3>
         <div className="d-flex">
-          <div className="small-caps">{dataset.media}</div>
+          <div className="small-caps">{dataset.medium}</div>
         </div>
         {dataset.permittedUse}
       </Col>
@@ -84,10 +100,16 @@ const DatasetCard: FC<DatasetCardProps> = ({
         dataset.minimumUserPlanRequiredToExportIllustration,
       ].map((plan, i) => (
         <Col key={i} sm={1}>
-          {compareDatasetPlanWithUserPlan(userPlan, plan)}
+          {PlanLabels[plan]}
         </Col>
       ))}
-
+      <Col>
+        {compareDatasetPlanWithUserPlans(userPlan, [
+          dataset.minimumUserPlanRequiredToExploreInWebapp,
+          dataset.minimumUserPlanRequiredToExportTranscripts,
+          dataset.minimumUserPlanRequiredToExportIllustration,
+        ])}
+      </Col>
       <Col sm={12}>
         <div className="pt-3 border-bottom h-1px"></div>
       </Col>

diff --git a/src/content/pagesContents/datasets.md → src/content/pagesContents/corpus-overview.md b/src/content/pagesContents/datasets.md → src/content/pagesContents/corpus-overview.md
@@ -1,7 +1,7 @@
 ---
-title: Dataset Availability by Plan
-modalTitle: Datasets
-excerpt: Overview of the different user plans available for the Impresso Project
+title: Impresso Corpus Overview
+modalTitle: Impresso Corpus Overview
+excerpt: Data Accessibility and Usage Permissions
 ---
 
 Explore a wide range of datasets featuring newspapers and radio content, each associated with its permitted use. This table allows you to find the resources you need for your research.

diff --git a/src/pages/datasets.astro → src/pages/corpus-overview.astro b/src/pages/datasets.astro → src/pages/corpus-overview.astro
@@ -4,11 +4,11 @@ import App from "../components/App.astro";
 import Layout from "../layouts/Layout.astro";
 import { CanonicalUrl } from "../constants";
 import { AstroSeo } from "@astrolib/seo";
-import DatasetModal from "../components/DatasetsModal";
+import CorpusOverviewModal from "../components/CorpusOverviewModal";
 import { getCollection } from "astro:content";
 import { getRecursivelyEntryData } from "../logic";
 
-const pageContent = await getEntry("pagesContents", "datasets") as any;
+const pageContent = await getEntry("pagesContents", "corpus-overview") as any;
 
 // load all notebooks, order by date
 const datasets = await getCollection('datasets')
@@ -23,5 +23,5 @@ const datasetsProps = await Promise.all(datasets.map((datasets) => getRecursivel
     description={pageContent.data.excerpt}
   />
   <App transition:persist/>
-  <DatasetModal datasets={datasetsProps} title={pageContent.data.title} client:only="react" content={pageContent.body}/>
+  <CorpusOverviewModal datasets={datasetsProps} title={pageContent.data.title} client:only="react" content={pageContent.body}/>
 </Layout>