WIP Basic Proskomma components

.gitignore

@@ -1,3 +1,6 @@
+# Jetbrains
+.idea
+
 # production
 build
 styleguide

package.json

@@ -37,14 +37,15 @@
     "deep-freeze": "0.0.1",
     "gitea-react-toolkit": "^1.3.10",
     "js-yaml-parser": "^1.0.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
     "markdown-translatable": "^1.1.4",
     "nyc": "^15.0.0-beta.3",
     "prop-types": "^15.7.2",
     "react-waypoint": "^9.0.2",
     "string-punctuation-tokenizer": "^2.1.2",
     "use-deep-compare-effect": "1.3.1",
-    "usfm-js": "^2.0.2"
+    "usfm-js": "^2.0.2",
+    "uw-proskomma": "0.0.9"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.5",
@@ -127,4 +128,4 @@
       "<rootDir>__tests__/setupTests.js"
     ]
   }
-}
+}

src/components/mocks/hi_tit.usfm.js

@@ -1,119 +1,115 @@
-export default `\\id TIT
+export default `\\id TIT Bla Bla
 \\ide UTF-8
 \\rem Copyright Information: Creative Commons Attribution-ShareAlike 4.0 License
 \\h तीतुस
 \\toc1 तीतुस
 \\toc2 तीतुस
 \\toc3 tit
 \\mt1 Titus
-
-
-\\s5
+\\ts\\*
 \\c 1
 \\s शुभकामनाएँ
 \\p
 \\v 1 पौलुस की ओर से, जो परमेश्‍वर का दास और यीशु मसीह का प्रेरित है, परमेश्‍वर के चुने हुए लोगों के विश्वास को स्थापित करने और सच्चाई का ज्ञान स्थापित करने के लिए जो भक्ति के साथ सहमत हैं,
 \\v 2 उस अनन्त जीवन की आशा पर, जिसकी प्रतिज्ञा परमेश्‍वर ने जो झूठ बोल नहीं सकता सनातन से की है,
 \\v 3 पर ठीक समय पर* अपने वचन को उस प्रचार के द्वारा प्रगट किया, जो हमारे उद्धारकर्ता परमेश्‍वर की आज्ञा के अनुसार मुझे सौंपा गया।
 \\p
-\\s5
 \\v 4 तीतुस के नाम जो विश्वास की सहभागिता के विचार से मेरा सच्चा पुत्र है: परमेश्‍वर पिता और हमारे उद्धारकर्ता मसीह यीशु की ओर से तुझे अनुग्रह और शान्ति होती रहे।
 \\s प्राचीन की योग्यताएँ
 \\p
 \\v 5 मैं इसलिए तुझे क्रेते में छोड़ आया था, कि तू शेष रही हुई बातों को सुधारें, और मेरी आज्ञा के अनुसार नगर-नगर प्राचीनों को नियुक्त करे।
 \\p
-\\s5
 \\v 6 जो निर्दोष और एक ही पत्‍नी के पति हों, जिनके बच्चे विश्वासी हो, और जिन पर लुचपन और निरंकुशता का दोष नहीं।
 \\v 7 क्योंकि अध्यक्ष को परमेश्‍वर का भण्डारी होने के कारण निर्दोष होना चाहिए; न हठी, न क्रोधी, न पियक्कड़, न मार पीट करनेवाला, और न नीच कमाई का लोभी।
 \\p
-\\s5
+\\ts\\*
 \\v 8 पर पहुनाई करनेवाला, भलाई का चाहनेवाला, संयमी, न्यायी, पवित्र और जितेन्द्रिय हो;
 \\v 9 और विश्वासयोग्य वचन पर जो धर्मोपदेश के अनुसार है, स्थिर रहे; कि खरी शिक्षा से उपदेश* दे सके; और विवादियों का मुँह भी बन्द कर सके।
 \\s पाखण्डी शिक्षक
 \\p
-\\s5
+\\ts\\*
 \\v 10 क्योंकि बहुत से अनुशासनहीन लोग, निरंकुश बकवादी और धोखा देनेवाले हैं; विशेष करके खतनावालों में से।
 \\v 11 इनका मुँह बन्द करना चाहिए: ये लोग नीच कमाई के लिये अनुचित बातें सिखाकर घर के घर बिगाड़ देते हैं।
 \\p
