npm - @teselagen/ui - Versions diffs - 0.0.11 → 0.0.13 - Mend

@teselagen/ui 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/README.md +7 -0
package/cypress.config.ts +6 -0
package/index.html +12 -0
package/package.json +5 -11
package/project.json +74 -0
package/src/AdvancedOptions.js +33 -0
package/src/AdvancedOptions.spec.js +24 -0
package/src/AssignDefaultsModeContext.js +21 -0
package/src/AsyncValidateFieldSpinner/index.js +12 -0
package/src/BlueprintError/index.js +14 -0
package/src/BounceLoader/index.js +16 -0
package/src/BounceLoader/style.css +45 -0
package/src/CollapsibleCard/index.js +92 -0
package/src/CollapsibleCard/style.css +21 -0
package/src/DNALoader/index.js +20 -0
package/src/DNALoader/style.css +251 -0
package/src/DataTable/CellDragHandle.js +130 -0
package/src/DataTable/DisabledLoadingComponent.js +15 -0
package/src/DataTable/DisplayOptions.js +218 -0
package/src/DataTable/FilterAndSortMenu.js +397 -0
package/src/DataTable/PagingTool.js +232 -0
package/src/DataTable/SearchBar.js +57 -0
package/src/DataTable/SortableColumns.js +53 -0
package/src/DataTable/TableFormTrackerContext.js +10 -0
package/src/DataTable/dataTableEnhancer.js +291 -0
package/src/DataTable/defaultFormatters.js +32 -0
package/src/DataTable/defaultProps.js +45 -0
package/src/DataTable/defaultValidators.js +40 -0
package/src/DataTable/editCellHelper.js +44 -0
package/src/DataTable/getCellVal.js +20 -0
package/src/DataTable/getVals.js +8 -0
package/src/DataTable/index.js +3537 -0
package/src/DataTable/isTruthy.js +12 -0
package/src/DataTable/isValueEmpty.js +3 -0
package/src/DataTable/style.css +600 -0
package/src/DataTable/utils/computePresets.js +42 -0
package/src/DataTable/utils/convertSchema.js +69 -0
package/src/DataTable/utils/getIdOrCodeOrIndex.js +9 -0
package/src/DataTable/utils/getTableConfigFromStorage.js +5 -0
package/src/DataTable/utils/queryParams.js +1032 -0
package/src/DataTable/utils/rowClick.js +156 -0
package/src/DataTable/utils/selection.js +8 -0
package/src/DataTable/utils/withSelectedEntities.js +65 -0
package/src/DataTable/utils/withTableParams.js +328 -0
package/src/DataTable/validateTableWideErrors.js +135 -0
package/src/DataTable/viewColumn.js +37 -0
package/src/DialogFooter/index.js +79 -0
package/src/DialogFooter/style.css +9 -0
package/src/DropdownButton.js +36 -0
package/src/FillWindow.css +6 -0
package/src/FillWindow.js +69 -0
package/src/FormComponents/Uploader.js +1197 -0
package/src/FormComponents/getNewName.js +31 -0
package/src/FormComponents/index.js +1384 -0
package/src/FormComponents/itemUpload.js +84 -0
package/src/FormComponents/sortify.js +73 -0
package/src/FormComponents/style.css +247 -0
package/src/FormComponents/tryToMatchSchemas.js +222 -0
package/src/FormComponents/utils.js +6 -0
package/src/HotkeysDialog/index.js +79 -0
package/src/HotkeysDialog/style.css +54 -0
package/src/InfoHelper/index.js +83 -0
package/src/InfoHelper/style.css +7 -0
package/src/IntentText/index.js +18 -0
package/src/Loading/index.js +74 -0
package/src/Loading/style.css +4 -0
package/src/MatchHeaders.js +223 -0
package/src/MenuBar/index.js +416 -0
package/src/MenuBar/style.css +45 -0
package/src/PromptUnsavedChanges/index.js +40 -0
package/src/ResizableDraggableDialog/index.js +138 -0
package/src/ResizableDraggableDialog/style.css +42 -0
package/src/ScrollToTop/index.js +72 -0
package/src/SimpleStepViz.js +26 -0
package/src/TgSelect/index.js +465 -0
package/src/TgSelect/style.css +34 -0
package/src/TgSuggest/index.js +121 -0
package/src/Timeline/TimelineEvent.js +31 -0
package/src/Timeline/index.js +22 -0
package/src/Timeline/style.css +29 -0
package/src/UploadCsvWizard.css +4 -0
package/src/UploadCsvWizard.js +731 -0
package/src/autoTooltip.js +89 -0
package/src/constants.js +1 -0
package/src/customIcons.js +361 -0
package/src/enhancers/withDialog/index.js +196 -0
package/src/enhancers/withDialog/tg_modalState.js +46 -0
package/src/enhancers/withField.js +20 -0
package/src/enhancers/withFields.js +11 -0
package/src/enhancers/withLocalStorage.js +11 -0
package/src/index.js +76 -0
package/src/rerenderOnWindowResize.js +27 -0
package/src/showAppSpinner.js +12 -0
package/src/showConfirmationDialog/index.js +116 -0
package/src/showDialogOnDocBody.js +37 -0
package/src/style.css +214 -0
package/src/toastr.js +92 -0
package/src/typeToCommonType.js +6 -0
package/src/useDialog.js +64 -0
package/src/utils/S3Download.js +14 -0
package/src/utils/adHoc.js +10 -0
package/src/utils/basicHandleActionsWithFullState.js +14 -0
package/src/utils/combineReducersWithFullState.js +14 -0
package/src/utils/commandControls.js +83 -0
package/src/utils/commandUtils.js +112 -0
package/src/utils/determineBlackOrWhiteTextColor.js +4 -0
package/src/utils/getDayjsFormatter.js +35 -0
package/src/utils/getTextFromEl.js +28 -0
package/src/utils/handlerHelpers.js +30 -0
package/src/utils/hotkeyUtils.js +129 -0
package/src/utils/menuUtils.js +402 -0
package/src/utils/popoverOverflowModifiers.js +11 -0
package/src/utils/pureNoFunc.js +31 -0
package/src/utils/renderOnDoc.js +29 -0
package/src/utils/showProgressToast.js +22 -0
package/src/utils/tagUtils.js +45 -0
package/src/utils/tgFormValues.js +32 -0
package/src/utils/withSelectTableRecords.js +38 -0
package/src/utils/withStore.js +10 -0
package/src/wrapDialog.js +112 -0
package/tsconfig.json +4 -0
package/vite.config.ts +7 -0
package/index.mjs +0 -109378
package/index.umd.js +0 -109381
package/style.css +0 -10421

