Amélioration des performances (#400)

* Amélioration des performances * Diminue le throttle
EcrituresNumeriques · Jun 22, 2021 · 31c0b69 · 31c0b69
1 parent 441d11f
commit 31c0b69
Show file tree

Hide file tree

Showing 14 changed files with 273 additions and 171 deletions.
diff --git a/front/dockerfile b/front/dockerfile
@@ -2,6 +2,7 @@
 FROM node:14-alpine as app-builder
 WORKDIR /app
 COPY gatsby/package*.json ./
+RUN apk add --update-cache git
 RUN npm ci --silent
 COPY gatsby ./
 RUN npm run build

diff --git a/front/gatsby/package.json b/front/gatsby/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@rjsf/core": "^2.5.1",
     "biblatex-csl-converter": "^1.11.0",
-    "codemirror": "^5.61.1",
+    "codemirror": "^5.59.4",
     "diff-match-patch": "^1.0.5",
     "downshift": "^6.1.3",
     "http-link-header": "^1.0.2",

diff --git a/front/gatsby/snowpack.config.cjs b/front/gatsby/snowpack.config.cjs
@@ -29,6 +29,6 @@ module.exports = {
     '@snowpack/plugin-react-refresh',
   ],
   devOptions: {
-    port: 3000,
+    port: 3000
   },
 }
diff --git a/front/gatsby/src/components/Write/Biblio.jsx b/front/gatsby/src/components/Write/Biblio.jsx
@@ -8,7 +8,7 @@ import Bibliographe from './bibliographe/Bibliographe'
 import menuStyles from './menu.module.scss'
 import Button from '../Button'
 