-\\s5
+\\ts\\*
 \\v 12 उन्हीं में से एक जन ने जो उन्हीं का भविष्यद्वक्ता हैं, कहा है, “क्रेती लोग सदा झूठे, दुष्ट पशु और आलसी पेटू होते हैं।”
 \\v 13 यह गवाही सच है, इसलिए उन्हें कड़ाई से चेतावनी दिया कर, कि वे विश्वास में पक्के हो जाएँ।
 \\p
-\\s5
+\\ts\\*
 \\v 14 यहूदियों की कथा कहानियों और उन मनुष्यों की आज्ञाओं पर मन न लगाएँ, जो सत्य से भटक जाते हैं।
 \\p
-\\s5
+\\ts\\*
 \\v 15 शुद्ध लोगों के लिये सब वस्तुएँ शुद्ध हैं, पर अशुद्ध और अविश्वासियों के लिये कुछ भी शुद्ध नहीं वरन् उनकी बुद्धि और विवेक दोनों अशुद्ध हैं।
 \\v 16 वे कहते हैं, कि हम परमेश्‍वर को जानते हैं पर अपने कामों से उसका इन्कार करते हैं*, क्योंकि वे घृणित और आज्ञा न माननेवाले हैं और किसी अच्छे काम के योग्य नहीं।
 
-\\s5
+\\ts\\*
 \\c 2
 \\s सच्ची शिक्षा का अनुसरण
 \\p
 \\v 1 पर तू, ऐसी बातें कहा कर जो खरे सिद्धांत के योग्य हैं।
 \\v 2 अर्थात् वृद्ध पुरुषों सचेत और गम्भीर और संयमी हों, और उनका विश्वास और प्रेम और धीरज पक्का हो।
 \\p
-\\s5
+\\ts\\*
 \\v 3 इसी प्रकार बूढ़ी स्त्रियों का चाल चलन भक्तियुक्त लोगों के समान हो, वे दोष लगानेवाली और पियक्कड़ नहीं; पर अच्छी बातें सिखानेवाली हों।
 \\v 4 ताकि वे जवान स्त्रियों को चेतावनी देती रहें*, कि अपने पतियों और बच्चों से प्रेम रखें;
 \\v 5 और संयमी, पतिव्रता, घर का कारबार करनेवाली, भली और अपने-अपने पति के अधीन रहनेवाली हों, ताकि परमेश्‍वर के वचन की निन्दा न होने पाए।
 \\p
-\\s5
+\\ts\\*
 \\v 6 ऐसे ही जवान पुरुषों को भी समझाया कर, कि संयमी हों।
 \\v 7 सब बातों में अपने आप को भले कामों का नमूना बना; तेरे उपदेश में सफाई, गम्भीरता
 \\v 8 और ऐसी खराई पाई जाए, कि कोई उसे बुरा न कह सके; जिससे विरोधी हम पर कोई दोष लगाने का अवसर न पा कर लज्जित हों।
 \\p
-\\s5
+\\ts\\*
 \\v 9 दासों को समझा, कि अपने-अपने स्वामी के अधीन रहें, और सब बातों में उन्हें प्रसन्‍न रखें, और उलटकर जवाब न दें;
 \\v 10 चोरी चालाकी न करें; पर सब प्रकार से पूरे विश्वासी निकलें, कि वे सब बातों में हमारे उद्धारकर्ता परमेश्‍वर के उपदेश की शोभा बढ़ा दें।
 \\p
-\\s5
+\\ts\\*
 \\v 11 क्योंकि परमेश्‍वर का अनुग्रह प्रगट है, जो सब मनुष्यों में उद्धार लाने में सक्षम है*।
 \\v 12 और हमें चिताता है, कि हम अभक्ति और सांसारिक अभिलाषाओं से मन फेरकर* इस युग में संयम और धार्मिकता से और भक्ति से जीवन बिताएँ;
 \\v 13 और उस धन्य आशा की अर्थात् अपने महान परमेश्‍वर और उद्धारकर्ता यीशु मसीह की महिमा के प्रगट होने की प्रतीक्षा करते रहें।
 \\p
-\\s5
+\\ts\\*
 \\v 14 जिस ने अपने आप को हमारे लिये दे दिया, कि हमें हर प्रकार के अधर्म से छुड़ा ले, और शुद्ध करके अपने लिये एक ऐसी जाति बना ले जो भले-भले कामों में सरगर्म हो। (निर्ग. 19:5, व्य. 4:20, व्य. 7:6, व्य. 14:2, भज. 72:14, भज. 130:8, यहे. 37:23)
 \\p
