refactor

CHANGELOG.md

@@ -45,6 +45,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Added menu item to allow user to export DNA as FASTA when looking at a protein sequence to resolve https://github.com/TeselaGen/tg-oss/issues/61 [`#61`](https://github.com/TeselaGen/tg-oss/issues/61)
 - Added fix for clipboard commands when there are multiple editors on a page to resolve https://github.com/TeselaGen/tg-oss/issues/24 [`#24`](https://github.com/TeselaGen/tg-oss/issues/24)
 - closes #35 [`#35`](https://github.com/TeselaGen/tg-oss/issues/35)
+- refactor [`ec2050c`](https://github.com/TeselaGen/tg-oss/commit/ec2050cfce60e27cb9fc3ef6242303ded2e7ef5e)
 - updating yarn lock [`ff41df0`](https://github.com/TeselaGen/tg-oss/commit/ff41df0b49b8051fcba084f7eaa44cf23284926d)
 - updating deps, moving to lodash-es, moving all packages to type: module [`bc7312c`](https://github.com/TeselaGen/tg-oss/commit/bc7312ccbe27c2d9a11cf2563ba978199428b50a)
-- updating table styling to remove table last row bottom margin, removing unused S3Download, removing axios dep, updating deps [`8a6fb1f`](https://github.com/TeselaGen/tg-oss/commit/8a6fb1f047550f617c3e56b8c3ebf145967076ef)

packages/ove/demo/src/utils/renderToggle.js

@@ -68,34 +68,25 @@ export default function renderToggle({
     }
   }
   if (isButton) {
-    toggleOrButton = (
-      <Button
-        {...{
-          ...sharedProps,
-          onClick: onClick || hook
-        }}
-      />
-    );
+    toggleOrButton = <Button {...sharedProps} onClick={onClick || hook} />;
   } else if (isSelect) {
     const { style, label, ...rest } = sharedProps;
     toggleOrButton = (
       <div key={type + "iwuhwp"} style={sharedProps.style}>
         {label && <span>{label} &nbsp;</span>}
         <EnhancedSelect
-          {...{
-            options,
-            ...rest,
-            didMount: () => {
-              hook && hook((that.state || {})[type], true);
-            },
-            value: (that.state || {})[type],
-            disabled: disabled,
-            onChange: newType => {
-              hook && hook(newType.target.value);
-              that.setState({
-                [type]: newType.target.value
-              });
-            }
+          options={options}
+          {...rest}
+          didMount={() => {
+            hook && hook((that.state || {})[type], true);
+          }}
+          value={(that.state || {})[type]}
+          disabled={disabled}
+          onChange={newType => {
+            hook && hook(newType.target.value);
+            that.setState({
+              [type]: newType.target.value
+            });
           }}
         />
       </div>
@@ -109,15 +100,13 @@ export default function renderToggle({
     };
     toggleOrButton = (
       <EnhancedSwitch
-        {...{
-          ...sharedProps,
-          didMount: () => {
-            hook && hook(!!(that.state || {})[type]);
-          },
-          checked: (that.state || {})[type],
-          disabled: disabled,
-          onChange: switchOnChange
+        {...sharedProps}
+        didMount={() => {
+          hook && hook(!!(that.state || {})[type]);
         }}
+        checked={(that.state || {})[type]}
+        disabled={disabled}
+        onChange={switchOnChange}
       />
     );
   }
@@ -127,23 +116,20 @@ export default function renderToggle({
       style={{ display: "flex", alignItems: "center", margin: "5px 5px" }}
       className="toggle-button-holder"
     >
-      <ShowInfo {...{ description, info, type }}></ShowInfo>
+      <ShowInfo description={description} info={info} type={type} />
       {toggleOrButton}
       {switchOnChange && hotkey && (
-        <React.Fragment>
-          <HandleHotkeys
-            onKeyDown={switchOnChange}
-            combo={hotkey}
-          ></HandleHotkeys>
+        <>
+          <HandleHotkeys onKeyDown={switchOnChange} combo={hotkey} />
           <div
             style={{
               marginLeft: 5,
               transform: "scale(0.8)"
             }}
           >
-            <KeyCombo minimal combo={hotkey}></KeyCombo>
+            <KeyCombo minimal combo={hotkey} />
           </div>
-        </React.Fragment>
+        </>
       )}
     </div>
   );
@@ -166,7 +152,7 @@ function HandleHotkeys({ combo, onKeyDown }) {
 function ShowInfo({ description, info, type }) {
   const [isOpen, setOpen] = useState(false);
   return (
-    <React.Fragment>
+    <>
       <Dialog
         onClose={() => {
           setOpen(false);
@@ -190,12 +176,12 @@ function ShowInfo({ description, info, type }) {
             }}
             minimal
             icon="info-sign"
-          ></Button>
+          />
         </div>
       ) : (
-        <div style={{ minWidth: 30, width: 30, height: 30 }}></div>
+        <div style={{ minWidth: 30, width: 30, height: 30 }} />
       )}
-    </React.Fragment>
+    </>
   );
 }
 

packages/ove/src/AutoAnnotate.js

@@ -165,8 +165,9 @@ export const AutoAnnotateModal = compose(
                 >
                   download example
                 </a>
-                ) with the following columns:<br></br>
-                <br></br>
+                ) with the following columns:
+                <br />
+                <br />
                 <div style={{ display: "flex" }}>
                   name,description,sequence,type,
                   <span style={{ display: "flex" }}>
@@ -185,15 +186,15 @@ export const AutoAnnotateModal = compose(
                           regex matching
                         </span>
                       }
-                    ></InfoHelper>
+                    />
                   </span>
                   ,matchType
                 </div>
-                <br></br>
+                <br />
                 {annotationType !== "feature" && (
                   <>
                     <i>Note: the "type" column is optional</i>
-                    <br></br>
+                    <br />
                   </>
                 )}
               </div>
@@ -203,12 +204,12 @@ export const AutoAnnotateModal = compose(
                 fileLimit={1}
                 isRequired
                 accept=".csv"
-              ></FileUploadField>
+              />
             </div>
           }
           id="csvFile"
           title="CSV"
-        ></Tab>
+        />
         <Tab
           panel={
             <div>
@@ -234,18 +235,18 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
                 name="apeFile"
                 isRequired
                 accept=".txt"
-              ></FileUploadField>
+              />
               {error && (
                 <div style={{ padding: 5, color: Colors.RED1 }}>{error}</div>
               )}
             </div>
           }
           id="apeFile"
           title="ApE File"
-        ></Tab>
+        />
         {getCustomAutoAnnotateList &&
           (loadingCustomAnnList ? (
-            <Tab disabled title="Loading..."></Tab>
+            <Tab disabled title="Loading..." />
           ) : (
             customAnnResponse &&
             customAnnResponse.list && (
@@ -263,13 +264,13 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
                             : customAnnsSchemaNoType
                         }
                         entities={customAnnResponse.list}
-                      ></DataTable>
+                      />
                     </div>
                   ) : (
                     <div>No Annotations Found</div>
                   )
                 }
-              ></Tab>
+              />
             )
           ))}
       </Tabs>
@@ -451,7 +452,7 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
           }
         })}
         text="Annotate"
-      ></DialogFooter>
+      />
     </div>
   );
 });