-export default (props) => {
+export default function Biblio ({ bib, article, bibTeXEntries, handleBib, readOnly }) {
   const [expand, setExpand] = useState(true)
   const [modal, setModal] = useState(false)
 
@@ -19,21 +19,21 @@ export default (props) => {
       </h1>
       {expand && (
         <>
-          {!props.readOnly && (
+          {!readOnly && (
             <Button onClick={() => setModal(true)}>Manage Bibliography</Button>
           )}
-          {props.bibTeXEntries.map((entry, index) => (
+          {bibTeXEntries.map((entry, index) => (
             <Reference key={`ref-${entry.key}-${index}`} entry={entry} />
           ))}
         </>
       )}
       {modal && (
         <Modal cancel={() => setModal(false)}>
           <Bibliographe
-            bib={props.bib}
-            success={props.handleBib}
+            bib={bib}
+            success={handleBib}
             cancel={() => setModal(false)}
-            article={props.article}
+            article={article}
           />
         </Modal>
       )}

diff --git a/front/gatsby/src/components/Write/Sommaire.jsx b/front/gatsby/src/components/Write/Sommaire.jsx
@@ -1,48 +1,35 @@
 import React, { useState } from 'react'
 
-import { ChevronDown, ChevronRight, Bookmark } from 'react-feather'
+import { ChevronDown, ChevronRight } from 'react-feather'
 
 import styles from './sommaire.module.scss'
 import menuStyles from './menu.module.scss'
+import { connect } from 'react-redux'
 
-export default function Sommaire (props) {
-  const [expand, setExpand] = useState(true)
-  // eslint-disable-next-line
-  const lines = props.md
-    .split('\n')
-    .map((l, i) => {
-      return { line: i, payload: l }
-    })
-    .filter((l) => l.payload.match(/^##+\ /))
+const mapStateToProps = ({ articleStructure }) => ({ articleStructure })
 
-  //arrow backspace \u21B3
-  // right arrow \u2192
-  // nbsp \xa0
-  // down arrow \u2223
-  // right tack \u22A2
-  // bottom left box drawing \u2514
-  // left drawing \u2502
-  //23B8
+function Sommaire (props) {
+  const [expand, setExpand] = useState(true)
+  const { articleStructure } = props
 
   return (
     <section className={[styles.section, menuStyles.section].join(' ')}>
       <h1 onClick={() => setExpand(!expand)}>
         {expand ? <ChevronDown/> : <ChevronRight/>} Table of contents
       </h1>
       {expand && (<ul>
-        {lines.map((l) => (
+        {articleStructure.map((item) => (
           <li
             className={styles.headlineItem}
-            key={`line-${l.line}-${l.payload}`}
-            onClick={() => props.setCodeMirrorCursor(l.line)}
+            key={`line-${item.index}-${item.line}`}
+            onClick={() => props.setCodeMirrorCursor(item.index)}
           >
-            {l.payload
-              .replace(/##/, '')
-              .replace(/#\s/g, '\u21B3')
-              .replace(/#/g, '\u00B7\xa0')}
+            {item.title}
           </li>
         ))}
       </ul>)}
     </section>
   )
 }
+
+export default connect(mapStateToProps)(Sommaire)
diff --git a/front/gatsby/src/components/Write/Stats.jsx b/front/gatsby/src/components/Write/Stats.jsx
@@ -3,34 +3,20 @@ import { ChevronDown, ChevronRight } from 'react-feather'
 
 import menuStyles from './menu.module.scss'
 
-export default (props) => {
+export default ({ stats }) => {
   const [expand, setExpand] = useState(true)
 
-  let value = props.md || ''
-  let regex = /\s+/gi
-  let citation = /\[@[\w-]+/gi
-  let noMarkDown = /[#_*]+\s?/gi
-  let wordCount = value
-    .trim()
-    .replace(noMarkDown, '')
-    .replace(regex, ' ')
-    .split(' ').length
-  let charCountNoSpace = value.replace(noMarkDown, '').replace(regex, '').length
-  let charCountPlusSpace = value.replace(noMarkDown, '').length
-  let citationNb =
-    value.replace(regex, '').replace(citation, ' ').split(' ').length - 1
-
   return (
     <section className={menuStyles.section}>
       <h1 onClick={() => setExpand(!expand)}>
         {expand ? <ChevronDown/> : <ChevronRight/>} Stats
       </h1>
       {expand && (
         <>
-          <p>Words : {wordCount}</p>
-          <p>Characters : {charCountNoSpace}</p>
-          <p>Characters (with spaces) : {charCountPlusSpace}</p>
-          <p>Citations : {citationNb}</p>
+          <p>Words : {stats.wordCount}</p>
+          <p>Characters : {stats.charCountNoSpace}</p>
+          <p>Characters (with spaces) : {stats.charCountPlusSpace}</p>
+          <p>Citations : {stats.citationNb}</p>
         </>
       )}
     </section>

diff --git a/front/gatsby/src/components/Write/Write.jsx b/front/gatsby/src/components/Write/Write.jsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { connect } from 'react-redux'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { connect, useDispatch } from 'react-redux'
 import 'codemirror/mode/markdown/markdown'
 import { Controlled as CodeMirror } from 'react-codemirror2'
+import throttle from 'lodash/throttle'
 
 import askGraphQL from '../../helpers/graphQL'
 import styles from './write.module.scss'
@@ -19,10 +20,19 @@ const mapStateToProps = ({ sessionToken, activeUser, applicationConfig }) => {
   return { sessionToken, activeUser, applicationConfig }
 }
 
-const ConnectedWrite = (props) => {
-  const readOnly = Boolean(props.version)
+function ConnectedWrite(props) {
+  const { version: currentVersion } = props
+  const [readOnly, setReadOnly] = useState(Boolean(currentVersion))
+  const dispatch = useDispatch()
+  const deriveArticleStructureAndStats = useCallback(
+    throttle(({ md }) => {
+      dispatch({ type: 'UPDATE_ARTICLE_STATS', md })
+      dispatch({ type: 'UPDATE_ARTICLE_STRUCTURE', md })
+    }, 250, { leading: false, trailing: true }),
+    []
+  )
 
-  const fullQuery = `query($article:ID!, $readOnly: Boolean!, $version:ID!) {
+  const fullQuery = `query($article:ID!, $hasVersion: Boolean!, $version:ID!) {
     article(article:$article) {
       _id
       title
@@ -42,7 +52,7 @@ const ConnectedWrite = (props) => {
         }
       }
 
-      live @skip (if: $readOnly) {
+      live @skip (if: $hasVersion) {
         md
         bib
         yaml
@@ -53,7 +63,7 @@ const ConnectedWrite = (props) => {
       }
     }
 
-    version(version: $version) @include (if: $readOnly) {
+    version(version: $version) @include (if: $hasVersion) {
       _id
       md
       bib
@@ -83,8 +93,8 @@ const ConnectedWrite = (props) => {
   const variables = {
     user: props.activeUser && props.activeUser._id,
     article: props.id,
-    version: props.version || '0123456789ab',
-    readOnly,
+    version: currentVersion || '0123456789ab',
+    hasVersion: typeof currentVersion === 'string'
   }
 
   const [graphqlError, setError] = useState()
@@ -114,7 +124,29 @@ const ConnectedWrite = (props) => {
 
   const sendVersion = async (autosave = true, major = false, message = '') => {
     try {
-      const query = `mutation($user:ID!,$article:ID!,$md:String!,$bib:String!,$yaml:String!,$autosave:Boolean!,$major:Boolean!,$message:String){saveVersion(version:{article:$article,major:$major,auto:$autosave,md:$md,yaml:$yaml,bib:$bib,message:$message},user:$user){ _id version revision message autosave updatedAt owner{ displayName }} }`
+      const query = `mutation($user: ID!, $article: ID!, $md: String!, $bib: String!, $yaml: String!, $autosave: Boolean!, $major: Boolean!, $message: String) {
+  saveVersion(version: {
+      article: $article,
+      major: $major,
+      auto: $autosave,
+      md: $md,
+      yaml: $yaml,
+      bib: $bib,
+      message: $message
+    },
+    user: $user
+  ) { 
+    _id 
+    version
+    revision
+    message
+    autosave
+    updatedAt
+    owner { 
+      displayName
+    }
+  }
+}`
       const response = await askGraphQL(
         {
           query,
@@ -153,6 +185,8 @@ const ConnectedWrite = (props) => {
   }, [debouncedLive])
 
   const handleMDCM = async (___, __, md) => {
+    deriveArticleStructureAndStats({ md })
+
     await setLive({ ...live, md: md })
   }
   const handleYaml = async (yaml) => {
@@ -165,32 +199,40 @@ const ConnectedWrite = (props) => {
   //Reload when version switching
   useEffect(() => {
     setIsLoading(true)
+    setReadOnly(currentVersion)
     ;(async () => {
       const data = await askGraphQL(
         { query: fullQuery, variables },
         'fetching Live version',
         props.sessionToken,
         props.applicationConfig
-      )
-        .then(({ version, article }) => ({ version, article }))
-        .catch((error) => {
-          setError(error)
-          return {}
-        })
+      ).then(({ version, article }) => ({ version, article })
+      ).catch((error) => {
+        setError(error)
+        return {}
+      })
 
       if (data?.article) {
-        setLive(props.version ? data.version : data.article.live)
+        const article = data.article
+        const version = currentVersion ? data.version : article.live
+        setLive(version)
         setArticleInfos({
-          _id: data.article._id,
-          title: data.article.title,
-          zoteroLink: data.article.zoteroLink,
-          owners: data.article.owners.map((o) => o.displayName),
+          _id: article._id,
+          title: article.title,
+          zoteroLink: article.zoteroLink,
+          owners: article.owners.map((o) => o.displayName),
         })
-        setVersions(data.article.versions)
+
+        setVersions(article.versions)
+
+        const md = version.md
+        dispatch({ type: 'UPDATE_ARTICLE_STATS', md })
+        dispatch({ type: 'UPDATE_ARTICLE_STRUCTURE', md })
       }
+
       setIsLoading(false)
     })()
-  }, [props.version])
+  }, [currentVersion])
 
   if (graphqlError) {
     return (
@@ -213,7 +255,7 @@ const ConnectedWrite = (props) => {
         article={articleInfos}
         {...live}
         compareTo={props.compareTo}
-        selectedVersion={props.version}
+        selectedVersion={currentVersion}
         versions={versions}
         readOnly={readOnly}
         sendVersion={sendVersion}
@@ -230,7 +272,7 @@ const ConnectedWrite = (props) => {
           versions={versions}
           readOnly={readOnly}
           article={articleInfos}
-          selectedVersion={props.version}
+          selectedVersion={currentVersion}
         />
       )}
 

diff --git a/front/gatsby/src/components/Write/WriteLeft.jsx b/front/gatsby/src/components/Write/WriteLeft.jsx
@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react'
+import React, { useState, useMemo } from 'react'
+import { connect } from 'react-redux'
 
 import styles from './writeLeft.module.scss'
 import Stats from './Stats'
@@ -7,9 +8,10 @@ import Sommaire from './Sommaire'
 import Versions from './Versions'
 import bib2key from './bibliographe/CitationsFilter'
 
-export default (props) => {
-  const bibTeXEntries = useMemo(() => bib2key(props.bib), [props.bib])
+const mapStateToProps = ({ articleStats }) => ({ articleStats })
 
+function WriteLeft (props) {
+  const bibTeXEntries = useMemo(() => bib2key(props.bib), [props.bib])
   const [expanded, setExpanded] = useState(true)
 
   return (
@@ -21,19 +23,19 @@ export default (props) => {
         {expanded ? 'close' : 'open'}
       </nav>
       {expanded && (
-        <>
-          <div>
-            <header>
-              <h1>{props.article.title}</h1>
-              <h2>by {props.article.owners.join(', ')}</h2>
-            </header>
-            <Versions {...props} />
-            <Sommaire {...props} />
-            <Biblio bibTeXEntries={bibTeXEntries} {...props} />
-            <Stats md={props.md} />
-          </div>
-        </>
+        <div>
+          <header>
+            <h1>{props.article.title}</h1>
+            <h2>by {props.article.owners.join(', ')}</h2>
+          </header>
+          <Versions {...props} />
+          <Sommaire md={props.md} setCodeMirrorCursor={props.setCodeMirrorCursor} />
+          <Biblio bibTeXEntries={bibTeXEntries} readOnly={props.readOnly} bib={props.bib} handleBib={props.handleBib} article={props.article} />
+          <Stats stats={props.articleStats} />
+        </div>
       )}
     </nav>
   )
 }
+
+export default connect(mapStateToProps)(WriteLeft)