-\\s5
+\\ts\\*
 \\v 15 पूरे अधिकार के साथ ये बातें कह और समझा और सिखाता रह। कोई तुझे तुच्छ न जानने पाए।
 
-\\s5
+\\ts\\*
 \\c 3
 \\s मसीही चाल-चलन
 \\p
 \\v 1 लोगों को सुधि दिला, कि हाकिमों और अधिकारियों के अधीन रहें, और उनकी आज्ञा मानें, और हर एक अच्छे काम के लिये तैयार रहे,
 \\v 2 किसी को बदनाम न करें*; झगड़ालू न हों; पर कोमल स्वभाव के हों, और सब मनुष्यों के साथ बड़ी नम्रता के साथ रहें।
 \\p
-\\s5
+\\ts\\*
 \\v 3 क्योंकि हम भी पहले, निर्बुद्धि और आज्ञा न माननेवाले, और भ्रम में पड़े हुए, और विभिन्न प्रकार की अभिलाषाओं और सुख-विलास के दासत्व में थे, और बैर-भाव, और डाह करने में जीवन निर्वाह करते थे, और घृणित थे, और एक दूसरे से बैर रखते थे।
 \\p
-\\s5
+\\ts\\*
 \\v 4 पर जब हमारे उद्धारकर्ता परमेश्‍वर की भलाई, और मनुष्यों पर उसका प्रेम प्रकट हुआ
 \\v 5 तो उसने हमारा उद्धार किया और यह धार्मिक कामों के कारण नहीं, जो हमने आप किए, पर अपनी दया के अनुसार, नये जन्म के स्नान, और पवित्र आत्मा के हमें नया बनाने के द्वारा हुआ।
 \\p
-\\s5
+\\ts\\*
 \\v 6 जिसे उसने हमारे उद्धारकर्ता यीशु मसीह के द्वारा हम पर अधिकाई से उण्डेला। (योए. 2:28)
 \\v 7 जिससे हम उसके अनुग्रह से धर्मी ठहरकर, अनन्त जीवन की आशा के अनुसार वारिस बनें।
 \\p
-\\s5
+\\ts\\*
 \\v 8 यह बात सच है, और मैं चाहता हूँ, कि तू इन बातों के विषय में दृढ़ता से बोले इसलिए कि जिन्होंने परमेश्‍वर पर विश्वास किया है, वे भले-भले कामों में लगे रहने का ध्यान रखें ये बातें भली, और मनुष्यों के लाभ की हैं।
 \\s कलह से बचे
 \\p
-\\s5
+\\ts\\*
 \\v 9 पर मूर्खता के विवादों, और वंशावलियों, और बैर विरोध, और उन झगड़ों से, जो व्यवस्था के विषय में हों बचा रह; क्योंकि वे निष्फल और व्यर्थ हैं।
 \\v 10 किसी पाखण्डी को एक दो बार समझा बुझाकर उससे अलग रह।
 \\v 11 यह जानकर कि ऐसा मनुष्य भटक गया है, और अपने आप को दोषी ठहराकर पाप करता रहता है।
 \\s अन्तिम संदेश
 \\p
-\\s5
+\\ts\\*
 \\v 12 जब मैं तेरे पास अरतिमास या तुखिकुस को भेजूँ, तो मेरे पास निकुपुलिस आने का यत्न करना: क्योंकि मैंने वहीं जाड़ा काटने का निश्चय किया है।
 \\v 13 जेनास व्यवस्थापक और अपुल्लोस को यत्न करके आगे पहुँचा दे, और देख, कि उन्हें किसी वस्तु की घटी न होने पाए।
 \\p
-\\s5
+\\ts\\*
 \\v 14 हमारे लोग भी आवश्यकताओं को पूरा करने के लिये अच्छे कामों में लगे रहना सीखें ताकि निष्फल न रहें।
 \\s शुभकामनाएँ
 \\p
