Upgrade/issue 615 citation manager (#616)

should fix #615 both use cases. * refine Year in facets dimensions for ArticleBibliography * allow non anchor click * add cite2c migration markdown to ipynb parser * fix style when hovering citation manager <cite> * update ArticleReference.js to adjust local shortRef "author Date"
C2DH · Feb 23, 2024 · 7c3c5b2 · 7c3c5b2
1 parent b0480cc
commit 7c3c5b2
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 112 deletions.
diff --git a/src/components/Article/ArticleBibliography.js b/src/components/Article/ArticleBibliography.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
 import { Container, Col, Row } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import {
@@ -11,26 +11,28 @@ import Sorting from '../Facets/Sorting'
 import Citation from '../Citation'
 import '../../styles/components/Article/ArticleBibliography.scss'
 
-
 const Dimensions = [
   {
     name: 'authors',
     fixed: true,
     fn: (d) => {
       if (Array.isArray(d.author)) {
-        return d.author.map(a => [a.family, a.given].join(', '))
+        return d.author.map((a) => [a.family, a.given].join(', '))
       }
-      if (Array.isArray(d.editor)){
-        return d.editor.map(a => [a.family, a.given].join(', '))
+      if (Array.isArray(d.editor)) {
+        return d.editor.map((a) => [a.family, a.given].join(', '))
       }
 
       return []
     },
-    sortFn: (a,b) => {
+    sortFn: (a, b) => {
       return a.indices.length === b.indices.length
         ? a.key > b.key
-          ? 1 : -1
-        : a.indices.length > b.indices.length ? -1 : 1
+          ? 1
+          : -1
+        : a.indices.length > b.indices.length
+        ? -1
+        : 1
     },
     // each group has these props:
     // key: k, count: 0, indices: [], selected: []
@@ -40,23 +42,35 @@ const Dimensions = [
     //       ? 1 : -1
     //     : a.count > b.count ? -1 : 1
     // },
-    isArray: true
+    isArray: true,
   },
   {
     name: 'issued.year',
     fixed: true,
-    fn: (d) => d.issued?.year || 0,
-    sortFn: (a,b) => {
+    fn: (d) => {
+      if (d.issued instanceof Object) {
+        if (isNaN(d.issued.year) && Array.isArray(d.issued['date-parts'])) {
+          let year = d.issued['date-parts'][0]
+          while (Array.isArray(year) && year.length) {
+            year = year[0]
+          }
+          return year
+        }
+        return d.issued.year
+      }
+      return 0
+    },
+    sortFn: (a, b) => {
       return a.key > b.key ? -1 : 1
-    }
-  }
+    },
+  },
 ]
 
 const ArticleBilbiography = ({
   articleTree,
-  noAnchor=false,
-  className='mt-5',
-  dimensions=Dimensions
+  noAnchor = false,
+  className = 'mt-5',
+  dimensions = Dimensions,
 }) => {
   const { t } = useTranslation()
   const [selected, setSelected] = useState(null)
@@ -81,76 +95,75 @@ const ArticleBilbiography = ({
 
   const items = articleTree.bibliography?.data || []
 
-  const replaceUrlsWithLink = (text) => text.replace(
-    /(https?:\/\/[0-9a-zA-Z-./_:?=]+)([^0-9a-zA-Z-./]+)/g,
-    (m, link, r) => `<a href="${link}" target="_blank">${link}</a>${r}`
-  )
-
-  const sortedItems = items.map((item, idx) => ({
-    ...item,
-    idx
-  })).sort(sortFn({
-    by: sortBy,
-    direction: sortDirection,
-    dimensions,
-  }))
+  const replaceUrlsWithLink = (text) =>
+    text.replace(
+      /(https?:\/\/[0-9a-zA-Z-./_:?=]+)([^0-9a-zA-Z-./]+)/g,
+      (m, link, r) => `<a href="${link}" target="_blank">${link}</a>${r}`,
+    )
 
+  const sortedItems = items
+    .map((item, idx) => ({
+      ...item,
+      idx,
+    }))
+    .sort(
+      sortFn({
+        by: sortBy,
+        direction: sortDirection,
+        dimensions,
+      }),
+    )
 
   return (
     <>
-    <Container className={`ArticleBilbiography ${className}`}>
-      <Row>
-        <Col {...BootstrapColumLayout}>
-          {noAnchor
-            ? null
-            : <div id="bibliography" className="anchor" />
-          }
-          <h2 >{t('bibliography')}</h2>
-          <p>{t('bibliographySummary', stats)}</p>
-        </Col>
-      </Row>
-    </Container>
-    <Container className={`ArticleBilbiography_references`}>
-      <Row>
-        <Col  {...BootstrapColumLayout}>
-          <Facets
-            className="ArticleBilbiography_facet"
-            memoid={articleTree.id}
-            items={items}
-            onInit={onFacetsInitHandler}
-            onSelect={onFacetSelectHandler}
-            dimensions={dimensions}
-          />
-          <Sorting
-            className="ArticleBilbiography_Sorting"
-            options={dimensions.map(({ name }) => ({
-              label: t(`dimensions.sorting.values.${name}`),
-              value: name
-            }))}
-            currentOption={sortBy}
-            optionsLabel={t('dimensions.sorting.options')}
-            currentDirection={sortDirection}
-            directionsLabel={t('dimensions.sorting.directions')}
-            onChange={(e) => {
-              if (e.option.value !== sortBy) {
-                setSortBy(e.option.value)
-              } else if (e.direction.value !== sortDirection) {
-                setSortDirection(e.direction.value)
+      <Container className={`ArticleBilbiography ${className}`}>
+        <Row>
+          <Col {...BootstrapColumLayout}>
+            {noAnchor ? null : <div id="bibliography" className="anchor" />}
+            <h2>{t('bibliography')}</h2>
+            <p>{t('bibliographySummary', stats)}</p>
+          </Col>
+        </Row>
+      </Container>
+      <Container className={`ArticleBilbiography_references`}>
+        <Row>
+          <Col {...BootstrapColumLayout}>
+            <Facets
+              className="ArticleBilbiography_facet"
+              memoid={articleTree.id}
+              items={items}
+              onInit={onFacetsInitHandler}
+              onSelect={onFacetSelectHandler}
+              dimensions={dimensions}
+            />
+            <Sorting
+              className="ArticleBilbiography_Sorting"
+              options={dimensions.map(({ name }) => ({
+                label: t(`dimensions.sorting.values.${name}`),
+                value: name,
+              }))}
+              currentOption={sortBy}
+              optionsLabel={t('dimensions.sorting.options')}
+              currentDirection={sortDirection}
+              directionsLabel={t('dimensions.sorting.directions')}
+              onChange={(e) => {
+                if (e.option.value !== sortBy) {
+                  setSortBy(e.option.value)
+                } else if (e.direction.value !== sortDirection) {
+                  setSortDirection(e.direction.value)
+                }
+              }}
+            />
+            {sortedItems.map((item) => {
+              // <pre key={i}>{item.title} {JSON.stringify(item.author, null, 2)}</pre>
+              if (Array.isArray(selected) && selected.indexOf(item.idx) === -1) {
+                return null
               }
-            }}
-          />
-          {sortedItems.map((item) => {
-            // <pre key={i}>{item.title} {JSON.stringify(item.author, null, 2)}</pre>
-            if (Array.isArray(selected) && selected.indexOf(item.idx) === -1) {
-              return null
-            }
-            return (
-              <Citation key={item.idx} bibjson={item} replaceFn={replaceUrlsWithLink} />
-            )
-          })}
-        </Col>
-      </Row>
-    </Container>
+              return <Citation key={item.idx} bibjson={item} replaceFn={replaceUrlsWithLink} />
+            })}
+          </Col>
+        </Row>
+      </Container>
     </>
   )
 }

diff --git a/src/components/ArticleV2/ArticleLayer.js b/src/components/ArticleV2/ArticleLayer.js
@@ -290,7 +290,11 @@ const ArticleLayer = ({
     // debugger
     // check if the user clicked on an anchor element (figure, table of simple anchor)
     // in the markdown cell content.
-    if (e.target.nodeName === 'A') {
+    if (
+      e.target.nodeName === 'A' ||
+      e.target.hasAttribute('data-href') ||
+      e.target.hasAttribute('data-idx')
+    ) {
       if (e.target.hasAttribute('data-href')) {
         // link to bibliography :)
         const dataHref = e.target.getAttribute('data-href')

diff --git a/src/logic/ipynb.js b/src/logic/ipynb.js
@@ -51,12 +51,71 @@ const renderMarkdownWithReferences = ({
     '<a href="#((' + AvailableRefPrefixes.join('|') + ')[^"]+-*)">([^<]+)</a>',
     'ig',
   )
-  // console.info('markdownParser.render', markdownParser.render(sources))
-  let content = markdownParser
-    .render(sources)
+  const citeToRef = (m, id0, id1, label) => {
+    const id = `${id0}/${id1}`
+
+    const reference = new ArticleReference({
+      ref: citationsFromMetadata[id],
+    })
+    let shortRef = ''
+    if (!citationsFromMetadata[id]) {
+      warnings.push(
+        new ArticleTreeWarning({
+          idx,
+          code: ReferenceWarningCode,
+          message: `missing citation id ${id} in notebook metadata`,
+          context: id,
+        }),
+      )
+      shortRef = label.replace(/[()]/g, '')
+    } else {
+      shortRef = reference.shortRefText
+    }
+    console.info(
+      '[ipynb.renderMarkdownWithReferences] citeToRef',
+      idx,
+      id,
+      label,
+      citationsFromMetadata[id],
+      '\n our shortRef:',
+      reference.shortRefText,
+    )
+    references.push(reference)
+    return `<span class="ArticleReference d-inline-block">
+      <span class=" d-inline-block">
+        <span class="ArticleReference_shortRef">
+          <span data-href="${id}"><span class="ArticleReference_pointer"></span>
+          ${shortRef}
+          </span>
+        </span>
+      </span>
+      </span>`
+  }
+
+  let content = markdownParser.render(sources)
+  console.info('[ipynb] rendered content', idx, content)
+  content = content
     // enable <br />
     .replace(/&lt;br\/&gt;/g, '<br/>')
     .replace(/&lt;br&gt;/g, '<br/>')
+    .replace(/&lt;i&gt;/g, '<i>')
+    .replace(/&lt;\/i&gt;/g, '</i>')
+    // Note: this is for cite2c migrating to citation manager :(
+    // In content we have smt like
+    // &lt;cite id=“cite2c-7748027/DJM2S2R7”&gt;&lt;a href=“#cite2c%7C7748027%2FDJM2S2R7”&gt;(Salomon, 2021)&lt;/a&gt;&lt;/cite&gt;
+    //
+    // &lt;cite id=“cite2c-7748027/C6Q3NJHF”&gt;(Karasch, 1987)&lt;/cite&gt;:60, &lt;cite id=“cite2c-7748027/E4NNMKER”&gt;(Linhares et Lévy, 1971)&lt;/cite&gt;:129
+    .replace(
+      /&lt;cite id=.cite2c-([\dA-Z]+)\/([\dA-Z]+).&gt;&lt;a href=.#cite2c%..[\dA-Z%]+.&gt;(.+?)&lt;\/a&gt;&lt;\/cite&gt;/gm,
+      citeToRef,
+    )
+    .replace(/&lt;cite id=.cite2c-([\dA-Z]+)\/([\dA-Z]+).&gt;(.+?)&lt;\/cite&gt;/gm, citeToRef)
+    // Note: this is for citationManager.
+    // E.g. &lt;cite id=“arpnc”&gt;&lt;a href=“#zotero%7C8918850%2F6BZTRQWI”&gt;(Coughenour et al., 2015)&lt;/a&gt;&lt;/cite&gt;
+    .replace(
+      /&lt;cite\s+[^&]+&gt;&lt;a\s+href=.#zotero%..([\dA-Z]+)%..([\dA-Z]+).&gt;(.+?)&lt;\/a&gt;&lt;\/cite&gt;/gm,
+      citeToRef,
+    )
     // add target blank for all external links
     .replace(/<a href="([^"]+)"/g, (m, href) => {
       if (href.indexOf('http') === 0) {
@@ -97,7 +156,8 @@ const renderMarkdownWithReferences = ({
     })
     // replace sup
     .replace(/&lt;sup&gt;(.*)&lt;\/sup&gt;/g, (m, str) => `<sup>${str}</sup>`)
-    // find and replace ciation in Chicago author-date style, like in this sentence:
+
+    // Note: this is for cite2c. find and replace ciation in Chicago author-date style, like in this sentence:
     // "Compiling a collection of tweets of this nature raises considerable methodological issues.
     // While we will not go into detail, we would refer our readers to previous publications
     // that touches on these subjects <cite data-cite="7009778/GBFQ2FF7"></cite>."
@@ -168,7 +228,12 @@ const getArticleTreeFromIpynb = ({ id, cells = [], metadata = {} }) => {
   // this contain footnotes => zotero id to remap reference at paragraph level
   const referenceIndex = {}
   let bibliography = null
-  let citationsFromMetadata = metadata?.cite2c?.citations
+  // deprecation notice: cite2c is only being used in jupyter notebooks 6.0.0 and below
+  let citationsFromMetadata =
+    metadata.cite2c?.citations ||
+    metadata['citation-manager']?.items?.zotero ||
+    metadata['citation-manager']?.items?.cite2c
+  console.info('[ipynb]', id, metadata, citationsFromMetadata)
   // initialize figure numbering using constants/AvailableFigureRefPrefixes
   const figureNumberingByRefPrefix = AvailableFigureRefPrefixes.reduce((acc, prefix) => {
     acc[prefix] = 0
@@ -201,7 +266,6 @@ const getArticleTreeFromIpynb = ({ id, cells = [], metadata = {} }) => {
       return acc
     }, {})
   }
-
   // parse biobliographic elements
   if (citationsFromMetadata instanceof Object) {
     bibliography = new Cite(Object.values(citationsFromMetadata).filter((d) => d))
@@ -217,6 +281,7 @@ const getArticleTreeFromIpynb = ({ id, cells = [], metadata = {} }) => {
       cell.role = RoleDefault
 
       const sources = Array.isArray(cell.source) ? cell.source.join('\n') : cell.source
+      console.info('[ipynb]', cell.idx, sources)
       // find footnote citations (with the number)
       const footnote = sources.match(/<span id=.fn(\d+).><cite data-cite=.([/\dA-Z]+).>/)
       const figure = getFigureFromCell(cell, AvailableFigureRefPrefixes)