Getting cognates summary (#1137)

* init

* renewed

* fix

* getting xfields

* dirty debugging

* cleanup

* next steps

* fixes

* next steps

* debug_flag

* tuned json

* minor

* almost final

* done

src/Layout/Routes.js

@@ -17,6 +17,7 @@ import MapSelectedLanguages from "pages/DistanceMap/map";
 import SelectedLanguages from "pages/DistanceMap/selectorLangGroup";
 import Docx2Eaf from "pages/Docx2Eaf";
 import Docx2Xlsx from "pages/Docx2Xlsx";
+import ListCognates from "pages/ListCognates";
 import EditTranslations from "pages/EditTranslations";
 import Files from "pages/Files";
 import Grants from "pages/Grants";
@@ -79,6 +80,7 @@ const AppRoutes = () => (
     <Route path="/docx2xlsx" element={<Docx2Xlsx />} />
     <Route path="/valency" element={<Valency />} />
     <Route path="/adverb" element={<Adverb />} />
+    <Route path="/list_cognates" element={<ListCognates />} />
     <Route element={<NotFound />} />
   </Routes>
 );

src/pages/ListCognates/index.js

@@ -0,0 +1,141 @@
+import { connect } from "react-redux";
+import { Button, Checkbox, Dimmer, Icon, Input, Label, List, Loader, Message, Segment } from "semantic-ui-react";
+import { gql, useMutation } from "@apollo/client";
+import { compose } from "recompose";
+import React, { useContext, useState, useEffect } from "react";
+
+import TranslationContext from "Layout/TranslationContext";
+
+const cognatesSummaryMutation = gql`
+  mutation cognatesSummary (
+    $onlyInToc: Boolean!
+    $languageOffset: Int
+    $languageLimit: Int
+    $debugFlag: Boolean
+  ) {
+    cognates_summary(
+      only_in_toc: $onlyInToc
+      offset: $languageOffset
+      limit: $languageLimit
+      debug_flag: $debugFlag
+    ) {
+      json_url
+      language_list
+      triumph
+    }
+  }
+`;
+
+const ListCognates = ({user}) => {
+
+  const [onlyInToc, setOnlyInToc] = useState(false);
+  const [cleanResult, setCleanResult] = useState(false);
+  const [languageOffset, setLanguageOffset] = useState(0);
+  const [languageLimit, setLanguageLimit] = useState(10);
+  const [getCognatesSummary, { data, error, loading }] = useMutation(cognatesSummaryMutation);
+
+  useEffect(() => setCleanResult(false), [loading, data]);
+  const getTranslation = useContext(TranslationContext);
+
+  const debugFlag = false;
+
+  return (
+    <div className="background-content">
+    {(user.id === undefined || user.id !== 1) && !loading ? (
+      <Message>
+        <Message.Header>{getTranslation("Please sign in")}</Message.Header>
+        <p>{getTranslation("This page is available for administrator only")}</p>
+      </Message>
+    ) : loading ? (
+      <Segment>
+        <Loader active inline="centered" indeterminate>
+          {getTranslation("Loading")}...
+        </Loader>
+      </Segment>
+    ) : (
+      <Segment>
+        <List>
+          <List.Item>
+            <Checkbox
+              label={getTranslation("Only high-order languages")}
+              checked={onlyInToc}
+              onChange={(e, { checked }) => {
+                setOnlyInToc(checked);
+                setCleanResult(!data);
+              }}
+            />
+          </List.Item>
+          <List.Item>
+            <Input
+              label={getTranslation("Languages offset")}
+              type='number'
+              min='0'
+              value={languageOffset}
+              onChange={(e, { value }) => {
+                setLanguageOffset(value);
+                setCleanResult(!data);
+              }}
+              className="lingvo-labeled-input"
+            />
+          </List.Item>
+          <List.Item>
+            <Input
+              label={getTranslation("Languages limit")}
+              type='number'
+              min='1'
+              value={languageLimit}
+              onChange={(e, { value }) => {
+                setLanguageLimit(value);
+                setCleanResult(!data);
+              }}
+              className="lingvo-labeled-input"
+            />
+          </List.Item>
+          <List.Item>
+            <Button
+              color="green"
+              content={getTranslation("Get cognates summary")}
+              onClick={ () => {
+                getCognatesSummary({ variables: { onlyInToc, languageOffset, languageLimit, debugFlag } });
+                setCleanResult(true);
+              }}
+            />
+          </List.Item>
+        </List>
+        { error && !cleanResult && (
+          <Message negative>
+            <Message.Header>{getTranslation("Request error")}</Message.Header>
+            <p>
+              <span>{getTranslation("Please contact developers at")} </span>
+              <a href="https://t.me/lingvodoc_support" target="_blank" rel="noreferrer">
+                {getTranslation("Support@Telegram")}
+              </a>
+              <span> {getTranslation("or at")} </span>
+              <a href="https://github.com/ispras/lingvodoc-react/issues">{getTranslation("Lingvodoc Github")}</a>
+              <span>.</span>
+            </p>
+            <p> {error.message} </p>
+          </Message>
+        )}
+        { data && !error && !cleanResult && (
+          <Message positive>
+            <Message.Header>{getTranslation("Scanned successfully")}</Message.Header>
+            <p/>
+            <a href={data.cognates_summary.json_url}> Result JSON </a>
+            <h4> List of processed languages: </h4>
+            { data.cognates_summary.language_list.map(lang =>
+              <p> {lang} </p>
+            )}
+          </Message>
+        )}
+      </Segment>
+    )}
+    </div>
+  );
+}
+
+ListCognates.contextType = TranslationContext;
+
+export default compose(
+  connect(state => state.user)
+)(ListCognates);