@teselagen/ui 0.7.34 → 0.7.36

package/isBeingCalledExcessively.js

@@ -1,4 +1,5 @@
 const keyCount = {};
+
 // if this function is hit more than 20 times in a row in 2 seconds with the same uniqName then throw an error
 export const isBeingCalledExcessively = ({ uniqName }) => {
   if (process.env.NODE_ENV !== "development") {
@@ -29,3 +30,4 @@ export const isBeingCalledExcessively = ({ uniqName }) => {
     throw new Error(`isBeingCalledExcessively: ${uniqName}`);
   }
 };
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.7.34",
+  "version": "0.7.36",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/style.css

@@ -1,13 +1,29 @@
-.tag-select-popover {
-  padding: 10px;
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+.tg-timeline {
+  position: relative;
+  white-space: nowrap;
 }
 
-.tag-select-popover-inner {
-  max-height: 150px;
-  overflow: auto;
-  display: grid;
-  padding-top: 10px;
-  grid-column-gap: 5px;
-  row-gap: 8px;
-  grid-template-columns: max-content max-content;
+.tg-timeline-line {
+  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;
 }

package/DataTable/utils/filterLocalEntitiesToHasura.d.ts

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

package/DataTable/utils/initializeHasuraWhereAndFilter.d.ts

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

package/DataTable/utils/tableQueryParamsToHasuraClauses.d.ts

@@ -1,26 +0,0 @@
-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;
-};
-/**
- * Takes a schema and returns an object with the fields mapped by their camelCased display name.
- * If the displayName is not set or is a jsx element, the path is used instead.
- * The same conversion must be done when using the result of this method
- */
-export function getFieldsMappedByCCDisplayName(schema: any): any;
-/**
- *
- * @param {object} field
- * @returns the camelCase display name of the field, to be used for filters, sorting, etc
- */
-export function getCCDisplayName(field: object): string;

package/src/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/src/AdvancedOptions.spec.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import AdvancedOptions from "./AdvancedOptions";
-
-describe("AdvancedOptions", () => {
-  test("renders correctly with given props and default state", () => {
-    const { queryByText, container } = render(
-      <AdvancedOptions label="Test Label" content="Test Content" />
-    );
-    expect(queryByText("Test Label")).toBeInTheDocument();
-    expect(queryByText("Test Content")).not.toBeInTheDocument();
-
-    expect(
-      container.querySelector(".bp3-icon-caret-right")
-    ).toBeInTheDocument();
-  });
-
-  test("toggles content when clicked", () => {
-    const { getByText, queryByText, container } = render(
-      <AdvancedOptions label="Test Label" content="Test Content" />
-    );
-    fireEvent.click(getByText("Test Label"));
-    expect(queryByText("Test Content")).toBeInTheDocument();
-    expect(container.querySelector(".bp3-icon-caret-down")).toBeInTheDocument();
-  });
-});

package/src/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/src/AsyncValidateFieldSpinner/index.js

@@ -1,12 +0,0 @@
-/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
-
-import React from "react";
-import { Spinner } from "@blueprintjs/core";
-
-export default function AsyncValidateFieldSpinner({ validating }) {
-  if (validating) {
-    return <Spinner size="18" />;
-  } else {
-    return null;
-  }
-}

package/src/BlueprintError/index.js

@@ -1,14 +0,0 @@
-import React from "react";
-import { Classes } from "@blueprintjs/core";
-import classNames from "classnames";
-
-export default function BlueprintError({ error }) {
-  if (!error) return null;
-  return (
-    <div className={classNames(Classes.FORM_GROUP, Classes.INTENT_DANGER)}>
-      <div className={classNames(Classes.FORM_HELPER_TEXT, "preserve-newline")}>
-        {error}
-      </div>
-    </div>
-  );
-}

package/src/BounceLoader/index.js

@@ -1,16 +0,0 @@
-/* taken from http://tobiasahlin.com/spinkit/ */
-import React from "react";
-import classNames from "classnames";
-import "./style.css";
-
-export function BounceLoader({ style, className }) {
-  return (
-    <div className={classNames("tg-bounce-loader", className)} style={style}>
-      <div className="rect1" />
-      <div className="rect2" />
-      <div className="rect3" />
-      <div className="rect4" />
-      <div className="rect5" />
-    </div>
-  );
-}

package/src/BounceLoader/style.css

@@ -1,45 +0,0 @@
-.tg-bounce-loader {
-  width: 50px;
-  height: 40px;
-  text-align: center;
-  font-size: 10px;
-  display: flex;
-  align-items: center;
-}
-
-.tg-bounce-loader > div {
-  background-color: #006cab;
-  height: 100%;
-  max-height: 30px;
-  width: 6px;
-  display: inline-block;
-  margin-right: 3px;
-  animation: sk-stretchdelay 1.2s infinite ease-in-out;
-}
-
-.tg-bounce-loader .rect2 {
-  animation-delay: -1.1s;
-}
-
-.tg-bounce-loader .rect3 {
-  animation-delay: -1s;
-}
-
-.tg-bounce-loader .rect4 {
-  animation-delay: -0.9s;
-}
-
-.tg-bounce-loader .rect5 {
-  animation-delay: -0.8s;
-}
-
-@keyframes sk-stretchdelay {
-  0%,
-  40%,
-  100% {
-    transform: scaleY(0.4);
-  }
-  20% {
-    transform: scaleY(1);
-  }
-}

package/src/CollapsibleCard/index.js

@@ -1,68 +0,0 @@
-import React, { useState } from "react";
-import { Button, Classes, Icon } from "@blueprintjs/core";
-import classNames from "classnames";
-import "./style.css";
-
-export default function CollapsibleCard({
-  title,
-  icon,
-  openTitleElements,
-  noCard = false,
-  className,
-  style,
-  children,
-  initialClosed = false,
-  toggle,
-  isOpen
-}) {
-  let [open, setOpen] = useState(!initialClosed);
-  if (isOpen !== undefined) open = isOpen;
-
-  const toggleCardInfo = () => {
-    if (toggle) toggle();
-    else {
-      setOpen(!open);
-    }
-  };
-
-  return (
-    <div
-      className={classNames({ "tg-card": !noCard, open }, className)}
-      style={{
-        paddingTop: 10,
-        paddingBottom: 10,
-        paddingLeft: 15,
-        paddingRight: 15,
-        ...style
-      }}
-    >
-      <div className="tg-card-header" style={{ marginBottom: 8 }}>
-        <div className="tg-card-header-title">
-          {icon && <Icon icon={icon} />}
-          <h6
-            style={{
-              marginBottom: 0,
-              marginRight: 10,
-              marginLeft: 10
-            }}
-          >
-            {title}
-          </h6>
-          <div>{open && openTitleElements}</div>
-        </div>
-        <div>
-          <Button
-            icon={open ? "minimize" : "maximize"}
-            className={classNames(
-              Classes.MINIMAL,
-              "info-btn",
-              "tg-collapse-toggle"
-            )}
-            onClick={toggleCardInfo}
-          />
-        </div>
-      </div>
-      {open && children}
-    </div>
-  );
-}

package/src/CollapsibleCard/style.css

@@ -1,23 +0,0 @@
-/* Use in the place of .bp3-card */
-.tg-card {
-  padding: 20px;
-  margin-bottom: 20px;
-  border-radius: 5px;
-  background: white;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 1px 2px rgba(0, 0, 0, 0.18);
-}
-
-.tg-card-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.tg-card-header-title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}

package/src/DNALoader/index.js

@@ -1,20 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import "./style.css";
-
-export default function DNALoader({ style, className }) {
-  return (
-    <div className={classNames("dna-loader", className)} style={style}>
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-    </div>
-  );
-}

package/src/DNALoader/style.css

@@ -1,251 +0,0 @@
-.dna-loader {
-  display: inline-block;
-  position: relative;
-  transform: scale(0.45);
-}
-
-.nucleobase {
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-}
-
-.nucleobase:not(:last-child) {
-  margin-right: 4.86vh;
-}
-
-.nucleobase:before,
-.nucleobase:after {
-  content: "";
-  display: inline-block;
-  width: 3vh;
-  height: 3vh;
-  border-radius: 50%;
-  position: absolute;
-}
-
-.nucleobase:nth-child(10) {
-  animation-delay: -1.869s;
-}
-
-.nucleobase:nth-child(10):before {
-  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -1.869s;
-  background-color: #339bb9;
-}
-
-.nucleobase:nth-child(10):after {
-  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -1.869s;
-  background-color: #006cab;
-}
-
-.nucleobase:nth-child(9) {
-  animation-delay: -3.738s;
-}
-
-.nucleobase:nth-child(9):before {
-  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -3.738s;
-  background-color: #339bb9;
-}
-
-.nucleobase:nth-child(9):after {
-  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -3.738s;
-  background-color: #006cab;
-}
-
-.nucleobase:nth-child(8) {
-  animation-delay: -5.607s;
-}
-
-.nucleobase:nth-child(8):before {
-  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -5.607s;
-  background-color: #339bb9;
-}
-
-.nucleobase:nth-child(8):after {
-  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -5.607s;
-  background-color: #006cab;
-}
-
-.nucleobase:nth-child(7) {
-  animation-delay: -7.476s;
-}
-
-.nucleobase:nth-child(7):before {
-  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -7.476s;
-  background-color: #339bb9;
-}
-
-.nucleobase:nth-child(7):after {
-  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -7.476s;
-  background-color: #006cab;
-}
-
-.nucleobase:nth-child(6) {
-  animation-delay: -9.345s;
-}
-
-.nucleobase:nth-child(6):before {
-  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -9.345s;
-  background-color: #339bb9;
-}
-
-.nucleobase:nth-child(6):after {
-  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -9.345s;
-  background-color: #006cab;
-}
-
-.nucleobase:nth-child(5) {
-  animation-delay: -11.214s;
-}
-
-.nucleobase:nth-child(5):before {
-  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -11.214s;
-  background-color: #339bb9;
-}
-
-.nucleobase:nth-child(5):after {
-  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -11.214s;
-  background-color: #006cab;
-}
-
-.nucleobase:nth-child(4) {
-  animation-delay: -13.083s;
-}
-
-.nucleobase:nth-child(4):before {
-  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -13.083s;
-  background-color: #339bb9;
-}
-
-.nucleobase:nth-child(4):after {
-  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -13.083s;
-  background-color: #006cab;
-}
-
-.nucleobase:nth-child(3) {
-  animation-delay: -14.952s;
-}
-
-.nucleobase:nth-child(3):before {
-  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -14.952s;
-  background-color: #339bb9;
-}
-
-.nucleobase:nth-child(3):after {
-  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -14.952s;
-  background-color: #006cab;
-}
-
-.nucleobase:nth-child(2) {
-  animation-delay: -16.821s;
-}
-
-.nucleobase:nth-child(2):before {
-  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -16.821s;
-  background-color: #339bb9;
-}
-
-.nucleobase:nth-child(2):after {
-  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -16.821s;
-  background-color: #006cab;
-}
-
-.nucleobase:nth-child(1) {
-  animation-delay: -18.69s;
-}
-
-.nucleobase:nth-child(1):before {
-  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -18.69s;
-  background-color: #339bb9;
-}
-
-.nucleobase:nth-child(1):after {
-  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  animation-delay: -18.69s;
-  background-color: #006cab;
-}
-
-@keyframes animBefore {
-  0% {
-    top: -6vh;
-    z-index: 1;
-  }
-  25% {
-    transform: scale(1.2);
-    z-index: 1;
-  }
-  50% {
-    top: 6vh;
-    z-index: -1;
-  }
-  75% {
-    background-color: #5bc0de;
-    transform: scale(0.8);
-    z-index: -1;
-  }
-  100% {
-    top: -6vh;
-    z-index: -1;
-  }
-}
-
-@keyframes animAfter {
-  0% {
-    top: 6vh;
-    z-index: -1;
-  }
-  25% {
-    background-color: #055e75;
-    transform: scale(0.8);
-    z-index: -1;
-  }
-  50% {
-    top: -6vh;
-    z-index: 1;
-  }
-  75% {
-    transform: scale(1.2);
-    z-index: 1;
-  }
-  100% {
-    top: 6vh;
-    z-index: 1;
-  }
-}
-
-@keyframes animDotBar {
-  0% {
-    height: 8.25vh;
-  }
-  25% {
-    height: 0;
-  }
-  50% {
-    height: 8.25vh;
-  }
-  75% {
-    height: 0;
-  }
-  100% {
-    height: 8.25vh;
-  }
-}