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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.7.33-beta.2",
+  "version": "0.7.33-beta.3",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/src/style.css

@@ -1,29 +1,13 @@
-/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
-.tg-timeline {
-  position: relative;
-  white-space: nowrap;
+.tag-select-popover {
+  padding: 10px;
 }
 
-.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;
+.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;
 }

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/CellDragHandle.js

@@ -1,132 +0,0 @@
-import { flatMap } from "lodash-es";
-import { forEach } from "lodash-es";
-import React, { useCallback, useRef } from "react";
-
-export const CellDragHandle = ({
-  thisTable,
-  onDragEnd,
-  cellId,
-  isSelectionARectangle
-}) => {
-  const xStart = useRef(0);
-  const timeoutkey = useRef();
-  const rowsToSelect = useRef();
-  const rectangleCellPaths = useRef();
-
-  const handleDrag = useCallback(
-    e => {
-      const table = thisTable.querySelector(".rt-table");
-      const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
-      const [rowId, path] = cellId.split(":");
-      const selectedTr = table.querySelector(
-        `.rt-tr-group.with-row-data[data-test-id="${rowId}"]`
-      );
-      if (!selectedTr) return;
-      const selectedIndex = selectedTr.dataset.index;
-
-      if (selectedTr && trs.length) {
-        const selectedY = selectedTr.getBoundingClientRect().y;
-        const cursorY = e.clientY;
-        clearTimeout(timeoutkey.current);
-        const updateScrollIfNecessary = () => {
-          const { y, height } = table.getBoundingClientRect();
-          if (cursorY < y) {
-            table.scrollBy(0, -5);
-          } else if (cursorY > y + height) {
-            table.scrollBy(0, 5);
-          }
-        };
-        updateScrollIfNecessary();
-        timeoutkey.current = setInterval(() => {
-          updateScrollIfNecessary();
-        }, 10);
-
-        const isCursorBelow = cursorY > selectedY;
-        rowsToSelect.current = [];
-        forEach(trs, (tr, index) => {
-          let isSelectedForUpdate;
-          const rowId = tr.dataset.testId;
-          const changeDashedBorder = (path, on) => {
-            tr.querySelector(
-              `[data-test="tgCell_${path}"]`
-            ).parentNode.classList[on ? "add" : "remove"]("selectedForUpdate");
-          };
-          if (isCursorBelow ? index > selectedIndex : index < selectedIndex) {
-            const { y, height } = tr.getBoundingClientRect();
-            if (isCursorBelow ? y < cursorY : y + height > cursorY) {
-              rowsToSelect.current.push(rowId);
-              isSelectedForUpdate = true;
-              //add dashed borders
-
-              if (rectangleCellPaths.current) {
-                rectangleCellPaths.current.forEach(path => {
-                  changeDashedBorder(path, true);
-                });
-              } else {
-                changeDashedBorder(path, true);
-              }
-            }
-          }
-          if (!isSelectedForUpdate) {
-            if (rectangleCellPaths.current) {
-              rectangleCellPaths.current.forEach(path => {
-                changeDashedBorder(path, false);
-              });
-            } else {
-              changeDashedBorder(path, false);
-            }
-          }
-        });
-      }
-    },
-    [cellId, thisTable]
-  );
-
-  const onMouseUp = useCallback(() => {
-    clearTimeout(timeoutkey.current);
-    const table = thisTable;
-    const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
-    const [, path] = cellId.split(":");
-    //remove the dashed borders
-    forEach(trs, tr => {
-      if (rectangleCellPaths.current) {
-        rectangleCellPaths.current.forEach(path => {
-          const el = tr.querySelector(`[data-test="tgCell_${path}"]`);
-          el.parentNode.classList.remove("selectedForUpdate");
-        });
-      } else {
-        const el = tr.querySelector(`[data-test="tgCell_${path}"]`);
-        el.parentNode.classList.remove("selectedForUpdate");
-      }
-    });
-    document.removeEventListener("mousemove", handleDrag, false);
-    document.removeEventListener("mouseup", onMouseUp, false);
-    onDragEnd(
-      flatMap(rowsToSelect.current, id => {
-        if (rectangleCellPaths.current) {
-          return rectangleCellPaths.current.map(path => {
-            return `${id}:${path}`;
-          });
-        } else {
-          return `${id}:${path}`;
-        }
-      })
-    );
-  }, [cellId, handleDrag, onDragEnd, thisTable]);
-
-  return (
-    <div
-      onMouseDown={e => {
-        rowsToSelect.current = [];
-        xStart.current = e.clientX;
-        const { isRect, selectedPaths } = isSelectionARectangle();
-        if (isRect) {
-          rectangleCellPaths.current = selectedPaths;
-        }
-        document.addEventListener("mousemove", handleDrag, false);
-        document.addEventListener("mouseup", onMouseUp, false);
-      }}
-      className="cellDragHandle"
-    />
-  );
-};

package/ColumnFilterMenu.js

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import classNames from "classnames";
-import { Icon, Popover } from "@blueprintjs/core";
-
-export const ColumnFilterMenu = ({
-  addFilters,
-  compact,
-  currentFilter,
-  currentParams,
-  dataType,
-  extraCompact,
-  filterActiveForColumn,
-  FilterMenu,
-  filterOn,
-  removeSingleFilter,
-  schemaForField,
-  setNewParams,
-  formName
-}) => {
-  const [columnFilterMenuOpen, setColumnFilterMenuOpen] = useState(false);
-  return (
-    <Popover
-      position="bottom"
-      onClose={() => setColumnFilterMenuOpen(false)}
-      isOpen={columnFilterMenuOpen}
-      modifiers={{
-        preventOverflow: { enabled: true },
-        hide: { enabled: false },
-        flip: { enabled: false }
-      }}
-      content={
-        <FilterMenu
-          formName={formName}
-          addFilters={addFilters}
-          compact={compact}
-          currentFilter={currentFilter}
-          currentParams={currentParams}
-          dataType={dataType}
-          filterOn={filterOn}
-          removeSingleFilter={removeSingleFilter}
-          schemaForField={schemaForField}
-          setNewParams={setNewParams}
-          togglePopover={() => setColumnFilterMenuOpen(false)}
-        />
-      }
-    >
-      <Icon
-        style={{ marginLeft: 5 }}
-        icon="filter"
-        size={extraCompact ? 14 : undefined}
-        onClick={e => {
-          e.preventDefault();
-          e.stopPropagation();
-          setColumnFilterMenuOpen(prev => !prev);
-        }}
-        className={classNames("tg-filter-menu-button", {
-          "tg-active-filter": !!filterActiveForColumn
-        })}
-      />
-    </Popover>
-  );
-};