@deephaven/console 0.43.0 → 0.44.0

package/dist/csv/CsvInputBar.js

@@ -0,0 +1,342 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import { Button, Checkbox } from '@deephaven/components';
+import Log from '@deephaven/log';
+import { DbNameValidator } from '@deephaven/utils';
+import CsvOverlay from "./CsvOverlay.js";
+import CsvParser from "./CsvParser.js";
+import CsvFormats from "./CsvFormats.js";
+import "./CsvInputBar.css";
+var log = Log.module('CsvInputBar');
+var TYPE_OPTIONS = Object.entries(CsvFormats.TYPES).map(_ref => {
+  var [key, value] = _ref;
+  return /*#__PURE__*/React.createElement("option", {
+    key: key,
+    value: key
+  }, value.name);
+});
+/**
+ * Input controls for CSV upload.
+ */
+class CsvInputBar extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "inputRef", void 0);
+    this.handleUpload = this.handleUpload.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handleError = this.handleError.bind(this);
+    this.handleTableName = this.handleTableName.bind(this);
+    this.toggleFirstRowHeaders = this.toggleFirstRowHeaders.bind(this);
+    this.handleProgress = this.handleProgress.bind(this);
+    this.handleCancelInProgress = this.handleCancelInProgress.bind(this);
+    this.handleQueryTypeChange = this.handleQueryTypeChange.bind(this);
+    this.inputRef = /*#__PURE__*/React.createRef();
+    this.state = {
+      tableName: '',
+      tableNameSet: false,
+      isFirstRowHeaders: true,
+      showProgress: false,
+      progressValue: 0,
+      type: CsvFormats.DEFAULT_TYPE,
+      parser: null
+    };
+  }
+
+  // React documentation says it is fine to update state inside an if statment
+  /* eslint-disable react/no-did-update-set-state */
+  componentDidUpdate(prevProps) {
+    var {
+      file,
+      paste
+    } = this.props;
+    var {
+      tableName,
+      tableNameSet
+    } = this.state;
+    // Set the table name from a file
+    if (!tableNameSet && file != null && !tableName) {
+      var _this$inputRef$curren;
+      var dotIndex = file.name.lastIndexOf('.');
+      var fileTableName = DbNameValidator.legalizeTableName(file.name.substring(0, dotIndex));
+      this.setState({
+        tableName: fileTableName,
+        tableNameSet: true
+      });
+      (_this$inputRef$curren = this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
+    } else if (file == null && prevProps.file != null || paste == null && prevProps.paste != null) {
+      // The file or paste was unstaged
+      this.setState({
+        tableName: '',
+        tableNameSet: false
+      });
+    }
+
+    // Focus the name input field on paste
+    if (paste != null && paste !== '' && !tableName && this.inputRef.current) {
+      this.inputRef.current.focus();
+    }
+
+    // Determine parser type by file extension
+    if (file != null && file !== prevProps.file) {
+      this.setState({
+        type: CsvFormats.fromExtension(file.name)
+      });
+    } else if (paste != null && paste !== '' && (prevProps.paste === undefined || prevProps.paste === '')) {
+      this.setState({
+        type: CsvFormats.AUTO
+      });
+    }
+  }
+  componentWillUnmount() {
+    var {
+      parser
+    } = this.state;
+    if (parser) {
+      parser.cancel();
+    }
+  }
+  handleCancel() {
+    var {
+      onClose
+    } = this.props;
+    onClose();
+  }
+  handleError(e) {
+    var {
+      onClose,
+      onError
+    } = this.props;
+    log.error(e);
+    onError(e);
+    onClose();
+  }
+  handleTableName(event) {
+    this.setState({
+      tableName: event.target.value,
+      tableNameSet: true
+    });
+  }
+  toggleFirstRowHeaders() {
+    var {
+      isFirstRowHeaders
+    } = this.state;
+    this.setState({
+      isFirstRowHeaders: !isFirstRowHeaders
+    });
+  }
+  handleUpload(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    var {
+      file,
+      paste
+    } = this.props;
+    if (file != null) {
+      if (file.name.endsWith('.zip')) {
+        this.handleZipFile(file);
+      } else {
+        this.handleFile(file);
+      }
+    } else if (paste !== undefined && paste !== '') {
+      this.handleFile(new Blob([paste], {
+        type: 'text/plain'
+      }));
+    }
+  }
+  handleFile(file) {
+    var isZip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    log.info("Starting CSV parser for ".concat(file instanceof File ? file.name : 'pasted values', " ").concat(isZip ? '' : file.size, " bytes"));
+    var {
+      session,
+      timeZone,
+      onInProgress
+    } = this.props;
+    var {
+      tableName,
+      isFirstRowHeaders,
+      type
+    } = this.state;
+    var handleParseDone = tables => {
+      // Do not bother merging just one table
+      if (tables.length === 1) {
+        session.bindTableToVariable(tables[0], tableName).then(() => this.openTable()).catch(e => this.handleError(e));
+      } else {
+        session.mergeTables(tables).then(table => {
+          session.bindTableToVariable(table, tableName).then(() => this.openTable()).catch(e => this.handleError(e));
+          tables.forEach(t => t.close());
+        }).catch(e => this.handleError(e));
+      }
+    };
+    var parser = new CsvParser({
+      onFileCompleted: handleParseDone,
+      session,
+      file,
+      type: CsvFormats.TYPES[type],
+      readHeaders: isFirstRowHeaders,
+      onProgress: this.handleProgress,
+      onError: this.handleError,
+      timeZone,
+      isZip
+    });
+    parser.parse();
+    this.setState({
+      showProgress: true,
+      parser
+    });
+    // Note that calling onClose will set in progress to false
+    onInProgress(true);
+  }
+  handleZipFile(zipFile) {
+    var {
+      onUpdate,
+      unzip
+    } = this.props;
+    if (unzip == null) {
+      this.handleError(new Error('No support for zip files available.'));
+      return;
+    }
+    unzip(zipFile).then(files => {
+      var csvFound = false;
+      // Find the first Csv file in the zip and use that
+      for (var i = 0; i < files.length; i += 1) {
+        var f = files[i];
+        if (CsvOverlay.isValidExtension(f.name)) {
+          onUpdate("Loading ".concat(f.name, " as csv from ").concat(zipFile.name));
+          csvFound = true;
+          this.handleFile(f, true);
+          break;
+        }
+      }
+      if (!csvFound) {
+        throw new Error("No csv file found in ".concat(zipFile.name));
+      }
+    }).catch(e => this.handleError(e));
+  }
+  handleProgress(progressValue) {
+    var {
+      showProgress
+    } = this.state;
+    if (showProgress) {
+      this.setState({
+        progressValue
+      });
+    }
+    // Indicates to the caller that the upload has been cancelled
+    return !showProgress;
+  }
+
+  // Cancels an in progress upload
+  handleCancelInProgress() {
+    var {
+      onInProgress
+    } = this.props;
+    var {
+      parser
+    } = this.state;
+    if (parser) {
+      parser.cancel();
+    }
+    this.setState({
+      showProgress: false,
+      progressValue: 0
+    });
+    onInProgress(false);
+  }
+  openTable() {
+    var {
+      onOpenTable,
+      onClose
+    } = this.props;
+    var {
+      tableName
+    } = this.state;
+    onOpenTable(tableName);
+    onClose();
+  }
+  handleQueryTypeChange(event) {
+    this.setState({
+      type: event.target.value
+    });
+  }
+  render() {
+    var {
+      file,
+      paste
+    } = this.props;
+    var {
+      tableName,
+      isFirstRowHeaders,
+      showProgress,
+      progressValue,
+      type
+    } = this.state;
+    // A blank table name is invalid for pasted values
+    var isNameInvalid = Boolean(paste) && !tableName;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "csv-input-bar"
+    }, !showProgress && /*#__PURE__*/React.createElement("form", {
+      onSubmit: this.handleUpload,
+      className: "csv-input-bar-container form-inline"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "form-group"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "tableNameInput"
+    }, "Table name"), /*#__PURE__*/React.createElement("input", {
+      ref: this.inputRef,
+      id: "tableNameInput",
+      type: "text",
+      className: classNames('form-control', {
+        'is-invalid': isNameInvalid
+      }),
+      value: tableName,
+      onChange: this.handleTableName
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "form-group"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "formatSelect"
+    }, "File format"), /*#__PURE__*/React.createElement("select", {
+      id: "formatSelect",
+      className: "custom-select",
+      value: type,
+      onChange: this.handleQueryTypeChange
+    }, TYPE_OPTIONS)), /*#__PURE__*/React.createElement(Checkbox, {
+      className: "firstRowHeaders",
+      checked: isFirstRowHeaders,
+      onChange: this.toggleFirstRowHeaders
+    }, "First row is column headers"), /*#__PURE__*/React.createElement("div", {
+      className: "csv-input-buttons form-group"
+    }, /*#__PURE__*/React.createElement(Button, {
+      kind: "secondary",
+      onClick: this.handleCancel
+    }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+      kind: "primary",
+      type: "submit",
+      disabled: !(file !== null || paste !== undefined && paste !== '') || !tableName
+    }, "Upload"))), showProgress && /*#__PURE__*/React.createElement("div", {
+      className: "csv-progress-container"
+    }, /*#__PURE__*/React.createElement("label", null, "Uploading Table"), /*#__PURE__*/React.createElement("div", {
+      className: "progress"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "progress-bar bg-primary",
+      style: {
+        width: "".concat(progressValue, "%")
+      },
+      "aria-valuenow": progressValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    })), /*#__PURE__*/React.createElement("label", null, progressValue, "%"), /*#__PURE__*/React.createElement(Button, {
+      kind: "primary",
+      onClick: this.handleCancelInProgress
+    }, "Cancel")));
+  }
+}
+_defineProperty(CsvInputBar, "defaultProps", {
+  file: null,
+  paste: null,
+  unzip: null
+});
+export default CsvInputBar;
+//# sourceMappingURL=CsvInputBar.js.map

