@teselagen/ui 0.7.32 → 0.7.33-beta.2

package/AdvancedOptions.js

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { Icon } from "@blueprintjs/core";
+
+export default function AdvancedOptions({
+  children,
+  content,
+  label,
+  style,
+  isOpenByDefault
+}) {
+  const [isOpen, setOpen] = useState(isOpenByDefault);
+  if (!(content || children)) {
+    return null;
+  }
+  return (
+    <div style={{ marginTop: 5, ...style }}>
+      <div
+        onClick={() => {
+          setOpen(!isOpen);
+        }}
+        style={{ cursor: "pointer", display: "flex", alignItems: "flex-end" }}
+        className="tg-toggle-advanced-options"
+      >
+        {label || "Advanced"}{" "}
+        <Icon
+          icon={isOpen ? "caret-down" : "caret-right"}
+          style={{ marginLeft: 5 }}
+        ></Icon>
+      </div>
+      {isOpen && <div style={{ marginTop: 10 }}>{content || children}</div>}
+    </div>
+  );
+}

package/AssignDefaultsModeContext.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+export const AssignDefaultsModeContext = React.createContext({
+  inAssignDefaultsMode: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setAssignDefaultsMode: () => {}
+});
+
+export const workflowDefaultParamsObj = {
+  taskNumber: undefined,
+  workflowDefinitionName: undefined,
+  workflowDefinitionId: undefined,
+  workflowRunName: undefined,
+  workflowRunId: undefined,
+  toolName: undefined,
+  workflowToolTitle: undefined,
+  workflowToolDefinitionId: undefined,
+  workflowTaskCode: undefined
+};
+export const WorkflowDefaultParamsContext = React.createContext(
+  workflowDefaultParamsObj
+);

package/DataTable/utils/filterLocalEntitiesToHasura.d.ts

@@ -0,0 +1,5 @@
+export function filterLocalEntitiesToHasura(records: any, { where, order_by, limit, offset, isInfinite }?: {}): {
+    entities: any[];
+    entitiesAcrossPages: any[];
+    entityCount: number;
+};

package/DataTable/utils/initializeHasuraWhereAndFilter.d.ts

@@ -0,0 +1,2 @@
+export function initializeHasuraWhereAndFilter(additionalFilter: any, where: {} | undefined, currentParams: any): void;
+export function addCustomColumnFilters(where: any, fields: any, currentParams: any): void;

package/DataTable/utils/queryParams.d.ts

@@ -25,31 +25,27 @@ export function makeDataTableHandlers({ setNewParams, defaults, onlyOneFilter }:
     setOrder: (order: any, isRemove: any, shiftHeld: any) => any;
     setNewParams: any;
 };
