@teselagen/ui 0.7.33-beta.2 → 0.7.33-beta.4

package/src/style.css

@@ -1,29 +1,265 @@
-/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
-.tg-timeline {
+:root {
+  --base1: #ffffff;
+  --base2: #cdcdcd;
+}
+
+body.bp3-dark {
+  --base1: #393a3a;
+  --base2: #293742;
+}
+
+.bp3-dark .tg-card {
+  background: #394b59 !important;
+}
+
+.preserve-newline {
+  white-space: pre-line;
+}
+
+.bp3-dialog {
+  max-width: 100vw;
+}
+
+/* adding back in blueprint v2 default styling to all <h/> elements */
+h1 {
+  line-height: 40px;
+  font-size: 36px;
+}
+
+h2 {
+  line-height: 32px;
+  font-size: 28px;
+}
+
+h3 {
+  line-height: 25px;
+  font-size: 22px;
+}
+
+h4 {
+  line-height: 21px;
+  font-size: 18px;
+}
+
+h5 {
+  line-height: 19px;
+  font-size: 16px;
+}
+
+h6 {
+  line-height: 16px;
+  font-size: 14px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+h1.bp3-heading,
+h2.bp3-heading,
+h3.bp3-heading,
+h4.bp3-heading,
+h5.bp3-heading,
+h6.bp3-heading {
+  color: #182026;
+  font-weight: 300;
+  margin: 0 0 10px;
+  padding: 0;
+  line-height: normal;
+}
+
+.bp3-dark h1,
+.bp3-dark h2,
+.bp3-dark h3,
+.bp3-dark h4,
+.bp3-dark h5,
+.bp3-dark h6 {
+  color: #f5f8fa;
+}
+.bp3-dark textarea {
+  background: #293742;
+  color: #f5f8fa;
+}
+
+/* bp3 fix https://github.com/palantir/blueprint/issues/2807 */
+.bp3-popover-wrapper {
+  display: inline-block;
   position: relative;
-  white-space: nowrap;
+  vertical-align: top;
+}
+/* this line is necessary otherwise the line above setting "position: relative;" caused nested long bp3 submenus to not appear correctly when using the fix below */
+.bp3-submenu .bp3-popover-wrapper {
+  position: unset;
+}
+/* this fixes https://github.com/palantir/blueprint/issues/4791 but requires the "position: unset;" fix above */
+.bp3-submenu > * > .bp3-menu {
+  max-height: 96vh;
+  overflow: auto;
+}
+
+/* bp3 fix https://github.com/palantir/blueprint/issues/2807 */
+span.bp3-popover-target {
+  display: block;
+}
+
+.bp3-portal {
+  z-index: 100000;
+}
+.bp3-switch {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+}
+
+.Select {
+  min-width: 170px;
+}
+
+/* override the default blueprint input focus to instead rely on an inset box shadow. This resolves any issues with overflow:hidden cutting off input box shadows */
+.bp3-dark .bp3-input:focus,
+.bp3-input:focus {
+  box-shadow: inset 0 0 3px 1px #137cbd;
+}
+
+.notClickable {
+  cursor: default !important;
+}
+.bp3-toast-container {
+  z-index: 100001;
 }
 
-.tg-timeline-line {
+.link-button {
+  background: none !important;
+  border: none;
+  padding: 0 !important;
+  font-family: arial, sans-serif;
+  color: rgb(0, 151, 227);
+  /* text-decoration: underline; */
+  cursor: pointer;
+}
+.link-button:hover {
+  color: rgb(98, 198, 248);
+  text-decoration: underline;
+}
+
+.above-dialog {
+  z-index: 100001;
+}
+
+code {
+  display: block;
+  white-space: pre-wrap;
+}
+
+.bp3-toast.no-close-button [aria-label="Close"] {
+  display: none;
+}
+
+.isDataTitle .tippy-box[data-theme~="teselagen"] .tippy-arrow {
+  opacity: 0 !important;
+}
+.isDataTitle .tippy-box[data-theme~="teselagen"] {
+  background-color: #4f4a50f4 !important;
+  border-radius: 0 !important;
+  color: #f3f3f3 !important;
+  font-size: 11px !important;
+  white-space: pre-wrap;
+  padding: 0px 0px !important;
+}
+
+[data-tippy-root]:has(.tippy-box[data-theme~="teselagen"]) {
+  z-index: 100000 !important;
+}
+
+[data-tippy-root] .tippy-box[data-theme~="teselagen"] {
+  background-color: #394b59;
+  color: #f5f8fa;
+  padding: 4px 4px;
+  word-break: break-word;
+}
+[data-tippy-root] .tippy-box[data-theme~="teselagen"] .tippy-arrow {
+  color: #394b59;
+}
+.bp3-dark [data-tippy-root] .tippy-box[data-theme~="teselagen"] {
+  background-color: #e1e8ed;
+  color: #394b59;
+}
+.bp3-dark [data-tippy-root] .tippy-box[data-theme~="teselagen"] .tippy-arrow {
+  /* background-color: #e1e8ed; */
+  color: #e1e8ed;
+}
+.isCellEditable .rt-td {
+  position: relative;
+}
+
+.ReactTable .tg-cell-edit-boolean-checkbox {
+  margin-bottom: 0;
+}
+
+.cellDragHandle {
+  height: 8px;
+  width: 8px;
+  cursor: crosshair;
+  border: 1px solid rgb(255, 255, 255);
+  background-color: rgb(76, 107, 171);
   position: absolute;
-  height: 90%;
-  border-left: 2px solid #bfccd6;
-  top: 3px;
-  left: 5px;
-}
-
-.tg-timeline-event {
-  margin-bottom: 15px;
-}
-
-.tg-timeline-circle {
-  width: 12px;
-  min-width: 12px;
-  height: 12px;
-  min-height: 12px;
-  z-index: 1;
-  margin-right: 10px;
-  border-radius: 100px;
-  background: #e1e8ed;
-  border: 2px solid #137cbd;
+  bottom: -4px;
+  right: -4px;
+}
+
+/* make AnchorButton match Button */
+.bp3-button {
+  font-family: Arial;
+}
+
+button {
+  transition: all 0.2s ease-in-out;
+}
+
+button:not(:disabled):active {
+  transform: translateY(1px);
+}
+.bp3-tabs.bp3-vertical > .bp3-tab-panel {
+  min-width: 0px;
+}
+.bp3-toast[class*="bp3-intent-"] .bp3-button.tg-clear-all-toasts {
+  border: 1px solid white !important;
+}
+.bp3-toast[class*="bp3-intent-"] .bp3-button.tg-clear-all-toasts:hover {
+  /* background: blue !important; */
+  /* background: unset !important; */
+  background-color: #137cbd !important;
+}
+
+/* .bp3-toast .tg-clear-all-toasts {
+  background: unset !important;
+  color: unset !important;
+  padding: unset !important;
+  margin: unset !important;
+  font-size: unset !important;
+  line-height: unset !important;
+  border: unset !important;
+  box-shadow: unset !important;
+  text-align: unset !important;
+  cursor: pointer !important;
+} */
+
+.bp3-dialog-header .bp3-heading {
+  width: 10px; /* tnw: this is a hack to prevent the dialog title from causing the dialog width to expand larger than the dialog content*/
+}
+
+/* to fix tooltip styling issue - https://github.com/palantir/blueprint/issues/3430 */
+.bp3-popover[style*="transform-origin"][style*="bottom"] .bp3-popover-arrow {
+  transform: translate(0, -0.5px);
+}
+.bp3-popover[style*="transform-origin"][style*="left"] .bp3-popover-arrow {
+  transform: translate(0.5px, 0);
+}
+.bp3-popover[style*="transform-origin"][style*="top"] .bp3-popover-arrow {
+  transform: translate(0, 0.5px);
+}
+.bp3-popover[style*="transform-origin"][style*="right"] .bp3-popover-arrow {
+  transform: translate(-0.5px, 0);
 }

package/AdvancedOptions.js

@@ -1,33 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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/DropdownButton.js

@@ -1,36 +0,0 @@
-/* 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

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

package/FillWindow.js

@@ -1,69 +0,0 @@
-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/MatchHeaders.js

@@ -1,234 +0,0 @@
-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>
-  );
-};