@cmu-eberly-center/eberly-ontopic-visualization/dist/components/OnTopicVisualization.js

Writing tasks require countless composing decisions that are typically beyond the conscious grasp of student writers. Much of the skill of being “text-aware” is to understand that texts are composed of highly structured and often highly predictive composi

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactTabs = require("react-tabs");

var _reactBootstrap = require("react-bootstrap");

require("react-tabs/style/react-tabs.css");

require("./styles/ontopic.css");

var _OnTopicDataTools = _interopRequireDefault(require("./OnTopicDataTools"));

var _OnTopicEditorTools = _interopRequireDefault(require("./OnTopicEditorTools"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var topicCache = [];
/**
 *
 */

function getTopic(aTopic) {
  //console.log ("getTopic ("+aTopic+")");
  //console.log (topicCache);
  for (var i = 0; i < topicCache.length; i++) {
    var topic = topicCache[i];

    if (topic.id == aTopic) {
      return topic;
    }
  }

  return null;
}
/**
 *
 */


function addTopic(aTopic) {
  //console.log ("addTopic()");
  var target = null;

  for (var i = 0; i < topicCache.length; i++) {
    var topic = topicCache[i];

    if (topic.id == aTopic) {
      target = topic;
    }
  }

  if (target != null) {
    target.count = target.count + 1; //console.log ("addTopic("+aTopic+","+target.count+") (new)");
  } else {
    target = {
      id: aTopic,
      count: 0
    };
    topicCache.push(target); //console.log ("addTopic("+aTopic+","+target.count+") (existing)");
  }

  return target.count;
}
/**
 *
 */


var OnTopicVisualization = /*#__PURE__*/function (_Component) {
  _inherits(OnTopicVisualization, _Component);

  var _super = _createSuper(OnTopicVisualization);

  /**
   *
   */
  function OnTopicVisualization(props) {
    var _this;

    _classCallCheck(this, OnTopicVisualization);

    _this = _super.call(this, props);
    _this.state = {
      pValue: "",
      pTarget: -1,
      paragraphSelected: -1,
      sentenceSelected: -1
    };
    _this.dataTools = new _OnTopicDataTools["default"]();
    _this.editorTools = new _OnTopicEditorTools["default"]();
    _this.onHandleParagraphChange = _this.onHandleParagraphChange.bind(_assertThisInitialized(_this));
    _this.onHandleSentence = _this.onHandleSentence.bind(_assertThisInitialized(_this));
    _this.onParagraphTopicClick = _this.onParagraphTopicClick.bind(_assertThisInitialized(_this));
    return _this;
  }
  /**
   *
   */


  _createClass(OnTopicVisualization, [{
    key: "onHandleSentence",
    value: function onHandleSentence(aParagraph, aSentenceIndex, aBlock, aSentence, aTopic) {
      //console.log ("onHandleSentence ("+aParagraph+","+aSentenceIndex+")");
      //console.log (aBlock);
      //console.log (aSentence);
      //console.log (aTopic)
      if (this.props.onHandleSentence) {
        this.props.onHandleSentence(aParagraph - 1, aSentenceIndex - 1, aBlock, aSentence, aTopic);
      }

      var sentenceObject = this.dataTools.buildSentenceModel(aBlock, aSentence); //console.log (sentenceObject);

      if (sentenceObject != null) {
        sentenceObject.paragraphIndex = aParagraph;
        sentenceObject.sentenceIndex = aSentenceIndex;

        if (this.props.onHandleSentenceObject) {
          this.props.onHandleSentenceObject(sentenceObject);
        }
        /*
        this.setState ({sentence: sentenceObject},(e) => {
          this.onSentenceChange ();
        });
        */


        this.setState({
          paragraphSelected: aParagraph,
          sentenceIndex: aSentenceIndex
        });
      }
    }
    /**
     *
     */

  }, {
    key: "generateSentenceView",
    value: function generateSentenceView() {
      var _this2 = this;

      //console.log ("generateSentenceView ("+this.props.invalidated+")");
      var rows = [];
      var sentence = 1;
      var paragraphIndex = 1;

      if (this.props.textdata.sentences == null) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "contentrowflex"
        }, "No data provided");
      }

      var _loop = function _loop(i) {
        var entry = _this2.props.textdata.sentences[i];

        if (Array.isArray(entry) == true) {
          var coreData = entry[2];
          var beVerb = null;
          var hasBeVerb = false;

          if (coreData.hasOwnProperty('BE_VERB') == true) {
            hasBeVerb = true;
            beVerb = coreData["BE_VERB"]; // New data!
          }

          var L_NPS = coreData["L_NPS"];
          var R_NPS = coreData["R_NPS"];
          var AUX_VERBS = coreData["AUX_VERB"];
          var NPS = coreData["NPS"];
          var leftBlocks = [];
          var rightBlocks = [];
          var npIndex = 0;

          var _loop2 = function _loop2(j) {
            var leftClass = "";

            if (_this2.props.invalidated == false) {
              if (AUX_VERBS == false) {
                leftClass = "block-purple block-right";
              } else {
                leftClass = "block-green block-right";
              }
            } else {
              leftClass = "block-disabled block-right";
            }

            var topic = NPS[npIndex];

            if (_this2.props.invalidated == false) {
              leftBlocks.push( /*#__PURE__*/_react["default"].createElement("div", {
                key: _this2.dataTools.uuidv4(),
                className: leftClass,
                alt: topic,
                title: topic,
                onClick: function onClick(e) {
                  return _this2.onHandleSentence(entry[0], entry[1], entry[2], entry[3], topic);
                }
              }));
            } else {
              leftBlocks.push( /*#__PURE__*/_react["default"].createElement("div", {
                key: _this2.dataTools.uuidv4(),
                className: leftClass
              }));
            }

            npIndex++;
          };

          for (var j = 0; j < L_NPS; j++) {
            _loop2(j);
          }

          var _loop3 = function _loop3(k) {
            var rightClass = "";

            if (_this2.props.invalidated == false) {
              if (AUX_VERBS == false) {
                rightClass = "block-purple block-left";
              } else {
                rightClass = "block-green block-left";
              }
            } else {
              rightClass = "block-disabled block-left";
            }

            var topic = NPS[npIndex];

            if (_this2.props.invalidated == false) {
              rightBlocks.push( /*#__PURE__*/_react["default"].createElement("div", {
                key: _this2.dataTools.uuidv4(),
                className: rightClass,
                alt: topic,
                title: topic,
                onClick: function onClick(e) {
                  return _this2.onHandleSentence(entry[0], entry[1], entry[2], entry[3], topic);
                }
              }));
            } else {
              rightBlocks.push( /*#__PURE__*/_react["default"].createElement("div", {
                key: _this2.dataTools.uuidv4(),
                className: rightClass
              }));
            }

            npIndex++;
          };

          for (var k = 0; k < R_NPS; k++) {
            _loop3(k);
          }

          var sentenceBackground = "";
          var _paragraphIndex = entry[0];
          var sentenceIndex = entry[1];

          if (_paragraphIndex == _this2.state.paragraphSelected && sentenceIndex == _this2.state.sentenceIndex) {
            if (_this2.props.settings) {
              if (_this2.props.settings.highlight) {
                sentenceBackground = _this2.props.settings.highlight;
              } else {
                sentenceBackground = "yellow";
              }
            } else {
              sentenceBackground = "yellow";
            }
          }

          if (hasBeVerb == true) {
            var verbClass = "block-verb-active";

            if (beVerb == true) {
              verbClass = "block-verb-be";
            }

            var verbElement = /*#__PURE__*/_react["default"].createElement("div", {
              key: _this2.dataTools.uuidv4(),
              className: verbClass,
              onClick: function onClick(e) {
                return _this2.onHandleSentence(entry[0], entry[1], entry[2], entry[3], null);
              }
            });

            rows.push( /*#__PURE__*/_react["default"].createElement("tr", {
              key: _this2.dataTools.uuidv4(),
              className: "psentence",
              style: {
                background: sentenceBackground
              }
            }, /*#__PURE__*/_react["default"].createElement("td", null, sentence), /*#__PURE__*/_react["default"].createElement("td", {
              valign: "middle"
            }, leftBlocks), /*#__PURE__*/_react["default"].createElement("td", {
              valign: "middle"
            }, verbElement), /*#__PURE__*/_react["default"].createElement("td", {
              valign: "middle"
            }, rightBlocks)));
          } else {
            rows.push( /*#__PURE__*/_react["default"].createElement("tr", {
              key: _this2.dataTools.uuidv4(),
              className: "psentence",
              style: {
                background: sentenceBackground
              }
            }, /*#__PURE__*/_react["default"].createElement("td", null, sentence), /*#__PURE__*/_react["default"].createElement("td", {
              valign: "middle"
            }, leftBlocks), /*#__PURE__*/_react["default"].createElement("td", {
              valign: "middle"
            }, "\xA0"), /*#__PURE__*/_react["default"].createElement("td", {
              valign: "middle"
            }, rightBlocks)));
          }

          sentence++;
        } else {
          rows.push( /*#__PURE__*/_react["default"].createElement("tr", {
            key: _this2.dataTools.uuidv4(),
            className: "pseparator"
          }, /*#__PURE__*/_react["default"].createElement("td", {
            valign: "middle",
            colSpan: "4"
          }, "¶ " + paragraphIndex)));
          paragraphIndex++;
        }
      };

      for (var i = 0; i < this.props.textdata.sentences.length; i++) {
        _loop(i);
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "contentrowflex"
      }, /*#__PURE__*/_react["default"].createElement("table", {
        className: "langtable"
      }, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "\xA0"), /*#__PURE__*/_react["default"].createElement("td", {
        className: "align-right"
      }, "Left"), /*#__PURE__*/_react["default"].createElement("td", {
        style: {
          width: "10px"
        }
      }, "\xA0"), /*#__PURE__*/_react["default"].createElement("td", null, "Right"))), /*#__PURE__*/_react["default"].createElement("tbody", null, rows)));
    }
    /**
     *
     */

  }, {
    key: "generateParagraphViewFlipped",
    value: function generateParagraphViewFlipped() {
      var _this3 = this;

      //console.log ("generateParagraphViewFlipped ("+this.props.invalidated+","+this.state.pTarget+")");
      topicCache = [];
      var rows = [];

      if (this.props.textdata.paragraphs == null) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "contentrowflex"
        }, /*#__PURE__*/_react["default"].createElement("table", {
          className: "langtable"
        }, /*#__PURE__*/_react["default"].createElement("tbody", null)));
      }

      var topicheader;
      var topicTags = [];
      var lineCount = 1;
      var topics = null;
      var paraCount = 0;
      var paraPulldown = [];
      paraPulldown.push( /*#__PURE__*/_react["default"].createElement("option", {
        value: -1
      }, "---"));

      for (var i = 0; i < this.props.textdata.paragraphs.length; i++) {
        if (i == 0) {
          topicTags.push( /*#__PURE__*/_react["default"].createElement("td", {
            key: this.dataTools.uuidv4()
          }, "\xA0"));
          topics = this.props.textdata.paragraphs[i];

          for (var j = 0; j < topics.length; j++) {
            topicTags.push( /*#__PURE__*/_react["default"].createElement("td", {
              key: this.dataTools.uuidv4(),
              valign: "bottom"
            }, /*#__PURE__*/_react["default"].createElement("div", {
              className: "vertical noselect"
            }, topics[j][1])));
          }
        } else {
          var row = this.props.textdata.paragraphs[i];
          var celNumberCount = 0;
          var markers = [];

          for (var k = 0; k < row.length; k++) {
            if (this.dataTools.isNumber(row[k]) == true) {
              celNumberCount++;
            }
          }

          if (celNumberCount != row.length) {
            if (this.dataTools.isEmptyRow(row) == false) {
              var _loop4 = function _loop4(l) {
                var cell = row[l];

                if (cell[0] == null) {
                  markers.push( /*#__PURE__*/_react["default"].createElement("td", {
                    key: _this3.dataTools.uuidv4()
                  }, /*#__PURE__*/_react["default"].createElement("div", {
                    className: "block-blank block-left"
                  })));
                } else {
                  if (_this3.props.invalidated == false) {
                    markers.push( /*#__PURE__*/_react["default"].createElement("td", {
                      key: _this3.dataTools.uuidv4()
                    }, /*#__PURE__*/_react["default"].createElement("div", {
                      className: "block-blue block-left",
                      alt: topics[l][1],
                      title: topics[l][1],
                      onClick: function onClick(e) {
                        return _this3.onParagraphTopicClick(topics[l][1]);
                      }
                    })));
                  } else {
                    markers.push( /*#__PURE__*/_react["default"].createElement("td", {
                      key: _this3.dataTools.uuidv4()
                    }, /*#__PURE__*/_react["default"].createElement("div", {
                      className: "block-disabled",
                      alt: topics[l][1],
                      title: topics[l][1]
                    })));
                  }
                }
              };

              for (var l = 0; l < row.length; l++) {
                _loop4(l);
              }
            } else {
              for (var _l = 0; _l < row.length; _l++) {
                markers.push( /*#__PURE__*/_react["default"].createElement("td", {
                  key: this.dataTools.uuidv4()
                }, /*#__PURE__*/_react["default"].createElement("div", {
                  className: "block-blank block-left red-tag"
                }, "X")));
              }
            }
          }

          if (celNumberCount == row.length) {
            lineCount = 1; //let firstSentence=this.editorTools.getParagraphSentence (this.props.textdata.valueRaw,paraCount,this.props.textdata.plain);

            var firstSentence = this.editorTools.getParagraphSentencePlain(this.props.textdata.plain, paraCount);

            if (this.state.pTarget == paraCount) {
              paraPulldown.push( /*#__PURE__*/_react["default"].createElement("option", {
                value: paraCount + 1,
                selected: true
              }, "¶ " + (paraCount + 1) + " - " + firstSentence.substring(0, 50) + " ... "));
            } else {
              paraPulldown.push( /*#__PURE__*/_react["default"].createElement("option", {
                value: paraCount + 1
              }, "¶ " + (paraCount + 1) + " - " + firstSentence.substring(0, 50) + " ... "));
            }

            paraCount++;
          } else {
            if (paraCount == this.state.pTarget) {
              rows.push( /*#__PURE__*/_react["default"].createElement("tr", {
                key: this.dataTools.uuidv4(),
                className: "psentence"
              }, /*#__PURE__*/_react["default"].createElement("td", null, lineCount), markers));
            }

            lineCount++;
          }
        }
      }

      topicheader = /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, topicTags));
      var paragraphViz;

      if (this.state.pTarget != -1) {
        paragraphViz = /*#__PURE__*/_react["default"].createElement("table", {
          className: "langtable"
        }, topicheader, /*#__PURE__*/_react["default"].createElement("tbody", null, rows));
      }

      var pulldown = /*#__PURE__*/_react["default"].createElement("select", {
        onChange: this.onHandleParagraphChange
      }, paraPulldown);

      if (this.props.invalidated == true) {
        pulldown = /*#__PURE__*/_react["default"].createElement("select", {
          onChange: this.onHandleParagraphChange,
          disabled: true
        }, paraPulldown);
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "contentrowflex"
      }, pulldown, paragraphViz);
    }
    /**
     *
     */

  }, {
    key: "generateParagraphViewRegular",
    value: function generateParagraphViewRegular() {
      //console.log ("generateParagraphViewRegular ("+this.props.invalidated+","+this.state.pTarget+")");
      topicCache = [];

      if (this.props.textdata.paragraphs == null) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "contentrowflex"
        }, /*#__PURE__*/_react["default"].createElement("table", {
          className: "langtable"
        }, /*#__PURE__*/_react["default"].createElement("tbody", null)));
      }

      var rows = [];
      var topicheader;
      var topicTags = [];
      var lineCount = 1;
      var topics = null;
      var paraCount = 0;
      var paraPulldown = [];
      paraPulldown.push( /*#__PURE__*/_react["default"].createElement("option", {
        key: this.dataTools.uuidv4(),
        value: -1
      }, "---"));

      for (var i = 0; i < this.props.textdata.paragraphs.length; i++) {
        if (i == 0) {
          topics = this.props.textdata.paragraphs[i];
          var newRow = [];
          newRow.push( /*#__PURE__*/_react["default"].createElement("td", {
            key: this.dataTools.uuidv4()
          }, "\xA0"));
          rows.push(newRow);

          for (var j = 0; j < topics.length; j++) {
            newRow = [];
            newRow.push( /*#__PURE__*/_react["default"].createElement("td", {
              key: this.dataTools.uuidv4(),
              align: "right"
            }, /*#__PURE__*/_react["default"].createElement("div", {
              className: "horizontal"
            }, topics[j][1])));
            rows.push(newRow);
          }
        } else {
          var row = this.props.textdata.paragraphs[i];
          var celNumberCount = 0;
          var markers = [];

          for (var k = 0; k < row.length; k++) {
            if (this.dataTools.isNumber(row[k]) == true) {
              celNumberCount++;
            }
          }

          if (celNumberCount != row.length) {
            if (this.dataTools.isEmptyRow(row) == false) {
              for (var l = 0; l < row.length; l++) {
                var cell = row[l];

                if (cell[0] == null) {
                  markers.push( /*#__PURE__*/_react["default"].createElement("td", {
                    key: this.dataTools.uuidv4()
                  }, /*#__PURE__*/_react["default"].createElement("div", {
                    className: "block-blank block-left"
                  })));
                } else {
                  markers.push( /*#__PURE__*/_react["default"].createElement("td", {
                    key: this.dataTools.uuidv4()
                  }, /*#__PURE__*/_react["default"].createElement("div", {
                    className: "block-blue block-left",
                    alt: topics[l][1],
                    title: topics[l][1]
                  })));
                }
              }
            } else {
              for (var _l2 = 0; _l2 < row.length; _l2++) {
                markers.push( /*#__PURE__*/_react["default"].createElement("td", {
                  key: this.dataTools.uuidv4()
                }, /*#__PURE__*/_react["default"].createElement("div", {
                  className: "block-blank block-left red-tag"
                }, "X")));
              }
            }
          }

          if (celNumberCount == row.length) {
            lineCount = 1; //let firstSentence=this.editorTools.getParagraphSentence (this.props.textdata.valueRaw,paraCount,this.props.textdata.plain);

            var firstSentence = this.editorTools.getParagraphSentencePlain(this.props.textdata.plain, paraCount);

            if (this.state.pTarget == paraCount) {
              console.log("Found selected paragraph");
              paraPulldown.push( /*#__PURE__*/_react["default"].createElement("option", {
                key: this.dataTools.uuidv4(),
                value: paraCount + 1,
                selected: true
              }, "¶ " + (paraCount + 1) + " - " + firstSentence.substring(0, 50) + " ... "));
            } else {
              paraPulldown.push( /*#__PURE__*/_react["default"].createElement("option", {
                key: this.dataTools.uuidv4(),
                value: paraCount + 1
              }, "¶ " + (paraCount + 1) + " - " + firstSentence.substring(0, 50) + " ... "));
            }

            paraCount++;
          } else {
            if (paraCount == this.state.pTarget) {
              // We now need to distribute this horizontal line of tags over the same
              // number of rows
              for (var w = 0; w < markers.length; w++) {
                if (w == 0) {
                  rows[w].push( /*#__PURE__*/_react["default"].createElement("td", {
                    key: this.dataTools.uuidv4()
                  }, /*#__PURE__*/_react["default"].createElement("div", {
                    className: "horizontal"
                  }, lineCount)));
                }

                rows[w + 1].push(markers[w]);
              }
            }

            lineCount++;
          }
        }
      } //console.log (rows);


      var paragraphViz;
      var vizRows = [];

      for (var x = 0; x < rows.length; x++) {
        var aRow = rows[x];
        var syntaxFixer = [];

        for (var y = 0; y < aRow.length; y++) {
          var el = aRow[y];
          syntaxFixer.push(el);
        }

        vizRows.push( /*#__PURE__*/_react["default"].createElement("tr", {
          key: this.dataTools.uuidv4()
        }, syntaxFixer));
      }

      if (this.state.pTarget != -1) {
        paragraphViz = /*#__PURE__*/_react["default"].createElement("table", {
          className: "langtable"
        }, /*#__PURE__*/_react["default"].createElement("tbody", null, vizRows));
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "contentrowflex"
      }, /*#__PURE__*/_react["default"].createElement("select", {
        onChange: this.onHandleParagraphChange
      }, paraPulldown), paragraphViz);
    }
    /**
     *
     */

  }, {
    key: "generateTextViewFlipped",
    value: function generateTextViewFlipped() {
      var _this4 = this;

      //console.log ("generateTextViewFlipped ("+this.props.invalidated+")");
      topicCache = [];
      var rows = [];

      if (this.props.textdata.expanded == null) {
        //console.log ("this.props.textdata.expanded == null");
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "contentrowflex"
        }, /*#__PURE__*/_react["default"].createElement("table", {
          className: "langtable"
        }, /*#__PURE__*/_react["default"].createElement("tbody", null)));
      }

      var expanded = this.props.textdata.expanded;
      var header = "";
      var index = 1;

      for (var i = 0; i < expanded.length; i++) {
        var row = expanded[i];

        if (i == 0) {
          header = [];
          header.push( /*#__PURE__*/_react["default"].createElement("td", {
            key: this.dataTools.uuidv4()
          }, "\xA0"));

          var _loop5 = function _loop5(j) {
            var topic = row[j];

            if (_this4.props.invalidated == false) {
              header.push( /*#__PURE__*/_react["default"].createElement("td", {
                key: _this4.dataTools.uuidv4(),
                valign: "bottom"
              }, /*#__PURE__*/_react["default"].createElement("div", {
                className: "vertical",
                onClick: function onClick(e) {
                  return _this4.onHandleTopic(topic[2], true, -1);
                }
              }, topic[1])));
            } else {
              header.push( /*#__PURE__*/_react["default"].createElement("td", {
                key: _this4.dataTools.uuidv4(),
                valign: "bottom"
              }, /*#__PURE__*/_react["default"].createElement("div", {
                className: "vertical-disabled noselect"
              }, topic[1])));
            }
          };

          for (var j = 0; j < row.length; j++) {
            _loop5(j);
          }

          rows.push( /*#__PURE__*/_react["default"].createElement("tr", {
            key: "row-" + i,
            className: "pheader"
          }, header));
        } else {
          var isParaBoundary = 0;
          header = []; //>-----------------------------------------------------------------

          var _loop6 = function _loop6(_j) {
            var cell = row[_j];
            var isCellBoundary = false;

            if (_this4.dataTools.isNumber(cell) == true) {
              isCellBoundary = true;
              isParaBoundary++;
            }

            if (isCellBoundary == false) {
              if (cell[1] != false) {
                if (_this4.props.invalidated == false) {
                  //console.log (cell);
                  var count = addTopic(cell[2]);
                  header.push( /*#__PURE__*/_react["default"].createElement("td", {
                    key: _this4.dataTools.uuidv4(),
                    valign: "bottom"
                  }, /*#__PURE__*/_react["default"].createElement("div", {
                    className: "block-blue",
                    alt: cell[2],
                    title: cell[2],
                    onClick: function onClick(e) {
                      return _this4.onHandleTopic(cell[13], false, count);
                    }
                  })));
                } else {
                  header.push( /*#__PURE__*/_react["default"].createElement("td", {
                    key: _this4.dataTools.uuidv4(),
                    valign: "bottom"
                  }, /*#__PURE__*/_react["default"].createElement("div", {
                    className: "block-disabled"
                  })));
                }
              } else {
                header.push( /*#__PURE__*/_react["default"].createElement("td", {
                  key: _this4.dataTools.uuidv4(),
                  valign: "bottom"
                }, /*#__PURE__*/_react["default"].createElement("div", {
                  className: "empty"
                })));
              }
            } else {
              header.push( /*#__PURE__*/_react["default"].createElement("td", {
                key: _this4.dataTools.uuidv4(),
                valign: "bottom"
              }, "\xA0"));
            }
          };

          for (var _j = 0; _j < row.length; _j++) {
            _loop6(_j);
          } //>-----------------------------------------------------------------


          if (isParaBoundary == row.length) {
            rows.push( /*#__PURE__*/_react["default"].createElement("tr", {
              key: "row-" + i,
              className: "pseparator"
            }, /*#__PURE__*/_react["default"].createElement("td", null, "\xA0"), header));
          } else {
            rows.push( /*#__PURE__*/_react["default"].createElement("tr", {
              key: "row-" + i,
              className: "psentence"
            }, /*#__PURE__*/_react["default"].createElement("td", null, index), header));
            index++;
          } //>-----------------------------------------------------------------            

        }
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "contentrowflex"
      }, /*#__PURE__*/_react["default"].createElement("table", {
        className: "langtable"
      }, /*#__PURE__*/_react["default"].createElement("tbody", null, rows)));
    }
    /**
     *
     */

  }, {
    key: "generateTextViewRegular",
    value: function generateTextViewRegular() {
      var _this5 = this;

      //console.log ("generateTextViewRegular ("+this.props.invalidated+")");   
      topicCache = [];

      if (this.props.textdata.expanded == null) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "contentrowflex"
        }, /*#__PURE__*/_react["default"].createElement("table", {
          className: "langtable"
        }, /*#__PURE__*/_react["default"].createElement("tbody", null)));
      }

      var rows = [];
      var expanded = this.props.textdata.expanded;
      var header = "";
      var index = 1;
      var rowIndex = 0;
      var actualRowLength = 0;
      var maxLength = 5000; // Let's use a ludicrous size

      for (var i = 0; i < expanded.length; i++) {
        var row = expanded[i];

        if (i > 0) {
          if (row.length < maxLength) {
            maxLength = row.length;
          }
        }
      }

      var lineCount = 1;

      for (var _i = 0; _i < expanded.length; _i++) {
        var isEmpty = false;
        var _row = expanded[_i];
        rowIndex = 0;

        if (_i == 0) {
          isEmpty = true;

          var _loop7 = function _loop7(j) {
            var topic = _row[j];
            var newRow = [];

            if (j == 0) {
              newRow = [];
              newRow.push( /*#__PURE__*/_react["default"].createElement("td", {
                key: _this5.dataTools.uuidv4()
              }, "\xA0"));
              rows.push(newRow);
            }

            newRow = [];

            if (_this5.props.invalidated == false) {
              newRow.push( /*#__PURE__*/_react["default"].createElement("td", {
                key: _this5.dataTools.uuidv4(),
                align: "right"
              }, /*#__PURE__*/_react["default"].createElement("div", {
                className: "horizontal",
                onClick: function onClick(e) {
                  return _this5.onHandleTopic(topic[2], true, -1);
                }
              }, topic[1])));
            } else {
              newRow.push( /*#__PURE__*/_react["default"].createElement("td", {
                key: _this5.dataTools.uuidv4(),
                align: "right"
              }, /*#__PURE__*/_react["default"].createElement("div", {
                className: "horizontal-disabled noselect"
              }, topic[1])));
            }

            rows.push(newRow);
          };

          for (var j = 0; j < maxLength; j++) {
            _loop7(j);
          }
        } else {
          var _loop8 = function _loop8(_j2) {
            var cell = _row[_j2];

            if (_this5.dataTools.isNumber(cell) == true) {
              isEmpty = true;

              if (_j2 == 0) {
                rows[0].push( /*#__PURE__*/_react["default"].createElement("td", {
                  key: _this5.dataTools.uuidv4()
                }, "\xA0"));
              }

              rows[rowIndex + 1].push( /*#__PURE__*/_react["default"].createElement("td", {
                key: _this5.dataTools.uuidv4(),
                valign: "bottom",
                className: "grey-narrow"
              }, "\xA0"));
            } else {
              if (_j2 == 0) {
                rows[0].push( /*#__PURE__*/_react["default"].createElement("td", {
                  key: _this5.dataTools.uuidv4()
                }, /*#__PURE__*/_react["default"].createElement("div", {
                  className: "horizontal"
                }, lineCount)));
              }

              if (cell[1] != false) {
                if (_this5.props.invalidated == false) {
                  //console.log (cell);
                  var count = addTopic(cell[2]);
                  rows[rowIndex + 1].push( /*#__PURE__*/_react["default"].createElement("td", {
                    key: _this5.dataTools.uuidv4(),
                    valign: "bottom"
                  }, /*#__PURE__*/_react["default"].createElement("div", {
                    className: "block-blue-horizontal",
                    alt: cell[2],
                    title: cell[2],
                    onClick: function onClick(e) {
                      return _this5.onHandleTopic(cell[13], false, count);
                    }
                  })));
                } else {
                  rows[rowIndex + 1].push( /*#__PURE__*/_react["default"].createElement("td", {
                    key: _this5.dataTools.uuidv4(),
                    valign: "bottom"
                  }, /*#__PURE__*/_react["default"].createElement("div", {
                    className: "block-disabled"
                  })));
                }
              } else {
                rows[rowIndex + 1].push( /*#__PURE__*/_react["default"].createElement("td", {
                  key: _this5.dataTools.uuidv4(),
                  valign: "bottom"
                }, /*#__PURE__*/_react["default"].createElement("div", {
                  className: "empty"
                })));
              }
            }

            rowIndex++;

            if (rowIndex >= rows.length) {
              rowIndex = 0;
            }
          };

          for (var _j2 = 0; _j2 < maxLength; _j2++) {
            _loop8(_j2);
          }
        }

        if (isEmpty == false) {
          lineCount++;
        }
      }

      var table = [];

      for (var _i2 = 0; _i2 < rows.length; _i2++) {
        var aRow = rows[_i2];
        var htmlRow = [];
        htmlRow.push( /*#__PURE__*/_react["default"].createElement("tr", {
          key: this.dataTools.uuidv4()
        }, aRow));
        table.push(htmlRow);
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "contentrowflex"
      }, /*#__PURE__*/_react["default"].createElement("table", {
        className: "langtable"
      }, /*#__PURE__*/_react["default"].createElement("tbody", null, table)));
    }
    /**
     *
     */

  }, {
    key: "onFlip",
    value: function onFlip() {
      if (this.props.onFlip) {
        this.props.onFlip();
      }
    }
    /**
     *
     */

  }, {
    key: "onHandleParagraphChange",
    value: function onHandleParagraphChange(e) {
      //console.log ("onHandleParagraphChange ("+e.target.value+")");
      if (e.target.value == -1) {
        //console.log ("Nothing to see here");
        return;
      }

      this.setState({
        pTarget: e.target.value - 1
      });
    }
    /**
     *
     */

  }, {
    key: "onHandleTopic",
    value: function onHandleTopic(topicId, isGlobal, count) {
      /*
      if (this.props.onHandleTopic) {
        this.props.onHandleTopic(topicId,isGlobal,count);
      }
      */
    }
    /**
     *
     */

  }, {
    key: "onParagraphTopicClick",
    value: function onParagraphTopicClick(topicId) {
      console.log("onParagraphTopicClick (" + topicId + ")");
    }
    /**
     *
     */

  }, {
    key: "render",
    value: function render() {
      var singlePane = false;

      if (typeof this.props.singlepane !== 'undefined') {
        singlePane = this.props.singlepane;
      } //console.log ("render ("+singlePane+")");


      var globalTopics; // Will not be used?

      var pdfDownload;
      var sentenceview;
      var paragraphview;
      var textview;
      var outlineview;
      var sentencetab;
      var paragraphtab;
      var texttab;

      var waiting = /*#__PURE__*/_react["default"].createElement("div", {
        className: "waiting"
      }); //pdfDownload=<ToolButton className="float-right" alt="Download as PDF" title="Download as PDF" onButtonClick={(event) => this.onNavItemClick("export_viz")} icon="picture_as_pdf" />;


      if (this.props.mode == "SENTENCE") {
        if (this.props.loading == true) {
          sentencetab = waiting;
        } else {
          sentenceview = this.generateSentenceView();
          sentencetab = /*#__PURE__*/_react["default"].createElement("div", {
            className: "contentcolumn"
          }, globalTopics, sentenceview);
        }
      }

      if (this.props.mode == "PARAGRAPH") {
        if (this.props.loading == true) {
          paragraphtab = waiting;
        } else {
          if (this.props.flipped == false) {
            paragraphview = this.generateParagraphViewRegular();
          } else {
            paragraphview = this.generateParagraphViewFlipped();
          }

          paragraphtab = /*#__PURE__*/_react["default"].createElement("div", {
            className: "contentcolumn"
          }, /*#__PURE__*/_react["default"].createElement("div", {
            className: "contentrowfixed"
          }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
            controlId: "topicscheck"
          }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
            onChange: this.onFlip.bind(this),
            type: "checkbox",
            label: "Flip Rows and Columns",
            alt: "Flip Rows and Columns",
            title: "Flip Rows and Columns",
            checked: this.props.flipped
          }))), paragraphview);
        }
      }

      if (this.props.mode == "TEXT") {
        if (this.props.loading == true) {
          texttab = waiting;
        } else {
          if (this.props.flipped == true) {
            textview = this.generateTextViewFlipped();
          } else {
            textview = this.generateTextViewRegular();
          }

          texttab = /*#__PURE__*/_react["default"].createElement("div", {
            className: "contentcolumn"
          }, /*#__PURE__*/_react["default"].createElement("div", {
            className: "contentrowfixed"
          }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
            controlId: "textcheck"
          }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
            onChange: this.onFlip.bind(this),
            type: "checkbox",
            label: "Flip Rows and Columns",
            alt: "Flip Rows and Columns",
            title: "Flip Rows and Columns",
            checked: this.props.flipped
          }))), textview);
        }
      }

      if (singlePane == true) {
        if (this.props.mode == "SENTENCE") {
          return sentencetab;
        }

        if (this.props.mode == "PARAGRAPH") {
          return paragraphtab;
        }

        if (this.props.mode == "TEXT") {
          return texttab;
        }
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "ontopic"
      }, /*#__PURE__*/_react["default"].createElement(_reactTabs.Tabs, {
        defaultIndex: this.props.defaultindex,
        onSelect: this.props.onSelect
      }, /*#__PURE__*/_react["default"].createElement(_reactTabs.TabList, null, /*#__PURE__*/_react["default"].createElement(_reactTabs.Tab, {
        disabled: this.props.loading
      }, "Sentence"), /*#__PURE__*/_react["default"].createElement(_reactTabs.Tab, {
        disabled: this.props.loading
      }, "Paragraph"), /*#__PURE__*/_react["default"].createElement(_reactTabs.Tab, {
        disabled: this.props.loading
      }, "Text"), pdfDownload), /*#__PURE__*/_react["default"].createElement(_reactTabs.TabPanel, null, sentencetab), /*#__PURE__*/_react["default"].createElement(_reactTabs.TabPanel, null, paragraphtab), /*#__PURE__*/_react["default"].createElement(_reactTabs.TabPanel, null, texttab)));
    }
  }]);

  return OnTopicVisualization;
}(_react.Component);

var _default = OnTopicVisualization;
exports["default"] = _default;