From 1a4b810180eddca0e92c5c90b1cd72c2353bc5b7 Mon Sep 17 00:00:00 2001
From: vmonakhov <vmonakhov@ispras.ru>
Date: Wed, 25 Oct 2023 17:09:59 +0300
Subject: [PATCH] Count missed words and hide dashes (#1049)

* fix styles dnd

* fix dnd

* fix dnd and styles

* blob.values.dedash

* fix shortcut

* fix

* Fixed "dedash"

* Tuned frontend

* Minor

* Count missed words

---------

Co-authored-by: nataliauvarova <n.uvarova@ispras.ru>
Co-authored-by: nataliauvarova <90451645+nataliauvarova@users.noreply.github.com>
---
 src/components/CorporaView/Row.js        | 14 +++----
 src/components/CorporaView/index.js      |  5 ++-
 src/components/CorporaView/styles.scss   | 11 ++++++
 src/components/LexicalEntry/Text.js      |  5 ++-
 src/components/LexicalEntryCorp/Text.js  | 47 ++++++++----------------
 src/components/LexicalEntryCorp/index.js | 12 +++---
 src/pages/CorpImport/ColumnMapper.js     | 11 ++----
 src/pages/CorpImport/Linker.js           | 11 +++++-
 src/pages/CorpImport/api.js              | 11 ++----
 src/pages/CorpImport/index.js            |  9 +++--
 src/pages/DictImport/styles.scss         |  6 +--
 src/styles/main.scss                     | 26 +++++++++++++
 12 files changed, 98 insertions(+), 70 deletions(-)
 create mode 100644 src/components/CorporaView/styles.scss

diff --git a/src/components/CorporaView/Row.js b/src/components/CorporaView/Row.js
index 309a54bf..da530a14 100644
--- a/src/components/CorporaView/Row.js
+++ b/src/components/CorporaView/Row.js
@@ -40,7 +40,6 @@ const Row = ({
   id, /* new!!!!! */
   moveListItem, /* new!!!!! */
   dragAndDropEntries, /* new!!!!! */
-
   entries /* new!!!!! */
   /* eslint-enable react/prop-types */
 }) => {
@@ -100,8 +99,9 @@ const Row = ({
         return;
       }
       // Determine rectangle on screen
-      //const hoverBoundingRect = ref.current?.getBoundingClientRect();
-      const hoverBoundingRect = ref.current.parentElement.parentElement?.getBoundingClientRect(); // fix!!!!! 
+      const hoverBoundingRect = ref.current?.getBoundingClientRect();
+      //const hoverBoundingRect = ref.current.parentElement.parentElement?.getBoundingClientRect(); // fix!!!!! 
+
       // Get vertical middle
       const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
       // Determine mouse position
@@ -137,8 +137,6 @@ const Row = ({
 
   const dragDropRef = dragRef(dropRef(ref));
 
-  /*const opacity = isDragging ? 0 : 1;*/
-
   /* /new!!!!!! */
 
   const entry_id_str = id2str(entry.id);
@@ -154,7 +152,9 @@ const Row = ({
       {/* new!!!!! */}
       <Table.Cell style={(mode === "edit") ? {} : { display: "none" }}>
         <div ref={dragDropRef}>
-          <Button icon={<i className="lingvo-icon lingvo-icon_dnd" />} />
+          <Button.Group basic className="lingvo-buttons-group">
+            <Button icon={<i className="lingvo-icon lingvo-icon_dnd" />} />
+          </Button.Group>
         </div>
       </Table.Cell>
       {/* /new!!!!! */}
@@ -298,6 +298,6 @@ export default onlyUpdateForKeys([
   "columns",
   "id", /*  ????? new!!!!! */
   "index", /*  ????? new!!!!! */
-  "moveListItem", /* new!!!!! */
+  /*"moveListItem",*/ /* new!!!!! */
   "entries" /* new!!!!! */
 ])(Row);
diff --git a/src/components/CorporaView/index.js b/src/components/CorporaView/index.js
index 592035fa..6139572d 100644
--- a/src/components/CorporaView/index.js
+++ b/src/components/CorporaView/index.js
@@ -32,6 +32,8 @@ import smoothScroll from "utils/smoothscroll";
 import TableBody from "./TableBody";
 import TableHeader from "./TableHeader";
 
+import "./styles.scss";
+
 const ROWS_PER_PAGE = 20;
 
 const ModalContentWrapper = styled("div")`
@@ -992,7 +994,8 @@ class P extends React.Component {
                 onSortModeChange={(fieldId, order) => setSort(fieldId, order)}
                 onSortModeReset={() => resetSort()}
                 selectEntries={mode === "edit"}
-                entries={items}
+                /*entries={items}*/
+                entries={this.state.cards.length && this.state.cards || items} /* new!!!!! */
                 checkEntries={isTableLanguagesPublish}
                 selectedRows={selectedRows}
                 selectedColumns={selectedColumns}
diff --git a/src/components/CorporaView/styles.scss b/src/components/CorporaView/styles.scss
new file mode 100644
index 00000000..fb138e9b
--- /dev/null
+++ b/src/components/CorporaView/styles.scss
@@ -0,0 +1,11 @@
+/* parallel corpora */
+.lingvo-scrolling-content {
+  padding-bottom: 20px !important;
+
+  & .lingvo-scrolling-tab {
+    @media only screen and (max-device-width: 1000px), only screen and (max-width: 1000px) {
+      margin-bottom: 0 !important;
+    }
+  }
+}
+/* /parallel corpora */
\ No newline at end of file
diff --git a/src/components/LexicalEntry/Text.js b/src/components/LexicalEntry/Text.js
index 56074e08..496dbbea 100644
--- a/src/components/LexicalEntry/Text.js
+++ b/src/components/LexicalEntry/Text.js
@@ -101,13 +101,16 @@ class TextEntityContent extends React.Component {
     const pg = /\[\d+[ab]?\]/;
     const ln = /\(\d+\)/;
     const snt = /\/{2}/;
+    const missed = /[/]missed text[/]/;
     // TODO: change 'number' to something meaningful
     const metatext = number
       ? new RegExp(
           pg_ln.source + "|" +
           pg.source + "|" +
           ln.source + "|" +
-          snt.source)
+          snt.source + "|" +
+          missed.source
+          )
       : new RegExp();
 
     switch (mode) {
diff --git a/src/components/LexicalEntryCorp/Text.js b/src/components/LexicalEntryCorp/Text.js
index 1083de92..27a6874e 100644
--- a/src/components/LexicalEntryCorp/Text.js
+++ b/src/components/LexicalEntryCorp/Text.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import { useDrag } from "react-dnd";
 import TextareaAutosize from 'react-textarea-autosize';
-import { Button, Checkbox, Input } from "semantic-ui-react";
+import { Button, Checkbox } from "semantic-ui-react";
 import { find, isEqual } from "lodash";
 import PropTypes from "prop-types";
 import { onlyUpdateForKeys } from "recompose";
@@ -31,8 +31,6 @@ const TextEntityContent = ({
   id /* new!!!!!! */
 }) => {
 
-  /*console.log('render TextEntityContent!!!!!');*/
-
   const [edit, setEdit] = useState(false);
   const [content, setContent] = useState(entity.content);
 
@@ -53,13 +51,9 @@ const TextEntityContent = ({
 
   const onKeyDown = useCallback((event) => {
 
-    console.log('event=====');
-    console.log(event);
-
     breakdown(event, parentEntity, entity);
-  }, []);
 
-  /* /new!!!!! */
+  }, []);
 
   // useDrag - the list item is draggable
   const [{ isDragging}, dragRef, preview] = useDrag({
@@ -75,6 +69,8 @@ const TextEntityContent = ({
     }
   });
 
+  /* /new!!!!! */
+
   if (checkEntries) {
     if (checkedAll) {
       if (checkedAll.checkedAll) {
@@ -120,9 +116,9 @@ const TextEntityContent = ({
   switch (mode) {
     case "edit":
       return !dropped ? (
-        <div className="lingvo-input-buttons-group" ref={preview} id={id}>
+        <div /* new!!!! */ className={isDragging && "lingvo-input-buttons-group lingvo-input-buttons-group_drag" || "lingvo-input-buttons-group"} ref={preview} id={id}>
           {!(is_being_updated || edit) && (
-            <span className="lingvo-input-buttons-group__name">{content} {isDragging && 'Oops'}</span>
+            <span className="lingvo-input-buttons-group__name">{content}</span>
           )}
           {(is_being_updated || edit) && (
             /* new!!!!!! */
@@ -136,9 +132,8 @@ const TextEntityContent = ({
           )}
           <Button.Group basic icon className="lingvo-buttons-group">
             {/* new!!!!! */}
-            <div ref={dragRef}>
-              <Button icon={<i className="lingvo-icon lingvo-icon_dnd" />}
-            />
+            <div ref={dragRef} className="lingvo-buttons-group__drag">
+              <Button icon={<i className="lingvo-icon lingvo-icon_dnd" />} />
             </div>
             {/* new!!!!! */}
             <Button icon={is_being_updated ? <i className="lingvo-icon lingvo-icon_spinner" /> : edit ? <i className="lingvo-icon lingvo-icon_save2" /> : <i className="lingvo-icon lingvo-icon_edit2" />}
@@ -371,44 +366,32 @@ const Edit = ({
 
   const onChange = useCallback((event) => {
 
-    console.log('func onChange!!!!!!');
-
-    /*
-    console.log('target.value=====');
-    console.log(target.value);*/
-
     setContent(event.target.value);
 
   }, [content]);
 
   const onKeyDown = useCallback((event) => {
 
-    console.log('func onKeyDown!!!!!!');
-
-    console.log('event=====');
+    breakdown(event, parentEntity);
 
-    console.log(event);
+    if (event.code === "Enter" && !event.ctrlKey) {
 
-    if (event.code === "Enter") {
       if (content) {
         onSave(content);
       }
     }
 
-    breakdown(event, parentEntity);
-
     if (event.keyCode === 27) {
       onCancel();
     }
   }, [content]);
 
-  const onBlur = useCallback(() => {
+  const onHandlerSave = useCallback((event) => {
 
-    console.log('func onBlur!!!!!!');
-    
     if (content) {
       onSave(content);
     }
+
   }, [content]);
   
   return (
@@ -416,11 +399,13 @@ const Edit = ({
       <TextareaAutosize 
         onChange={onChange}
         onKeyDown={onKeyDown}
-        onBlur={onBlur}
+        /*onBlur={onBlur}*/
         className="lingvo-input-action lingvo-input-action_textarea" 
       />
       <Button.Group basic className="lingvo-buttons-group">
-        <Button icon={is_being_created ? <i className="lingvo-icon lingvo-icon_spinner" /> : <i className="lingvo-icon lingvo-icon_save2" />} 
+        <Button 
+          icon={is_being_created ? <i className="lingvo-icon lingvo-icon_spinner" /> : <i className="lingvo-icon lingvo-icon_save2" />} 
+          onClick={onHandlerSave} /* new!!!!! */
           disabled={is_being_created || !content}
           className={is_being_created ? "lingvo-button-spinner" : ""}
         />
diff --git a/src/components/LexicalEntryCorp/index.js b/src/components/LexicalEntryCorp/index.js
index aa822804..6e08f8c8 100644
--- a/src/components/LexicalEntryCorp/index.js
+++ b/src/components/LexicalEntryCorp/index.js
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from "react";
+import React, {useCallback, useContext, useState} from "react";
 import { useDrop } from "react-dnd";
 import { Button } from "semantic-ui-react";
 import { gql } from "@apollo/client";
@@ -11,6 +11,7 @@ import { queryCounter } from "backend";
 /* new!!!!! */
 /*import { queryLexicalEntries } from "components/PerspectiveView";*/
 import { queryLexicalEntries } from "components/CorporaView";
+import TranslationContext from "Layout/TranslationContext";
 /* /new!!!!! */
 import { compositeIdToString, compositeIdToString as id2str } from "utils/compositeId";
 
@@ -174,6 +175,8 @@ const Entities = ({
   const [remove_set, setRemoveSet] = useState({});
   const [update_set, setUpdateSet] = useState({});
 
+  const getTranslation = useContext(TranslationContext);
+
   /* new!!!!! */
   const [{ isOver }, dropRef] = useDrop({
       accept: 'entity',
@@ -440,10 +443,6 @@ const Entities = ({
   /* Shortcut "ctrl+Enter" */
   const breakdown = useCallback((event, parentEntity, entity) => {
 
-    /*console.log('Breakdown!!!!!!');
-    console.log('Breakdown: event.target======');
-    console.log(event.target);*/
-    
     if (event.ctrlKey && event.code === "Enter") {
         event.preventDefault();
         //console.log("Breakdown: ShortCut !!!!!!!!!!!");
@@ -540,7 +539,7 @@ const Entities = ({
           {!edit && (
             <div ref={dropRef} /* new!!!! */>
               {/* new!!!!! */}
-              {isOver && <div>Drop Here!</div>}
+              {isOver && <div className="lingvo-drop-here">{getTranslation("Drop Here!")}</div>}
               {/* /new!!!!! */}
 
               <Button.Group basic className="lingvo-buttons-group">
@@ -548,7 +547,6 @@ const Entities = ({
                   onClick={() => setEdit(true)} 
                 />
               </Button.Group>
-              
             </div>
           )}
 
diff --git a/src/pages/CorpImport/ColumnMapper.js b/src/pages/CorpImport/ColumnMapper.js
index cb7a2b8b..aa8e8fa7 100644
--- a/src/pages/CorpImport/ColumnMapper.js
+++ b/src/pages/CorpImport/ColumnMapper.js
@@ -46,13 +46,11 @@ function Column({ index, fieldOptions, type, onSetColumnType, actions }) {
         placeholder={`${getTranslation("Field selection")}...`}
         options={fieldOptions}
         value={selectedField && selectedField.value}
-        onChange={(e, { value }) => {
-          onSetColumnType(fieldOptions[value].id, fieldOptions[value].name);
-        }}
+        onChange={(e, { value }) => onSetColumnType(fieldOptions[value])}
       />
       <Popup.Content className="popup-field-type">
         {fieldOptions.map(f => (
-          <FieldButton key={f.key} onClick={() => onSetColumnType(f.id, f.name)} text={f.text} isSelected={is(type, f.id)} />
+          <FieldButton key={f.key} onClick={() => onSetColumnType(f.id)} text={f.text} isSelected={is(type, f.id)} />
         ))}
       </Popup.Content>
     </Popup>
@@ -104,16 +102,15 @@ function ColumnMapper({ state, types, columnTypes, onSetColumnType }) {
   for (const type of typesSortedFiltered) {
     const id = type.get("id");
     const idStr = id.join("/");
-    const name = T(type.get("translations").toJS());
 
     fieldOptions.push({
       key: idStr,
       value: idStr,
       text: `${T(type.get("translations").toJS())} (${type.get("data_type")})`,
-      id, name
+      id
     });
 
-    fieldOptions[idStr] = { id, name };
+    fieldOptions[idStr] = id;
   }
 
   let i = 0;
diff --git a/src/pages/CorpImport/Linker.js b/src/pages/CorpImport/Linker.js
index 1360d4e1..9739f339 100644
--- a/src/pages/CorpImport/Linker.js
+++ b/src/pages/CorpImport/Linker.js
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from "react";
-import { Button, Dropdown } from "semantic-ui-react";
+import { Button, Dropdown, Checkbox } from "semantic-ui-react";
 import { pure } from "recompose";
 
 import TranslationContext from "Layout/TranslationContext";
@@ -8,7 +8,8 @@ function Columns({ blob, index, onDelete, onUpdateColumn }) {
   const getTranslation = useContext(TranslationContext);
   const color = index ? "yellow" : "green";
   const name = index ? "sentence" : "base sentence";
-  useEffect(() => { onUpdateColumn("sentence", "noname") }, [blob]);
+  const value = blob.getIn(["values", "sentence"], "dash");
+  useEffect(() => { onUpdateColumn("sentence", value) }, []);
 
   return (
     <div className="blob blob_corp">
@@ -19,6 +20,12 @@ function Columns({ blob, index, onDelete, onUpdateColumn }) {
           {getTranslation(name)}
         </Button>
       </div>
+      { !index && (
+        <Checkbox className="blob-checkbox"
+          label={getTranslation("Hide dashes")}
+          onClick={() => onUpdateColumn("sentence", value === "dash" ? "dedash" : "dash", value)}
+          checked={value === "dedash"} />
+      ) || <div className="blob-checkbox" />}
     </div>
   );
 }
diff --git a/src/pages/CorpImport/api.js b/src/pages/CorpImport/api.js
index a942a677..2626f135 100644
--- a/src/pages/CorpImport/api.js
+++ b/src/pages/CorpImport/api.js
@@ -23,16 +23,13 @@ export function corpusInfo({ linking, languages, licenses }) {
 
 function blobExport(blob, columnType) {
   const blob_id = blob.get("id").toArray();
-  const values = blob.get("values", new Map());
-
-  const field_map = {
-    column_name: values.get("sentence", "Sentence in transliteration"),
-    field_id: columnType.get("sentence", new Map()).toArray()
-  };
+  const dedash = (blob.getIn(["values", "sentence"], "dash") === "dedash");
+  const field_id =  columnType.get("sentence", new Map()).toArray();
 
   return {
     blob_id,
-    field_map
+    field_id,
+    dedash
   };
 }
 
diff --git a/src/pages/CorpImport/index.js b/src/pages/CorpImport/index.js
index 7f32f437..f0689b10 100644
--- a/src/pages/CorpImport/index.js
+++ b/src/pages/CorpImport/index.js
@@ -120,10 +120,11 @@ class Info extends React.Component {
   }
 
   onSetColumnType(id) {
-    return column => (field, name) => {
-      this.props.setColumnType(id, column, field);
-      this.props.updateColumn(id, column, name, null);
-    };
+    return column => field => this.props.setColumnType(id, column, field);
+  }
+
+  onUpdateColumn(id) {
+    return (column, value, oldValue) => this.props.updateColumn(id, column, value, oldValue);
   }
 
   onUpdateColumn(id) {
diff --git a/src/pages/DictImport/styles.scss b/src/pages/DictImport/styles.scss
index fd154856..6b397a96 100644
--- a/src/pages/DictImport/styles.scss
+++ b/src/pages/DictImport/styles.scss
@@ -13,7 +13,7 @@
     display: grid;
     padding: 0.5em 0;
     width: 100%;
-    grid-template-columns: 200px 1fr 20px;
+    grid-template-columns: 200px 1fr 40px;
     grid-template-rows: auto;
 
     grid-template-areas: "name columns checkbox";
@@ -22,8 +22,7 @@
     margin-bottom: 0.5em;
 
     &_corp {
-      grid-template-columns: 200px 1fr;
-      grid-template-areas: "name columns";
+      grid-template-columns: 200px 150px 200px;
     }
 
     .blob-name {
@@ -36,6 +35,7 @@
       display: flex;
       grid-area: columns;
       overflow: auto;
+      margin-left: 1em;
 
       .column-field-type {
         display: flex;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index b69c09df..17c4ecc2 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -3928,10 +3928,23 @@ body {
           }
         }
       }
+
     }
 
   }
 
+  &.ui.basic.buttons &__drag:first-child .button {
+    max-height: 34px !important;
+
+    &:hover,
+    &:active,
+    &:focus {
+      -webkit-box-shadow: none !important;
+      box-shadow: none !important;
+      border-radius: 10px 0 0 10px !important;
+    }
+  }
+
   &__text.button {
     flex: 0 1 auto !important;
     white-space: nowrap !important;
@@ -4033,6 +4046,14 @@ body {
 }
 /* /lingvo input action */
 
+/* lingvo-drop-here */
+.lingvo-drop-here {
+  font-size: 14px !important;
+  color: #5d54cd;
+  padding: 0 0 2px 6px;
+}
+/* /lingvo-drop-here */
+
 /* lingvo input buttons group */
 .lingvo-input-buttons-group {
   display: flex;
@@ -4059,6 +4080,11 @@ body {
       }
     }
   }
+
+  &_drag {
+    opacity: 0.3 !important;
+  }
+
 }
 /* /lingvo input buttons group */