package/dist/csv/CsvInputBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CsvInputBar.js","names":["React","Component","classNames","Button","Checkbox","Log","DbNameValidator","CsvOverlay","CsvParser","CsvFormats","log","module","TYPE_OPTIONS","Object","entries","TYPES","map","key","value","name","CsvInputBar","constructor","props","handleUpload","bind","handleCancel","handleError","handleTableName","toggleFirstRowHeaders","handleProgress","handleCancelInProgress","handleQueryTypeChange","inputRef","createRef","state","tableName","tableNameSet","isFirstRowHeaders","showProgress","progressValue","type","DEFAULT_TYPE","parser","componentDidUpdate","prevProps","file","paste","dotIndex","lastIndexOf","fileTableName","legalizeTableName","substring","setState","current","focus","fromExtension","undefined","AUTO","componentWillUnmount","cancel","onClose","e","onError","error","event","target","stopPropagation","preventDefault","endsWith","handleZipFile","handleFile","Blob","isZip","info","File","size","session","timeZone","onInProgress","handleParseDone","tables","length","bindTableToVariable","then","openTable","catch","mergeTables","table","forEach","t","close","onFileCompleted","readHeaders","onProgress","parse","zipFile","onUpdate","unzip","Error","files","csvFound","i","f","isValidExtension","onOpenTable","render","isNameInvalid","Boolean","width"],"sources":["../../src/csv/CsvInputBar.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  Component,\n  FormEvent,\n  ReactElement,\n  RefObject,\n} from 'react';\nimport classNames from 'classnames';\nimport type { JSZipObject } from 'jszip';\nimport { Button, Checkbox } from '@deephaven/components';\nimport type { IdeSession, Table } from '@deephaven/jsapi-types';\nimport Log from '@deephaven/log';\nimport { DbNameValidator } from '@deephaven/utils';\nimport CsvOverlay from './CsvOverlay';\nimport CsvParser from './CsvParser';\nimport CsvFormats from './CsvFormats';\nimport './CsvInputBar.scss';\n\nconst log = Log.module('CsvInputBar');\n\nconst TYPE_OPTIONS = Object.entries(CsvFormats.TYPES).map(([key, value]) => (\n  <option key={key} value={key}>\n    {value.name}\n  </option>\n));\n\ninterface CsvInputBarProps {\n  session: IdeSession;\n  onOpenTable: (name: string) => void;\n  onClose: () => void;\n  onUpdate: (update: string) => void;\n  onError: (e: unknown) => void;\n  file: File;\n  paste?: string;\n  onInProgress: (boolean: boolean) => void;\n  timeZone: string;\n  unzip?: (zipFile: File) => Promise<JSZipObject[]>;\n}\n\ninterface CsvInputBarState {\n  tableName: string;\n  tableNameSet: boolean;\n  isFirstRowHeaders: boolean;\n  showProgress: boolean;\n  progressValue: number;\n  type: keyof typeof CsvFormats.TYPES;\n  parser: CsvParser | null;\n}\n/**\n * Input controls for CSV upload.\n */\nclass CsvInputBar extends Component<CsvInputBarProps, CsvInputBarState> {\n  static defaultProps = {\n    file: null,\n    paste: null,\n    unzip: null,\n  };\n\n  constructor(props: CsvInputBarProps) {\n    super(props);\n\n    this.handleUpload = this.handleUpload.bind(this);\n    this.handleCancel = this.handleCancel.bind(this);\n    this.handleError = this.handleError.bind(this);\n    this.handleTableName = this.handleTableName.bind(this);\n    this.toggleFirstRowHeaders = this.toggleFirstRowHeaders.bind(this);\n    this.handleProgress = this.handleProgress.bind(this);\n    this.handleCancelInProgress = this.handleCancelInProgress.bind(this);\n    this.handleQueryTypeChange = this.handleQueryTypeChange.bind(this);\n\n    this.inputRef = React.createRef();\n\n    this.state = {\n      tableName: '',\n      tableNameSet: false,\n      isFirstRowHeaders: true,\n      showProgress: false,\n      progressValue: 0,\n      type: CsvFormats.DEFAULT_TYPE,\n      parser: null,\n    };\n  }\n\n  // React documentation says it is fine to update state inside an if statment\n  /* eslint-disable react/no-did-update-set-state */\n  componentDidUpdate(prevProps: CsvInputBarProps): void {\n    const { file, paste } = this.props;\n    const { tableName, tableNameSet } = this.state;\n    // Set the table name from a file\n    if (!tableNameSet && file != null && !tableName) {\n      const dotIndex = file.name.lastIndexOf('.');\n      const fileTableName = DbNameValidator.legalizeTableName(\n        file.name.substring(0, dotIndex)\n      );\n      this.setState({\n        tableName: fileTableName,\n        tableNameSet: true,\n      });\n      this.inputRef.current?.focus();\n    } else if (\n      (file == null && prevProps.file != null) ||\n      (paste == null && prevProps.paste != null)\n    ) {\n      // The file or paste was unstaged\n      this.setState({\n        tableName: '',\n        tableNameSet: false,\n      });\n    }\n\n    // Focus the name input field on paste\n    if (paste != null && paste !== '' && !tableName && this.inputRef.current) {\n      this.inputRef.current.focus();\n    }\n\n    // Determine parser type by file extension\n    if (file != null && file !== prevProps.file) {\n      this.setState({\n        type: CsvFormats.fromExtension(file.name),\n      });\n    } else if (\n      paste != null &&\n      paste !== '' &&\n      (prevProps.paste === undefined || prevProps.paste === '')\n    ) {\n      this.setState({\n        type: CsvFormats.AUTO,\n      });\n    }\n  }\n\n  componentWillUnmount(): void {\n    const { parser } = this.state;\n    if (parser) {\n      parser.cancel();\n    }\n  }\n\n  inputRef: RefObject<HTMLInputElement>;\n\n  handleCancel(): void {\n    const { onClose } = this.props;\n    onClose();\n  }\n\n  handleError(e: unknown): void {\n    const { onClose, onError } = this.props;\n    log.error(e);\n    onError(e);\n    onClose();\n  }\n\n  handleTableName(event: ChangeEvent<HTMLInputElement>): void {\n    this.setState({ tableName: event.target.value, tableNameSet: true });\n  }\n\n  toggleFirstRowHeaders(): void {\n    const { isFirstRowHeaders } = this.state;\n    this.setState({ isFirstRowHeaders: !isFirstRowHeaders });\n  }\n\n  handleUpload(event: FormEvent<HTMLFormElement>): void {\n    event.stopPropagation();\n    event.preventDefault();\n    const { file, paste } = this.props;\n    if (file != null) {\n      if (file.name.endsWith('.zip')) {\n        this.handleZipFile(file);\n      } else {\n        this.handleFile(file);\n      }\n    } else if (paste !== undefined && paste !== '') {\n      this.handleFile(\n        new Blob([paste], {\n          type: 'text/plain',\n        })\n      );\n    }\n  }\n\n  handleFile(file: Blob | JSZipObject, isZip = false): void {\n    log.info(\n      `Starting CSV parser for ${\n        file instanceof File ? file.name : 'pasted values'\n      } ${isZip ? '' : (file as Blob).size} bytes`\n    );\n    const { session, timeZone, onInProgress } = this.props;\n    const { tableName, isFirstRowHeaders, type } = this.state;\n    const handleParseDone = (tables: Table[]) => {\n      // Do not bother merging just one table\n      if (tables.length === 1) {\n        session\n          .bindTableToVariable(tables[0], tableName)\n          .then(() => this.openTable())\n          .catch(e => this.handleError(e));\n      } else {\n        session\n          .mergeTables(tables)\n          .then(table => {\n            session\n              .bindTableToVariable(table, tableName)\n              .then(() => this.openTable())\n              .catch(e => this.handleError(e));\n            tables.forEach(t => t.close());\n          })\n          .catch(e => this.handleError(e));\n      }\n    };\n    const parser = new CsvParser({\n      onFileCompleted: handleParseDone,\n      session,\n      file,\n      type: CsvFormats.TYPES[type],\n      readHeaders: isFirstRowHeaders,\n      onProgress: this.handleProgress,\n      onError: this.handleError,\n      timeZone,\n      isZip,\n    });\n    parser.parse();\n    this.setState({\n      showProgress: true,\n      parser,\n    });\n    // Note that calling onClose will set in progress to false\n    onInProgress(true);\n  }\n\n  handleZipFile(zipFile: File): void {\n    const { onUpdate, unzip } = this.props;\n    if (unzip == null) {\n      this.handleError(new Error('No support for zip files available.'));\n      return;\n    }\n\n    unzip(zipFile)\n      .then(files => {\n        let csvFound = false;\n        // Find the first Csv file in the zip and use that\n        for (let i = 0; i < files.length; i += 1) {\n          const f = files[i];\n          if (CsvOverlay.isValidExtension(f.name)) {\n            onUpdate(`Loading ${f.name} as csv from ${zipFile.name}`);\n            csvFound = true;\n            this.handleFile(f, true);\n            break;\n          }\n        }\n        if (!csvFound) {\n          throw new Error(`No csv file found in ${zipFile.name}`);\n        }\n      })\n      .catch(e => this.handleError(e));\n  }\n\n  handleProgress(progressValue: number): boolean {\n    const { showProgress } = this.state;\n    if (showProgress) {\n      this.setState({\n        progressValue,\n      });\n    }\n    // Indicates to the caller that the upload has been cancelled\n    return !showProgress;\n  }\n\n  // Cancels an in progress upload\n  handleCancelInProgress(): void {\n    const { onInProgress } = this.props;\n    const { parser } = this.state;\n    if (parser) {\n      parser.cancel();\n    }\n    this.setState({\n      showProgress: false,\n      progressValue: 0,\n    });\n    onInProgress(false);\n  }\n\n  openTable(): void {\n    const { onOpenTable, onClose } = this.props;\n    const { tableName } = this.state;\n    onOpenTable(tableName);\n    onClose();\n  }\n\n  handleQueryTypeChange(event: ChangeEvent<HTMLSelectElement>): void {\n    this.setState({\n      type: event.target.value as keyof typeof CsvFormats.TYPES,\n    });\n  }\n\n  render(): ReactElement {\n    const { file, paste } = this.props;\n    const {\n      tableName,\n      isFirstRowHeaders,\n      showProgress,\n      progressValue,\n      type,\n    } = this.state;\n    // A blank table name is invalid for pasted values\n    const isNameInvalid = Boolean(paste) && !tableName;\n    return (\n      <div className=\"csv-input-bar\">\n        {!showProgress && (\n          <form\n            onSubmit={this.handleUpload}\n            className=\"csv-input-bar-container form-inline\"\n          >\n            <div className=\"form-group\">\n              <label htmlFor=\"tableNameInput\">Table name</label>\n              <input\n                ref={this.inputRef}\n                id=\"tableNameInput\"\n                type=\"text\"\n                className={classNames('form-control', {\n                  'is-invalid': isNameInvalid,\n                })}\n                value={tableName}\n                onChange={this.handleTableName}\n              />\n            </div>\n            <div className=\"form-group\">\n              <label htmlFor=\"formatSelect\">File format</label>\n              <select\n                id=\"formatSelect\"\n                className=\"custom-select\"\n                value={type}\n                onChange={this.handleQueryTypeChange}\n              >\n                {TYPE_OPTIONS}\n              </select>\n            </div>\n            <Checkbox\n              className=\"firstRowHeaders\"\n              checked={isFirstRowHeaders}\n              onChange={this.toggleFirstRowHeaders}\n            >\n              First row is column headers\n            </Checkbox>\n            <div className=\"csv-input-buttons form-group\">\n              <Button kind=\"secondary\" onClick={this.handleCancel}>\n                Cancel\n              </Button>\n              <Button\n                kind=\"primary\"\n                type=\"submit\"\n                disabled={\n                  !(file !== null || (paste !== undefined && paste !== '')) ||\n                  !tableName\n                }\n              >\n                Upload\n              </Button>\n            </div>\n          </form>\n        )}\n        {showProgress && (\n          <div className=\"csv-progress-container\">\n            <label>Uploading Table</label>\n            <div className=\"progress\">\n              <div\n                className=\"progress-bar bg-primary\"\n                style={{ width: `${progressValue}%` }}\n                aria-valuenow={progressValue}\n                aria-valuemin={0}\n                aria-valuemax={100}\n              />\n            </div>\n            <label>{progressValue}%</label>\n            <Button kind=\"primary\" onClick={this.handleCancelInProgress}>\n              Cancel\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default CsvInputBar;\n"],"mappings":"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"}

package/dist/csv/CsvOverlay.css

@@ -0,0 +1,57 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.csv-overlay {
+  margin: 0.5rem;
+  background: rgba(45, 42, 46, 0.7);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  white-space: pre-line;
+  outline: none;
+  background-image: linear-gradient(to right, #1a171a 50%, #f0f0ee 50%), linear-gradient(to right, #1a171a 50%, #f0f0ee 50%), linear-gradient(to bottom, #1a171a 50%, #f0f0ee 50%), linear-gradient(to bottom, #1a171a 50%, #f0f0ee 50%);
+  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
+  background-position: 0 top, 0 bottom, left 0, right 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  animation: march 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.csv-overlay .message-content {
+  font-size: 1.2rem;
+}
+.csv-overlay .message-content .message-icon {
+  font-size: 80px;
+}
+.csv-overlay .message-content .message-icon .svg-inline--fa {
+  font-size: inherit;
+}
+.csv-overlay .message-content .message-small {
+  font-size: 0.8rem;
+}
+.csv-overlay .message-content .btn {
+  align-self: center;
+  max-width: 10rem;
+}
+.csv-overlay .selected-content {
+  display: flex;
+  flex-direction: row;
+  align-self: center;
+}
+.csv-overlay .selected-content .selected-icon {
+  font-size: 64px;
+}
+.csv-overlay .selected-content .selected-icon .svg-inline--fa {
+  font-size: inherit;
+}
+.csv-overlay .selected-content .selected-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 15px;
+  font-size: 1rem;
+}
+.csv-overlay .selected-content .selected-name {
+  font-size: 1.2rem;
+}
+
+/*# sourceMappingURL=CsvOverlay.css.map */

package/dist/csv/CsvOverlay.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../node_modules/@deephaven/components/scss/custom.scss","../../src/csv/CsvOverlay.scss","../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECQA;EAIA;EAEA;EACA;EACA;EACA;EACA;;ADhBA;EACE;;AACA;EACE;;AACA;EACE;;AAGJ;EACE;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AACA;EACE;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE","file":"CsvOverlay.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '@deephaven/components/scss/custom.scss';\n\n.csv-overlay {\n  margin: $spacer-2;\n  background: rgba($content-bg, 0.7);\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  white-space: pre-line;\n  outline: none;\n\n  .message-content {\n    font-size: 1.2rem;\n    .message-icon {\n      font-size: 80px;\n      .svg-inline--fa {\n        font-size: inherit;\n      }\n    }\n    .message-small {\n      font-size: 0.8rem;\n    }\n    .btn {\n      align-self: center;\n      max-width: 10rem;\n    }\n  }\n\n  .selected-content {\n    display: flex;\n    flex-direction: row;\n    align-self: center;\n    .selected-icon {\n      font-size: 64px;\n      .svg-inline--fa {\n        font-size: inherit;\n      }\n    }\n    .selected-text {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      margin: 15px;\n      font-size: 1rem;\n    }\n    .selected-name {\n      font-size: 1.2rem;\n    }\n  }\n\n  @include ants-base($foreground, $background);\n}\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,\n    $ant-thickness $ant-size, $ant-thickness $ant-size;\n  background-position: 0 top, 0 bottom, left 0, right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n"]}