packages/ove/src/CreateAnnotationsPage.js

@@ -48,7 +48,7 @@ export default compose(
           }))}
           withCheckboxes
           schema={annotationType === "feature" ? schemaFeatures : schemaOther}
-        ></DataTable>
+        />
       </div>
       <DialogFooter
         hideModal={hideDialog}
@@ -92,7 +92,7 @@ export default compose(
           hideDialog();
         })}
         text="Add"
-      ></DialogFooter>
+      />
     </div>
   );
 });

packages/ove/src/DigestTool/DigestTool.js

@@ -18,7 +18,7 @@ import {
 } from "@blueprintjs/core";
 import withEditorInteractions from "../withEditorInteractions";
 import { userDefinedHandlersAndOpts } from "../Editor/userDefinedHandlersAndOpts";
-import { noop, pick } from "lodash-es";
+import { pick } from "lodash-es";
 
 const MAX_DIGEST_CUTSITES = 50;
 const MAX_PARTIAL_DIGEST_CUTSITES = 10;
@@ -30,7 +30,7 @@ export class DigestTool extends React.Component {
       // height = 100,
       dimensions = {},
       lanes,
-      digestTool: { selectedFragment, computePartialDigest },
+      digestTool: { computePartialDigest },
       onDigestSave,
       computePartialDigestDisabled,
       computeDigestDisabled,
@@ -131,14 +131,6 @@ export class DigestTool extends React.Component {
                 onSingleRowSelect={({ onFragmentSelect }) => {
                   onFragmentSelect();
                 }}
-                reduxFormSelectedEntityIdMap={{
-                  input: {
-                    value: {
-                      [selectedFragment]: true
-                    },
-                    onChange: noop
-                  }
-                }}
                 formName="digestInfoTable"
                 entities={lanes[0].map(
                   ({ id, cut1, cut2, start, end, size, ...rest }) => {

packages/ove/src/helperComponents/PropertiesDialog/GenericAnnotationProperties.js

@@ -233,7 +233,7 @@ const genericAnnotationProperties = ({
                           )
                         });
                       }}
-                    ></AnchorButton>
+                    />
                   </Tooltip>
                   <Tooltip
                     position="top"
@@ -251,7 +251,7 @@ const genericAnnotationProperties = ({
                         annotationPropertiesSelectedEntities.length !== 1
                       }
                       icon="edit"
-                    ></AnchorButton>
+                    />
                   </Tooltip>
 
                   {["feature"].includes(annotationType) && (
@@ -291,7 +291,7 @@ const genericAnnotationProperties = ({
                       intent="danger"
                       disabled={!annotationPropertiesSelectedEntities.length}
                       icon="trash"
-                    ></AnchorButton>
+                    />
                   </Tooltip>
                 </ButtonGroup>
               )}
@@ -399,6 +399,6 @@ export function getVisFilter(submenu) {
       className="propertiesVisFilter"
       data-tip="Visibility Filter"
       menu={<Menu>{submenu}</Menu>}
-    ></DropdownButton>
+    />
   );
 }

packages/shared-demo/src/DemoNav.js

@@ -43,6 +43,7 @@ export default ({ demos, isOpen, setIsOpen }) => {
       </div>
 
       <InputGroup
+        name="Filter"
         rightElement={
           search && (
             <Button
@@ -61,7 +62,7 @@ export default ({ demos, isOpen, setIsOpen }) => {
         style={{ marginBottom: 5 /* maxWidth: 200 */ }}
         placeholder="Filter..."
         leftElement={<Icon style={{ marginTop: 6 }} icon="search"></Icon>}
-      ></InputGroup>
+      />
       {Object.keys(demos)
         .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
         .map(function (name, index) {

packages/shared-demo/src/DemoPage.js

@@ -68,7 +68,7 @@ const DemoPage = ({ moduleName, demos, showComponentList }) => {
                     minimal
                     intent="primary"
                     icon="chevron-right"
-                  ></Button>
+                  />
                 )
               }
               packageName={`${moduleName}`}
@@ -173,7 +173,7 @@ const DemoComponentWrapper = ({
     } else {
       component = (
         <>
-          <Demo history={history}></Demo>
+          <Demo history={history} />
           {!!props.length && (
             <>
               <h6

packages/shared-demo/src/VersionSwitcher.js

@@ -69,19 +69,20 @@ export default function VersionSwitcher({
           width="100"
           height="20"
           title="GitHub"
-        ></iframe>
+        />
         {testBadge && <ReactMarkdown children={testBadge} />}
       </div>
       {options.length ? (
         <div>
           <HTMLSelect
+            name="version-select"
             minimal
             onChange={function onChange(e) {
               window.location.href = `https://teselagen.github.io/tg-oss/${packageName}/version/${e.currentTarget.value}/#/Editor`;
             }}
             value={version}
             options={options}
-          ></HTMLSelect>
+          />
           <a
             target="_blank"
             rel="noopener noreferrer"

packages/ui/cypress/e2e/EditableCellTable.spec.js

@@ -1,4 +1,5 @@
 import path from "path";
+import os from "os";
 
 describe("EditableCellTable.spec", () => {
   it(`cell checkboxes and the header checkbox should work`, () => {
@@ -170,7 +171,7 @@ describe("EditableCellTable.spec", () => {
   // });
   it(`arrow keys should work together with shift and dragging should work`, () => {
     cy.visit("#/DataTable%20-%20EditableCellTable");
-    cy.get(`[data-test="tgCell_howMany"]`).eq(3).click({ force: true });
+    cy.get(`[data-test="tgCell_howMany"]`).eq(3).click();
     cy.focused().type(`{leftArrow}`);
     cy.get(
       `.rt-td.isSelectedCell.isPrimarySelected [data-test="tgCell_weather"]`
@@ -239,8 +240,7 @@ describe("EditableCellTable.spec", () => {
     );
   });
   it(`undo/redo should work`, () => {
-    const IS_LINUX =
-      window.navigator.platform.toLowerCase().search("linux") > -1;
+    const IS_LINUX = os.platform().toLowerCase().search("linux") > -1;
     const undoCmd = IS_LINUX ? `{alt}z` : "{meta}z";
     const redoCmd = IS_LINUX ? `{alt}{shift}z` : "{meta}{shift}z";
     cy.visit("#/DataTable%20-%20EditableCellTable");