package/README.md ADDED Viewed

@@ -0,0 +1,7 @@
+# ui
+This library was generated with [Nx](https://nx.dev).
+## Running unit tests
+Run `nx test ui` to execute the unit tests via [Vitest](https://vitest.dev/).

package/cypress.config.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import cypress from "../../cypress.config";
+export default cypress({
+  name: "ui",
+  projectId: "gwixeq"
+});

package/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ui demo</title>
+    <script src="./demo/index.js" type="module"></script>
+  </head>
+  <body>
+    <link rel="stylesheet" href="/style.css" />
+    <div id="app"><div id="demo"></div></div>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,13 +1,7 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.0.11",
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "type": "commonjs",
-  "exports": {
-    ".": {
-      "import": "./index.mjs",
-      "require": "./index.js"
-    }
-  }
-}
+  "version": "0.0.13",
+  "main": "./src/index.js",
+  "type": "module"
+}

package/project.json ADDED Viewed

@@ -0,0 +1,74 @@
+{
+  "name": "ui",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/ui/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/ui/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "publish": {
+      "command": "node tools/scripts/publish.mjs ui {args.ver} {args.tag}",
+      "dependsOn": ["test", "build"]
+    },
+    "build": {
+      "command": "cd packages/ui && vite build --mode={args.mode}",
+      "configurations": {
+        "demo": {
+          "args": "--mode=demo"
+        }
+      }
+    },
+    "pushToGhPages": {
+      //tnw: waiting for https://github.com/nrwl/nx/issues/15064 to be able to work with "build:demo"
+      "dependsOn": ["build:demo"],
+      "command": "yarn gh-pages -a -d demo-dist"
+    },
+    "start": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["cd packages/ui && yarn vite"]
+      },
+      "configurations": {
+        "ci": {
+          "readyWhen": "ready in"
+        }
+      }
+    },
+    "launch-e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "watch": true,
+        "headed": true,
+        "browser": "chrome",
+        "cypressConfig": "packages/ui/cypress.config.ts",
+        "devServerTarget": "ui:start:ci",
+        "testingType": "e2e"
+      }
+    },
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "parallel": true,
+        "key": "1ced39be-1a3a-4fd8-b2d5-a88951d9b766",
+        "record": true,
+        "cypressConfig": "packages/ui/cypress.config.ts",
+        "devServerTarget": "ui:start:ci",
+        "testingType": "e2e"
+      },
+      "configurations": {
+        "dev": {
+          "parallel": false
+        }
+      }
+    },
+    "test": {
+      "command": "cd packages/ui && yarn vitest run --changed --config vite.config.ts"
+    }
+  }
+}

