@teselagen/ove 0.3.11 → 0.3.13

package/src/createVectorEditor/index.js

@@ -72,10 +72,10 @@ export default function createVectorEditor(
     unmountComponentAtNode(node);
     node.remove();
   };
-  editor.updateEditor = (values) => {
+  editor.updateEditor = values => {
     updateEditor(store, editorName, values);
   };
-  editor.addAlignment = (values) => {
+  editor.addAlignment = values => {
     addAlignment(store, values);
   };
   editor.getState = () => {
@@ -98,7 +98,7 @@ export function createVersionHistoryView(
     node
   );
 
-  editor.updateEditor = (values) => {
+  editor.updateEditor = values => {
     updateEditor(store, editorName, values);
   };
   editor.getState = () => {
@@ -116,7 +116,7 @@ export function createAlignmentView(node, props = {}) {
   const editor = {};
   editor.renderResponse = render(<SizedStandaloneAlignment {...props} />, node);
 
-  editor.updateAlignment = (values) => {
+  editor.updateAlignment = values => {
     addAlignment(store, values);
   };
   editor.updateAlignment(props);

package/src/fileUtils.js

@@ -3,20 +3,20 @@ import { parse } from "papaparse";
 
 export const allowedCsvFileTypes = [".csv", ".txt", ".xlsx"];
 
-export const isZipFile = (file) => {
+export const isZipFile = file => {
   const type = file.mimetype || file.type;
   return type === "application/zip" || type === "application/x-zip-compressed";
 };
 
-export const getExt = (file) => file.name.split(".").pop();
-export const isExcelFile = (file) => getExt(file) === "xlsx";
-export const isCsvFile = (file) => getExt(file) === "csv";
-export const isTextFile = (file) => ["text", "txt"].includes(getExt(file));
+export const getExt = file => file.name.split(".").pop();
+export const isExcelFile = file => getExt(file) === "xlsx";
+export const isCsvFile = file => getExt(file) === "csv";
+export const isTextFile = file => ["text", "txt"].includes(getExt(file));
 
 const defaultCsvParserOptions = {
   header: true,
   skipEmptyLines: "greedy",
-  trimHeaders: true,
+  trimHeaders: true
   // delimiter: ","
 };
 
@@ -24,13 +24,13 @@ export const parseCsvFile = (csvFile, parserOptions = {}) => {
   return new Promise((resolve, reject) => {
     parse(csvFile.originFileObj, {
       ...defaultCsvParserOptions,
-      complete: (results) => {
+      complete: results => {
         if (results && results.errors && results.errors.length) {
           return reject("Error in csv: " + JSON.stringify(results.errors));
         }
         resolve(results);
       },
-      error: (error) => {
+      error: error => {
         reject(error);
       },
       ...parserOptions
@@ -42,11 +42,11 @@ export const parseCsvString = (csvString, parserOptions = {}) => {
   return parse(csvString, { ...defaultCsvParserOptions, ...parserOptions });
 };
 
-export const cleanCommaSeparatedCell = (cellData) =>
+export const cleanCommaSeparatedCell = cellData =>
   (cellData || "")
     .split(",")
-    .map((n) => n.trim())
-    .filter((n) => n);
+    .map(n => n.trim())
+    .filter(n => n);
 
 /**
  * Because the csv rows might not have the same header keys in some cases (extended properties)
@@ -54,17 +54,17 @@ export const cleanCommaSeparatedCell = (cellData) =>
  * does not drop fields
  * @param {*} rows
  */
-export const cleanCsvExport = (rows) => {
+export const cleanCsvExport = rows => {
   const allHeaders = [];
-  rows.forEach((row) => {
-    Object.keys(row).forEach((header) => {
+  rows.forEach(row => {
+    Object.keys(row).forEach(header => {
       if (!allHeaders.includes(header)) {
         allHeaders.push(header);
       }
     });
   });
-  rows.forEach((row) => {
-    allHeaders.forEach((header) => {
+  rows.forEach(row => {
+    allHeaders.forEach(header => {
       row[header] = row[header] || "";
     });
   });
@@ -76,7 +76,7 @@ export const validateCSVRequiredHeaders = (
   requiredHeaders,
   filename
 ) => {
-  const missingRequiredHeaders = requiredHeaders.filter((field) => {
+  const missingRequiredHeaders = requiredHeaders.filter(field => {
     return !fields.includes(field);
   });
   if (missingRequiredHeaders.length) {
@@ -88,7 +88,7 @@ export const validateCSVRequiredHeaders = (
 };
 
 export const validateCSVRow = (row, requiredHeaders, index) => {
-  const missingRequiredFields = requiredHeaders.filter((field) => !row[field]);
+  const missingRequiredFields = requiredHeaders.filter(field => !row[field]);
   if (missingRequiredFields.length) {
     if (missingRequiredFields.length === 1) {
       return `Row ${index + 1} is missing the required field "${

package/src/helperComponents/AddOrEditAnnotationDialog/index.js

@@ -21,7 +21,8 @@ import {
   Classes,
   EditableText,
   FormGroup,
-  Label
+  Label,
+  Callout
 } from "@blueprintjs/core";
 import {
   convertRangeTo0Based,
@@ -47,42 +48,42 @@ class AddOrEditAnnotationDialog extends React.Component {
       (this.props.initialValues && this.props.initialValues.notes) || {};
     this.notes = store(
       flatMap(initialNotes, (noteValues, noteType) => {
-        return map(noteValues, (value) => ({
+        return map(noteValues, value => ({
           key: noteType,
           value: value
         }));
       })
     );
   }
-  formatStart = (val) => {
+  formatStart = val => {
     const { isProtein } = this.props.sequenceData || {};
     if (isProtein) {
       return (val + 2) / 3;
     }
     return val;
   };
-  formatEnd = (val) => {
+  formatEnd = val => {
     const { isProtein } = this.props.sequenceData || {};
     if (isProtein) {
       return val / 3;
     }
     return val;
   };
-  parseStart = (val) => {
+  parseStart = val => {
     const { isProtein } = this.props.sequenceData || {};
     if (isProtein) {
       return val * 3 - 2;
     }
     return val;
   };
-  parseEnd = (val) => {
+  parseEnd = val => {
     const { isProtein } = this.props.sequenceData || {};
     if (isProtein) {
       return val * 3;
     }
     return val;
   };
-  renderLocations = (props) => {
+  renderLocations = props => {
     const { fields } = props;
     const { sequenceData = { sequence: "" }, start, end } = this.props;
     const sequenceLength = sequenceData.sequence.length;
@@ -209,6 +210,7 @@ class AddOrEditAnnotationDialog extends React.Component {
       overlapsSelf,
       start,
       end,
+      readOnly,
       getAdditionalEditAnnotationComps,
       advancedOptions,
       advancedDefaultOpen,
@@ -228,7 +230,7 @@ class AddOrEditAnnotationDialog extends React.Component {
     );
     return (
       <form
-        onSubmit={handleSubmit(async (data) => {
+        onSubmit={handleSubmit(async data => {
           let updatedData;
           const forward =
             data.forward !== undefined
@@ -323,8 +325,13 @@ class AddOrEditAnnotationDialog extends React.Component {
           "tg-upsert-annotation"
         )}
       >
+        {typeof readOnly === "string" ? (
+          <Callout intent="primary" style={{ marginBottom: 10 }}>
+            {readOnly}
+          </Callout>
+        ) : null}
         <InputField
-          disabled={this.props.readOnly}
+          disabled={readOnly}
           inlineLabel
           tooltipError
           autoFocus
@@ -364,8 +371,8 @@ class AddOrEditAnnotationDialog extends React.Component {
                 { label: "Positive", value: "true" },
                 { label: "Negative", value: "false" }
               ]}
-              normalize={(value) => value === "true" || false}
-              format={(value) => (value ? "true" : "false")}
+              normalize={value => value === "true" || false}
+              format={value => (value ? "true" : "false")}
               name="forward"
               label="Strand"
             />
@@ -457,7 +464,7 @@ class AddOrEditAnnotationDialog extends React.Component {
         >
           <Button
             style={{ marginRight: 15 }}
-            onMouseDown={(e) => {
+            onMouseDown={e => {
               //use onMouseDown to prevent issues with redux form errors popping in and stopping the dialog from closing
               e.preventDefault();
               e.stopPropagation();
@@ -599,7 +606,7 @@ const Notes = view(({ readOnly, notes }) => {
             style={{ display: "flex", padding: "4px 2px" }}
           >
             <EditableText
-              onConfirm={(string) => {
+              onConfirm={string => {
                 if (string === "") {
                   if (!note.value) {
                     notes.splice(i, 1);
@@ -614,7 +621,7 @@ const Notes = view(({ readOnly, notes }) => {
               multiline
               className="addAnnNoteKey"
               // style={{marginRight: 20}}
-              onChange={(string) => {
+              onChange={string => {
                 note.key = string.replace(" ", "_").replace(/\n/g, "");
               }}
               value={key}
@@ -631,7 +638,7 @@ const Notes = view(({ readOnly, notes }) => {
               //   minWidth: 200,
               //   maxWidth: 200,
               // }}
-              onChange={(string) => {
+              onChange={string => {
                 note.value = string.replace(/\n/g, "");
               }}
               value={value}

package/src/helperComponents/AddOrEditFeatureDialog/index.js

@@ -13,7 +13,7 @@ const renderTypes = ({ readOnly }) => (
     tooltipError
     disabled={readOnly}
     defaultValue="misc_feature"
-    options={getFeatureTypes().map((type) => {
+    options={getFeatureTypes().map(type => {
       return {
         label: (
           <div
@@ -48,7 +48,7 @@ export default AddOrEditAnnotationDialog({
     // height: 500,
     width: 400
   },
-  getProps: (props) => ({
+  getProps: props => ({
     upsertAnnotation: props.upsertFeature,
     // renderLocations: true, //tnw enable this eventually for proteins
     renderLocations: !props.sequenceData.isProtein,

package/src/helperComponents/AddOrEditPartDialog/index.js

@@ -15,7 +15,7 @@ const renderTypes = ({ readOnly }) => (
     tooltipError
     disabled={readOnly}
     defaultValue="misc_feature"
-    options={getFeatureTypes().map((type) => {
+    options={getFeatureTypes().map(type => {
       return {
         label: type,
         // label: (
@@ -82,7 +82,7 @@ export default AddOrEditAnnotationDialog({
   dialogProps: {
     width: 450
   },
-  getProps: (props) => ({
+  getProps: props => ({
     upsertAnnotation: props.upsertPart,
     advancedDefaultOpen: get(props, "initialValues.overlapsSelf"),
     advancedOptions: props.allowPartsToOverlapSelf

package/src/helperComponents/AddOrEditPrimerDialog/index.js

@@ -38,13 +38,13 @@ const CustomContentEditable = generateField(function CustomContentEditable({
   const inputRef = useRef(null);
   const [caretPosition, setCaretPosition] = useState({ start: 0, end: 0 });
 
-  const emitChange = (e) => {
+  const emitChange = e => {
     const newVal = e.target.innerText;
     const savedCaretPosition = CaretPositioning.saveSelection(e.currentTarget);
     setCaretPosition(savedCaretPosition);
     const acceptedChars = getAcceptedChars(sequenceData);
     let newBases = "";
-    newVal.split("").forEach((letter) => {
+    newVal.split("").forEach(letter => {
       if (acceptedChars.includes(letter.toLowerCase())) {
         newBases += letter;
       }
@@ -137,7 +137,7 @@ const CustomContentEditable = generateField(function CustomContentEditable({
   );
 });
 
-const RenderBases = (props) => {
+const RenderBases = props => {
   const {
     sequenceData,
     readOnly,
@@ -312,14 +312,14 @@ const RenderBases = (props) => {
 
 export default AddOrEditAnnotationDialog({
   formName: "AddOrEditPrimerDialog",
-  getProps: (props) => ({
+  getProps: props => ({
     upsertAnnotation: props.upsertPrimer,
     annotationTypePlural: "primers",
     RenderBases
   })
 });
 
-const InnerWrapperMeltingTemp = (p) => (
+const InnerWrapperMeltingTemp = p => (
   <div
     className="bp3-text-muted bp3-text-small"
     style={{ marginBottom: 15, marginTop: -5, fontStyle: "italic" }}

package/src/helperComponents/EnzymesDialog/index.js

@@ -3,11 +3,7 @@ import React from "react";
 
 // import { reduxForm, formValues } from "redux-form";
 
-import {
-  InfoHelper,
-  showConfirmationDialog,
-  wrapDialog
-} from "@teselagen/ui";
+import { InfoHelper, showConfirmationDialog, wrapDialog } from "@teselagen/ui";
 import { compose } from "redux";
 import {
   Classes,
@@ -35,7 +31,7 @@ import {
 import { store, view } from "@risingstack/react-easy-state";
 import { showDialog } from "../../GlobalDialogUtils";
 
-const upsertLocalEnzymeGroups = (newGroups) => {
+const upsertLocalEnzymeGroups = newGroups => {
   const existingGroups = window.getExistingEnzymeGroups();
   const toUpsert = omitBy(
     //delete any groups that have a value of null/undefined
@@ -43,7 +39,7 @@ const upsertLocalEnzymeGroups = (newGroups) => {
       ...existingGroups,
       ...newGroups
     },
-    (val) => {
+    val => {
       return !val;
     }
   );
@@ -53,7 +49,7 @@ const upsertLocalEnzymeGroups = (newGroups) => {
 
 window.createNewEnzymeGroup =
   window.createNewEnzymeGroup ||
-  ((newName) => {
+  (newName => {
     return upsertLocalEnzymeGroups({
       [newName]: []
     });
@@ -68,7 +64,7 @@ window.editEnzymeGroupName =
   });
 window.deleteEnzymeGroup =
   window.deleteEnzymeGroup ||
-  ((nameToDelete) => {
+  (nameToDelete => {
     return upsertLocalEnzymeGroups({
       [nameToDelete]: null
     });
@@ -138,7 +134,7 @@ class EnzymesDialog extends React.Component {
       .forEach(function (key) {
         const group = existingGroups[key];
         orderedExistingGroups[key] = group;
-        group.forEach((name) => {
+        group.forEach(name => {
           const lowerName = name.toLowerCase();
           groupedEnzymesNameMap[lowerName] =
             aliasedEnzymesByName[lowerName] || additionalEnzymes[lowerName];
@@ -156,14 +152,14 @@ class EnzymesDialog extends React.Component {
       "My Enzymes": {
         protected: true,
         name: "My Enzymes",
-        enzymes: map(myEnzymes).sort((e) => e.name)
+        enzymes: map(myEnzymes).sort(e => e.name)
       },
       Hidden: {
         protected: true,
         name: "Hidden",
         tooltipInfo:
           "These less common enzymes are hidden by default. Adding them to a custom group will make them show up in the cutsite filter dropdown.",
-        enzymes: map(hiddenEnzymes).sort((e) => e.name)
+        enzymes: map(hiddenEnzymes).sort(e => e.name)
       },
       ...reduce(
         orderedExistingGroups,
@@ -209,7 +205,7 @@ class EnzymesDialog extends React.Component {
       this.state;
     const selectedEnzymesKey = `selectedEnzymes_${selectedEnzymeGroup}`;
     const selectedEnzymesForGroup = this.state[selectedEnzymesKey] || {};
-    const selectedCount = countBy(selectedEnzymesForGroup, (e) => e).true || 0;
+    const selectedCount = countBy(selectedEnzymesForGroup, e => e).true || 0;
     const fullSelectedEnzGroup = this.enzymeGroups[selectedEnzymeGroup] || {};
 
     const enzymeList = flatMap(fullSelectedEnzGroup.enzymes, (enz, i) => {
@@ -458,7 +454,7 @@ class EnzymesDialog extends React.Component {
               <InputGroup
                 round
                 placeholder="Search by name or # of cuts"
-                onChange={(e) => {
+                onChange={e => {
                   this.setState({
                     searchInput: e.target.value
                   });
@@ -470,7 +466,7 @@ class EnzymesDialog extends React.Component {
                       icon="cross"
                       minimal
                       intent="danger"
-                      onClick={(e) => {
+                      onClick={e => {
                         this.setState({ searchInput: "" });
                         e.stopPropagation();
                       }}
@@ -531,7 +527,7 @@ class EnzymesDialog extends React.Component {
                             selectedCount,
                             selectedEnzymesForGroup,
                             enzymeGroups: this.enzymeGroups,
-                            setStateAbove: (val) => {
+                            setStateAbove: val => {
                               this.setState(val);
                             }
                           }}
@@ -563,8 +559,7 @@ class EnzymesDialog extends React.Component {
                         if (confirm) {
                           const enzymes = flatMap(
                             fullSelectedEnzGroup.enzymes,
-                            (e) =>
-                              selectedEnzymesForGroup[e.name] ? [] : e.name
+                            e => (selectedEnzymesForGroup[e.name] ? [] : e.name)
                           );
                           window.updateEnzymeGroup(
                             selectedEnzymeGroup,
@@ -777,7 +772,7 @@ export default compose(
 )(EnzymesDialog);
 
 function getEnzymesForNames(names, allEnzymesByName) {
-  return names.map((n) => {
+  return names.map(n => {
     return (n && allEnzymesByName[n.toLowerCase()]) || { name: "Not Found!" };
   });
 }
@@ -790,7 +785,7 @@ class MoveToInner extends React.Component {
       setStateAbove,
       enzymeGroups
     } = this.props;
-    const enzymeOpts = flatMap(enzymeGroups, (g) => {
+    const enzymeOpts = flatMap(enzymeGroups, g => {
       if (g.protected || g.name === selectedEnzymeGroup) return [];
       return {
         value: g.name
@@ -827,7 +822,7 @@ class MoveToInner extends React.Component {
             <h5>Copy {selectedCount} Enzyme(s) To:</h5>
 
             <HTMLSelect
-              onChange={(e) => {
+              onChange={e => {
                 setStateAbove({
                   enzymeGroupToMoveTo: e.target.value
                 });
@@ -841,7 +836,7 @@ class MoveToInner extends React.Component {
                 const enzymes = uniq([
                   ...map(
                     enzymeGroups[enzymeGroupToMoveTo].enzymes,
-                    (e) => e.name
+                    e => e.name
                   ),
                   ...flatMap(selectedEnzymesForGroup, (selected, name) =>
                     selected ? name : []

package/src/helperComponents/GoToDialog.js

@@ -17,5 +17,9 @@ export default createSimpleDialog({
       }
     }
   ],
-  withDialogProps: { title: "Go To", height: 190, onCloseHook: tryToRefocusEditor }
+  withDialogProps: {
+    title: "Go To",
+    height: 190,
+    onCloseHook: tryToRefocusEditor
+  }
 });

package/src/helperComponents/MergeFeaturesDialog/index.js

@@ -38,7 +38,7 @@ class MergeFeaturesDialog extends React.Component {
     const feat2 = features[id2];
     const [id1default, id2default] = flatMap(
       selectedAnnotations.idStack,
-      (id) => {
+      id => {
         const ann = selectedAnnotations.idMap[id];
         if (ann.annotationTypePlural === "features") {
           return id;
@@ -115,7 +115,7 @@ class MergeFeaturesDialog extends React.Component {
               </div>
             </div>
           }
-          options={flatMap(features, (feat) => {
+          options={flatMap(features, feat => {
             if (feat.id === (feat2 && feat2.id)) return []; //filter out other feature as an option
             return {
               value: feat.id,
@@ -168,7 +168,7 @@ class MergeFeaturesDialog extends React.Component {
               </div>
             </div>
           }
-          options={flatMap(features, (feat) => {
+          options={flatMap(features, feat => {
             if (feat.id === (feat1 && feat1.id)) return []; //filter out other feature as an option
             return {
               value: feat.id,

package/src/helperComponents/PinchHelper/PinchHelper.js

@@ -9,7 +9,7 @@ export default function PinchHelper({ children, onPinch }) {
   const target = React.useRef();
 
   usePinch(
-    (arg) => {
+    arg => {
       if (onPinch) onPinch(arg);
     },
     {

package/src/helperComponents/PrintDialog/index.js

@@ -68,7 +68,7 @@ class PrintDialog extends React.Component {
           fullscreen={this.state && this.state.fullscreen}
           circular={isCirc}
           editorName={editorName || "StandaloneEditor"}
-          ref={(el) => (this.componentRef = el)}
+          ref={el => (this.componentRef = el)}
         />
         <br />
         {!hidePrintButton && (
@@ -157,7 +157,7 @@ class ReactToPrint extends React.Component {
   removeWindow(targets) {
     targets &&
       setTimeout(() => {
-        (Array.isArray(targets) ? targets : [targets]).forEach((target) => {
+        (Array.isArray(targets) ? targets : [targets]).forEach(target => {
           target.parentNode.removeChild(target);
         });
       }, 500);
@@ -336,7 +336,7 @@ class ReactToPrint extends React.Component {
             }
           } else {
             const attributes = [...(node.attributes || [])];
-            attributes.forEach((attr) => {
+            attributes.forEach(attr => {
               newHeadEl.setAttribute(attr.nodeName, attr.nodeValue);
             });
 
@@ -361,7 +361,7 @@ class ReactToPrint extends React.Component {
 
   render() {
     return React.cloneElement(this.props.trigger(), {
-      ref: (el) => (this.triggerRef = el),
+      ref: el => (this.triggerRef = el),
       onClick: this.startPrint
     });
   }

package/src/helperComponents/PropertiesDialog/CutsiteProperties.js

@@ -24,7 +24,7 @@ class CutsiteProperties extends React.Component {
     this.commands = commands(this);
   }
 
-  SubComponent = (row) => {
+  SubComponent = row => {
     return (
       <SingleEnzymeCutsiteInfo
         {...{
@@ -61,12 +61,12 @@ class CutsiteProperties extends React.Component {
     } = this.props;
 
     const { cutsitesByName, cutsitesById } = allCutsites;
-    const cutsitesToUse = map(cutsitesByName, (cutsiteGroup) => {
+    const cutsitesToUse = map(cutsitesByName, cutsiteGroup => {
       const name = cutsiteGroup[0].restrictionEnzyme.name;
       let groups = "";
       const exisitingEnzymeGroups = window.getExistingEnzymeGroups();
 
-      Object.keys(exisitingEnzymeGroups).forEach((key) => {
+      Object.keys(exisitingEnzymeGroups).forEach(key => {
         if (exisitingEnzymeGroups[key].includes(name)) groups += key;
         groups += " ";
       });

package/src/helperComponents/PropertiesDialog/GenbankView.js

@@ -42,7 +42,7 @@ class GenbankView extends React.Component {
             { label: "Fasta", value: "fasta" },
             { label: "Teselagen JSON", value: "teselagen" }
           ]}
-          onChange={(e) => {
+          onChange={e => {
             this.setState({ fileTypeToView: e.target.value });
           }}
         />

package/src/helperComponents/PropertiesDialog/GeneralProperties.js

@@ -3,9 +3,10 @@ import { InputField, BPSelect, TextareaField } from "@teselagen/ui";
 import { reduxForm } from "redux-form";
 import withEditorProps from "../../withEditorProps";
 import { compose } from "recompose";
+import { handleReadOnlyChange } from "../../ToolBar/editTool";
 
 class GeneralProperties extends React.Component {
-  updateSeqDesc = (val) => {
+  updateSeqDesc = val => {
     return this.props.sequenceDescriptionUpdate(val);
   };
   render() {
@@ -17,7 +18,6 @@ class GeneralProperties extends React.Component {
       disableSetReadOnly,
       updateAvailability,
       sequenceData,
-      updateReadOnlyMode,
       onSave,
       showAvailability,
       sequenceNameUpdate
@@ -39,7 +39,7 @@ class GeneralProperties extends React.Component {
           <div className="ve-column-right">
             <InputField
               disabled={readOnly}
-              onFieldSubmit={(val) => {
+              onFieldSubmit={val => {
                 sequenceNameUpdate(val);
               }}
               name="name"
@@ -55,7 +55,7 @@ class GeneralProperties extends React.Component {
               {" "}
               <BPSelect
                 disabled={readOnly}
-                onChange={(val) => {
+                onChange={val => {
                   updateCircular(val === "circular");
                 }}
                 value={circular ? "circular" : "linear"}
@@ -77,7 +77,7 @@ class GeneralProperties extends React.Component {
               {" "}
               <BPSelect
                 disabled={readOnly}
-                onChange={(val) => {
+                onChange={val => {
                   updateAvailability(val === "available");
                 }}
                 value={materiallyAvailable ? "available" : "unavailable"}
@@ -102,10 +102,12 @@ class GeneralProperties extends React.Component {
             <div className="ve-column-right">
               {" "}
               <BPSelect
+                className={"veReadOnlySelect"}
                 disabled={!onSave || disableSetReadOnly}
-                onChange={(val) => {
-                  updateReadOnlyMode(val === "readOnly");
-                }}
+                onChange={val =>
+                  console.log(`val:`, val) ||
+                  handleReadOnlyChange(val === "readOnly", this.props)
+                }
                 value={readOnly ? "readOnly" : "editable"}
                 options={[
                   { label: "Read Only", value: "readOnly" },