-\\s5
+\\ts\\*
 \\v 15 मेरे सब साथियों का तुझे नमस्कार और जो विश्वास के कारण हम से प्रेम रखते हैं, उनको नमस्कार। तुम सब पर अनुग्रह होता रहे।
 `;

src/components/proskomma/PkBase.js

@@ -0,0 +1,81 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+const PkBase = class extends Component {
+
+    constructor(props) {
+        super(props);
+        this.jsonResult = {};
+        this.queryTemplate = '{ processor packageVersion nDocSets nDocuments selectors { name type } }';
+        this.state = {
+            queryResult: "",
+            queryTime: 0
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    componentDidMount() {
+        this.doQuery();
+    }
+
+    handleChange(event, field) {
+        if (event) {
+            this.setState(
+                {[field]: event.target.value},
+                () => this.doQuery()
+            );
+        }
+    }
+
+    handleCheckboxChange(event, field) {
+        if (event) {
+            this.setState(
+                {[field]: event.target.checked},
+                () => this.doQuery()
+            );
+        }
+    }
+
+    substitutedQuery() {
+        return this.queryTemplate;
+    }
+
+    async doQuery() {
+        let result;
+        let endTime;
+        const startTime = Date.now();
+        try {
+            this.jsonResult = await this.props.pk.gqlQuery(this.substitutedQuery());
+            endTime = Date.now();
+            result = JSON.stringify(this.jsonResult, null, 2);
+        } catch (err) {
+            result = `ERROR: ${err}`;
+            this.jsonResult = {};
+        }
+        this.setState({
+            queryResult: result,
+            queryTime: endTime - startTime
+        });
+    }
+
+    rawQueryHTML() {
+        return (
+            <div>
+                <h2>Raw GraphQL Result ({this.state.queryTime} msec)</h2>
+                <pre style={{fontSize: "x-small"}}>{this.state.queryResult}</pre>
+            </div>
+        );
+    }
+
+    render() {
+        return this.rawQueryHTML();
+    };
+
+}
+
+PkBase.propTypes = {
+    /** The ProsKomma instance */
+    "pk": PropTypes.object.isRequired,
+};
+
+export default PkBase;

src/components/proskomma/PkBase.md

@@ -0,0 +1,40 @@
+```
+import React, {useState} from 'react';
+import ReactJson from 'react-json-view';
+import en_psa from '../mocks/en_psa.usfm.js';
+import hi_rev from '../mocks/hi_aligned_rev.usfm.js';
+import hi_tit from '../mocks/hi_aligned_tit.usfm.js';
+import { UWProsKomma } from 'uw-proskomma';
+import PkBase from './PkBase';
+
+// PkBase provides basic (async) query functionality.
+// It should be subclassed to do something more useful.
+
+// We create an instance of Proskomma using the uW-adapted subClass
+const pk = new UWProsKomma();
+
+// We give it some USFM
+[
+    ["unfoldingWord", "en", "ust", en_psa],
+    ["unfoldingWord", "hi", "hiv", hi_rev],
+    ["unfoldingWord", "hi", "hiv", hi_tit]
+].map(rec => {
+    const [org, lang, abbr, content] = rec;
+    pk.importDocument(
+      {
+        org: org,
+        lang: lang,
+        abbr: abbr
+      },
+      "usfm",
+      content,
+      {}
+    )
+  }
+);
+
+// We display basic status information by introspection
+<div>
+    <PkBase pk={pk} />
+</div>
+```

src/components/proskomma/PkBookHeaders.context.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import PkBase from './PkBase';
+
+const PkBookHeaders = class extends PkBase {
+
+    constructor(props) {
+        super(props);
+        this.queryTemplate = '{ ' +
+            '  docSets (' +
+            '    withSelectors:%withSelectors%' +
+            '    withBook:"%bookCode%"' +
+            '  ) {' +
+            '    selectorString' +
+            '    selectors { key value }' +
+            '    document(bookCode:"%bookCode%") {' +
+            '      headers { key value }' +
+            '    }' +
+            '  }' +
+            '}';
+    }
+
+    substitutedQuery() {
+        return this.queryTemplate
+            .replace(/%withSelectors%/g, `[${this.props.withSelectors.map(s => `{key:"${s.key}", value:"${s.value}"}`)}]`)
+            .replace(/%bookCode%/g, this.props.bookCode);
+    }
+
+    render() {
+        return this.rawQueryHTML();
+    }
+
+};
+
+PkBookHeaders.propTypes = {
+    /** The ProsKomma instance */
+    "pk": PropTypes.object.isRequired,
+    /** Selector filter keys (empty array for all docSets) */
+    "selectorKeys": PropTypes.arrayOf(PropTypes.string).isRequired,
+    /** Selector filter values (empty array for all docSets) */
+    "selectorValues": PropTypes.arrayOf(PropTypes.string).isRequired,
+    /** Book code (eg 'GEN') */
+    "bookCode": PropTypes.string.isRequired
+};
+
+export default PkBookHeaders;