package/src/AdvancedOptions.js ADDED Viewed

@@ -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/src/AdvancedOptions.spec.js ADDED Viewed

@@ -0,0 +1,24 @@
+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 ADDED Viewed

@@ -0,0 +1,21 @@
+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,
+  workflowTaskCode: undefined
+};
+export const WorkflowDefaultParamsContext = React.createContext(
+  workflowDefaultParamsObj
+);

package/src/AsyncValidateFieldSpinner/index.js ADDED Viewed

@@ -0,0 +1,12 @@
+/* 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 ADDED Viewed

@@ -0,0 +1,14 @@
+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 ADDED Viewed

@@ -0,0 +1,16 @@
+/* taken from http://tobiasahlin.com/spinkit/ */
+import React from "react";
+import classNames from "classnames";
+import "./style.css";
+export default 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 ADDED Viewed

@@ -0,0 +1,45 @@
+.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 ADDED Viewed

@@ -0,0 +1,92 @@
+import React, { Component } from "react";
+import { Button, Classes, Icon } from "@blueprintjs/core";
+import classNames from "classnames";
+import "./style.css";
+export default class CollapsibleCard extends Component {
+  state = {
+    open: true
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: !props.initialClosed
+    };
+  }
+  renderOpenCard() {
+    return this.props.children;
+  }
+  toggleCardInfo = () => {
+    if (this.props.toggle) this.props.toggle();
+    else {
+      this.setState({
+        open: !this.state.open
+      });
+    }
+  };
+  getIsOpen = () => {
+    if (this.props.isOpen !== undefined) {
+      return this.props.isOpen;
+    } else {
+      return this.state.open;
+    }
+  };
+  render() {
+    const open = this.getIsOpen();
+    const {
+      title,
+      icon,
+      openTitleElements,
+      noCard = false,
+      className,
+      style
+    } = this.props;
+    // blueprintjs card will match our table color. which looks really bad when a table is in a card.
+    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={this.toggleCardInfo}
+            />
+          </div>
+        </div>
+        {open && this.renderOpenCard()}
+      </div>
+    );
+  }
+}

package/src/CollapsibleCard/style.css ADDED Viewed

@@ -0,0 +1,21 @@
+/* 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 ADDED Viewed

@@ -0,0 +1,20 @@
+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 ADDED Viewed

@@ -0,0 +1,251 @@
+.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;
+  }
+}