-export function getQueryParams({ currentParams, urlConnected, defaults, schema, isInfinite, entities, isLocalCall, additionalFilter, additionalOrFilter, doNotCoercePageSize, noOrderError, isCodeModel, ownProps }: {
+export function getQueryParams({ currentParams, defaults, schema, isInfinite, entities, isLocalCall, additionalFilter, doNotCoercePageSize, ownProps }: {
     currentParams: any;
-    urlConnected: any;
     defaults: any;
     schema: any;
     isInfinite: any;
     entities: any;
     isLocalCall: any;
     additionalFilter: any;
-    additionalOrFilter: any;
     doNotCoercePageSize: any;
-    noOrderError: any;
-    isCodeModel: any;
     ownProps: any;
 }): {
-    page: any;
-    pageSize: any;
-    order: any;
-    filters: any;
-    searchTerm: any;
+    entities: any[];
+    entitiesAcrossPages: any[];
+    entityCount: number;
 } | {
     variables: {
-        sort: never[];
+        where: {};
+        order_by: {};
+        limit: any;
+        offset: number;
     };
-    errorParsingUrlString: unknown;
     page: any;
     pageSize: any;
     order: any;

package/DataTable/utils/simplifyHasuraWhere.d.ts

@@ -0,0 +1 @@
+export function simplifyHasuraWhere(whereClause: any): {};

package/DataTable/utils/tableQueryParamsToHasuraClauses.d.ts

@@ -0,0 +1,14 @@
+export function tableQueryParamsToHasuraClauses({ page, pageSize, searchTerm, filters, order, schema, additionalFilter }: {
+    page: any;
+    pageSize: any;
+    searchTerm: any;
+    filters: any;
+    order: any;
+    schema: any;
+    additionalFilter: any;
+}): {
+    where: {};
+    order_by: {};
+    limit: any;
+    offset: number;
+};

package/DropdownButton.js

@@ -0,0 +1,36 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+import React from "react";
+import { Button, Popover, Position } from "@blueprintjs/core";
+import classnames from "classnames";
+import popoverOverflowModifiers from "./utils/popoverOverflowModifiers";
+
+function DropdownButton({
+  disabled,
+  menu,
+  noRightIcon,
+  popoverProps,
+  className,
+  ...rest
+}) {
+  return (
+    <Popover
+      minimal
+      modifiers={popoverOverflowModifiers}
+      disabled={disabled}
+      autoFocus={false}
+      content={menu}
+      position={Position.BOTTOM_LEFT}
+      {...popoverProps}
+    >
+      <Button
+        disabled={disabled}
+        className={classnames(className, "dropdown-button")}
+        rightIcon={noRightIcon ? undefined : "caret-down"}
+        {...rest}
+      />
+    </Popover>
+  );
+}
+
+export default DropdownButton;

package/FillWindow.css

@@ -0,0 +1,6 @@
+.tg-fillWindow {
+  background: white;
+}
+.bp3-dark .tg-fillWindow {
+  background: #293742;
+}

package/FillWindow.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { isFunction } from "lodash-es";
+import rerenderOnWindowResize from "./rerenderOnWindowResize";
+import "./FillWindow.css";
+
+// use like:
+// <FillWindow>
+//         {({ width, height }) => {
+//           return <div style={{width, height}}></div>
+//         }
+// <FillWindow/>
+
+export default class FillWindow extends React.Component {
+  constructor(props) {
+    super(props);
+    rerenderOnWindowResize(this);
+  }
+  // this is left here for posterity. componentDidMount didn't work before commit ee1853a5ae2e6e27b720dd225650cc2154076db5 "fixing rerenderOnWindowResize to bind this keyword correctly"
+  // componentDidMount(){
+  //   this.setState({thomas: "realCool"})
+  // }
+
+  render() {
+    const w = window,
+      d = document,
+      e = d.documentElement,
+      g = d.getElementsByTagName("body")[0],
+      width = w.innerWidth || e.clientWidth || g.clientWidth,
+      height = w.innerHeight || e.clientHeight || g.clientHeight;
+    const windowDimensions = {
+      width,
+      height
+    };
+    const {
+      containerStyle = {},
+      style,
+      styleOverrides,
+      className,
+      asPortal,
+      ...rest
+    } = this.props;
+    if (this.props.disabled) return this.props.children(windowDimensions);
+    const inner = (
+      <div
+        className={
+          "tg-fillWindow " + (asPortal ? "bp3-portal " : "") + (className || "")
+        }
+        style={{
+          ...style,
+          width,
+          height,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          ...containerStyle,
+          ...styleOverrides
+        }}
+        {...rest}
+      >
+        {this.props.children && isFunction(this.props.children)
+          ? this.props.children(windowDimensions)
+          : this.props.children}
+      </div>
+    );
+    if (asPortal) return createPortal(inner, window.document.body);
+    return inner;
+  }
+}

package/{src/DataTable/FilterAndSortMenu.js → FilterAndSortMenu.js}

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
-import { camelCase } from "lodash-es";
+import { camelCase, startCase } from "lodash-es";
 import classNames from "classnames";
 import {
   Menu,
@@ -349,43 +349,40 @@ function getFilterMenuItems(dataType) {
   let filterMenuItems = [];
   if (dataType === "string") {
     filterMenuItems = [
-      "Contains",
-      "Not Contains",
-      "Starts With",
-      "Ends With",
-      "Is Exactly",
-      "Regex",
-      "In List",
-      "Not In List",
-      "Is Empty",
-      "Not Empty"
+      "contains",
+      "notContains",
+      "startsWith",
+      "endsWith",
+      "isExactly",
+      "regex",
+      "inList",
+      "notInList",
+      "isEmpty",
+      "notEmpty"
     ];
   } else if (dataType === "lookup") {
     filterMenuItems = [
-      "Contains",
-      "Not Contains",
-      "Starts With",
-      "Ends With",
-      "Is Exactly",
-      "Regex"
+      "contains",
+      "notContains",
+      "startsWith",
+      "endsWith",
+      "isExactly",
+      "regex"
     ];
   } else if (dataType === "boolean") {
-    filterMenuItems = ["True", "False"];
+    filterMenuItems = ["true", "false"];
   } else if (dataType === "number" || dataType === "integer") {
-    // else if (dataType === "lookup") {
-    //   filterMenuItems = ["None"];
-    // }
     filterMenuItems = [
-      "Greater Than",
-      "Less Than",
-      "In Range",
-      "Outside Range",
-      "Equal To",
-      "In List",
-      "Not In List"
+      "greaterThan",
+      "lessThan",
+      "inRange",
+      "outsideRange",
+      "equalTo",
+      "inList",
+      "notInList"
     ];
   } else if (dataType === "timestamp") {
-    filterMenuItems = ["Is Between", "Not Between", "Is Before", "Is After"];
+    filterMenuItems = ["isBetween", "notBetween", "isBefore", "isAfter"];
   }
-  return filterMenuItems;
+  return filterMenuItems.map(item => startCase(item));
 }

package/MatchHeaders.js

@@ -0,0 +1,234 @@
+import React, { useMemo } from "react";
+import { Callout, Card, Intent } from "@blueprintjs/core";
+import immer, { setAutoFreeze } from "immer";
+import { flatMap, forEach } from "lodash-es";
+import { ReactSelectField } from "./FormComponents";
+import showConfirmationDialog from "./showConfirmationDialog";
+import { startCase } from "lodash-es";
+import { typeToCommonType } from "./typeToCommonType";
+import { camelCase } from "lodash-es";
+import { change } from "redux-form";
+import { useDispatch } from "react-redux";
+
+setAutoFreeze(false);
+export const MatchHeaders = ({
+  csvValidationIssue,
+  datatableFormName,
+  datatableFormNames: _datatableFormNames,
+  doAllFilesHaveSameHeaders,
+  fileIndex,
+  filesWIssues,
+  ignoredHeadersMsg,
+  matchedHeaders,
+  onMultiFileUploadSubmit,
+  reduxFormEntitiesArray,
+  searchResults,
+  setFilesWIssues,
+  userSchema
+}) => {
+  const datatableFormNames = _datatableFormNames || [datatableFormName];
+  const dispatch = useDispatch();
+  const flippedMatchedHeaders = useMemo(() => {
+    const _flippedMatchedHeaders = {};
+    forEach(matchedHeaders, (v, k) => {
+      if (v) _flippedMatchedHeaders[v] = k;
+    });
+    return _flippedMatchedHeaders;
+  }, [matchedHeaders]);
+
+  return (
+    <div style={{ maxWidth: 500 }}>
+      {!onMultiFileUploadSubmit && (
+        <Callout style={{ width: "fit-content" }} intent="warning">
+          {csvValidationIssue}
+        </Callout>
+      )}
+      {!onMultiFileUploadSubmit && ignoredHeadersMsg && (
+        <Callout style={{ width: "fit-content" }} intent="warning">
+          {ignoredHeadersMsg}
+        </Callout>
+      )}
+      <br />
+      <tr
+        style={{
+          display: "flex",
+          minHeight: 50,
+          alignItems: "center",
+          justifyContent: "space-between"
+        }}
+      >
+        <td
+          style={{
+            width: 200,
+            marginLeft: 20,
+            display: "flex",
+            fontWeight: "bold"
+          }}
+        >
+          Accepted Headers
+        </td>
+        <td
+          style={{
+            width: 200,
+            marginLeft: 20,
+            display: "flex",
+            fontWeight: "bold"
+          }}
+        >
+          Your Headers
+        </td>
+        <td
+          style={{
+            fontWeight: "bold",
+            marginLeft: 30
+          }}
+        >
+          Data Preview
+        </td>
+      </tr>
+      {searchResults.map(({ path, displayName, type }, i) => {
+        const userMatchedHeader = matchedHeaders[path];
+        const opts = flatMap(userSchema.fields, ({ path: pathInner }) => {
+          if (
+            pathInner !== userMatchedHeader &&
+            flippedMatchedHeaders[pathInner]
+          ) {
+            return [];
+          }
+          return {
+            value: pathInner,
+            label: pathInner
+          };
+        }).sort((a, b) => {
+          const ra = searchResults[i].matches
+            .map(m => m.item.path)
+            .indexOf(a.value);
+          const rb = searchResults[i].matches
+            .map(m => m.item.path)
+            .indexOf(b.value);
+          if (!ra) return -1;
+          if (!rb) return 1;
+          return rb - ra;
+        });
+        return (
+          <Card style={{ padding: 2 }} key={`field-${i}`}>
+            <table>
+              <tbody>
+                <tr
+                  style={{
+                    display: "flex",
+                    minHeight: 50,
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  }}
+                >
+                  <td
+                    style={{
+                      width: 200,
+                      display: "flex"
+                    }}
+                  >
+                    <div
+                      style={{
+                        paddingTop: 2,
+                        marginLeft: 15,
+                        fontSize: 15
+                      }}
+                    >
+                      <span
+                        data-tip={`Column Type: ${
+                          typeToCommonType[type || "string"] || type
+                        }`}
+                      >
+                        {displayName || startCase(camelCase(path))}
+                      </span>
+                    </div>
+                  </td>
+                  <td style={{ width: 200 }}>
+                    <ReactSelectField
+                      noMarginBottom
+                      tooltipError
+                      beforeOnChange={async () => {
+                        const clearEntities = () => {
+                          datatableFormNames.forEach(name => {
+                            dispatch(change(name, "reduxFormEntities", null));
+                          });
+                        };
+                        if (reduxFormEntitiesArray.some(r => r?.isDirty)) {
+                          //when the column mapping changes, update the column in reduxFormEntities (if reduxFormEntities exists)
+                          const doAction = await showConfirmationDialog({
+                            text: "Are you sure you want to edit the columm mapping? This will clear any changes you've already made to the table data",
+                            intent: Intent.DANGER,
+                            confirmButtonText: "Yes",
+                            cancelButtonText: "No"
+                            // canEscapeKeyCancel: true //this is false by default
+                          });
+                          if (doAction) {
+                            clearEntities();
+                          } else {
+                            return { stopEarly: true };
+                          }
+                        } else {
+                          clearEntities();
+                          return { stopEarly: false };
+                        }
+                      }}
+                      onChange={val => {
+                        setFilesWIssues(
+                          immer(filesWIssues, files => {
+                            files.forEach((f, i) => {
+                              const isCurrentFile = fileIndex === i;
+                              if (isCurrentFile || doAllFilesHaveSameHeaders) {
+                                f.matchedHeaders[path] = val;
+                              }
+                            });
+                          })
+                        );
+                      }}
+                      name={path}
+                      // isRequired={!allowEmpty && defaultValue === undefined}
+                      defaultValue={userMatchedHeader}
+                      options={opts}
+                    />
+                  </td>
+                  <td
+                    style={{
+                      marginTop: 10,
+                      marginBottom: 10,
+                      marginLeft: 20,
+                      fontSize: 10 /* color: Colors.RED1 */
+                    }}
+                  >
+                    {userMatchedHeader &&
+                      [
+                        // { [userMatchedHeader]: "Preview:" },
+                        ...(userSchema.userData?.slice(0, 3) || [])
+                        // { [userMatchedHeader]: "..." }
+                      ].map((row, i) => {
+                        return (
+                          <div
+                            style={{
+                              maxWidth: 70,
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap"
+                            }}
+                            key={`userMatchedHeader-${i}`}
+                          >
+                            {row?.[userMatchedHeader] || ""}
+                          </div>
+                        );
+                      })}
+                    {/* {!allowEmpty &&
+                          defaultValue === undefined &&
+                          "(Required)"} */}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};

package/SimpleStepViz.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Icon } from "@blueprintjs/core";
+import classNames from "classnames";
+
+export default ({ steps, ...rest }) => (
+  <div style={{ display: "flex", justifyContent: "center" }}>
+    <ul className="bp3-breadcrumbs" {...rest}>
+      {steps.map(({ completed, active, text }, i) => (
+        <li key={i}>
+          <div
+            className={classNames("bp3-breadcrumb", {
+              "bp3-breadcrumb-current": active
+            })}
+          >
+            <Icon icon={completed ? "tick-circle" : undefined} />
+            {text}
+          </div>
+        </li>
+      ))}
+    </ul>
+  </div>
+);

package/Tag.js

@@ -0,0 +1,112 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import React from "react";
+import classNames from "classnames";
+import "./style.css";
+import { Tooltip } from "@blueprintjs/core";
+import { getTagColorStyle } from "./utils/tagUtils";
+import popoverOverflowModifiers from "./utils/popoverOverflowModifiers";
+
+function Tag({
+  name,
+  color,
+  tooltip,
+  selected,
+  secondarySelected,
+  hasSelection,
+  onDelete,
+  onClick,
+  clickable,
+  doNotFillWidth,
+  style = {}
+}) {
+  const sharedStyles = {
+    ...getTagColorStyle(color).style,
+    padding: "2px 5px"
+  };
+  const deleteButton = onDelete && (
+    <span
+      style={{
+        ...sharedStyles,
+        cursor: "pointer",
+        borderTopRightRadius: 3,
+        borderBottomRightRadius: 3
+      }}
+      className="delete-tag-button"
+      onClick={onDelete}
+    >
+      &#10005;
+    </span>
+  );
+
+  let nameToUse = name;
+  const nameTooLong = name.length > 40;
+  if (nameTooLong) {
+    nameToUse = name.slice(0, 40) + "...";
+  }
+  if (tooltip || nameTooLong) {
+    const content = (
+      <div>
+        {nameTooLong ? (
+          <div>
+            {name}
+            {tooltip ? ":" : null}
+          </div>
+        ) : null}
+        {tooltip ? <div>{tooltip}</div> : null}
+      </div>
+    );
+    nameToUse = (
+      <Tooltip content={content} modifiers={popoverOverflowModifiers}>
+        {nameToUse}
+      </Tooltip>
+    );
+  }
+
+  const tag = (
+    <React.Fragment>
+      <span
+        onClick={onClick}
+        className="tg-tag"
+        style={{
+          ...sharedStyles,
+          // will stop tags from growing tall
+          marginBottom: "auto",
+          borderRadius: 3,
+          whiteSpace: "nowrap",
+          wordBreak: "normal",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+
+          ...(onClick && { cursor: "pointer" }),
+          ...(onDelete && {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0
+          }),
+          ...(doNotFillWidth && { width: "fit-content" }),
+          ...(clickable && { cursor: "pointer" }),
+          ...style
+        }}
+      >
+        {nameToUse}
+      </span>
+      {deleteButton}
+    </React.Fragment>
+  );
+
+  if (hasSelection) {
+    return (
+      <div
+        className={classNames("tag-selection", {
+          selected,
+          "secondary-selected": secondarySelected
+        })}
+      >
+        {tag}
+      </div>
+    );
+  } else {
+    return tag;
+  }
+}
+
+export default Tag;