Finish fixing build (#162)

* Fix a react markdown bug * require a high node version * picked too high an engine * nvm rc * fiddle * ??? * . * fix build errors? * stringify fix * fix lint * finish lint * .
mcnuttandrew · Aug 29, 2023 · 25b10c3 · 25b10c3
1 parent 0465a9b
commit 25b10c3
Show file tree

Hide file tree

Showing 64 changed files with 2,153 additions and 2,223 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v18.16.1
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 IVY AUTHORS
+Copyright (c) 2021 - Andrew McNutt
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
diff --git a/LICENSE.txt b/LICENSE.txt
diff --git a/package.json b/package.json
@@ -5,6 +5,10 @@
   "main": "index.js",
   "author": "",
   "license": "ISC",
+  "engines": {
+    "node": ">=16.20.1"
+  },
+  "type": "module",
   "devDependencies": {
     "@babel/core": "^7.16.12",
     "@jest/globals": "^29.6.1",
@@ -13,24 +17,17 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/d3": "^7.4.0",
-    "@types/friendly-words": "^1.2.0",
     "@types/jest": "^29.5.2",
     "@types/json-schema": "^7.0.12",
-    "@types/lodash.isequal": "^4.5.5",
-    "@types/lodash.merge": "^4.6.7",
-    "@types/mongodb": "^4.0.7",
     "@types/node": "^20.4.0",
-    "@types/react": "16",
-    "@types/react-dom": "16",
-    "@types/react-syntax-highlighter": "^15.5.7",
-    "@types/seedrandom": "^3.0.5",
+    "@types/react": "17",
+    "@types/react-dom": "17",
+    "@types/reactour": "^1.17.1",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^1.1.4",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "acorn-jsx": "^5.3.2",
     "ajv": "^6.12.0",
-    "babel-loader": "^8.2.3",
     "eslint": "^8.44.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
@@ -51,7 +48,7 @@
     "@monaco-editor/react": "^4.5.2",
     "d3-dsv": "^1.1.1",
     "datalib": "^1.9.2",
-    "dom-to-image": "^2.6.0",
+    "dom-to-image-more": "^3.1.6",
     "github-markdown-css": "^4.0.0",
     "idb-keyval": "^3.2.0",
     "immer": "^5.3.2",
@@ -71,17 +68,17 @@
     "react-dropzone": "^11.0.1",
     "react-hotkeys": "^2.0.0",
     "react-icons": "^3.8.0",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^7.1.0",
     "react-monaco-editor": "^0.32.1",
     "react-redux": "^6.0.1",
     "react-router-dom": "^5.2.0",
     "react-split-pane": "^0.1.89",
     "react-switch": "^5.0.1",
     "react-vega": "^7.3",
-    "reactour": "^1.19.0",
+    "reactour": "^1.18.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.2.0",
-    "styled-components": "^4.0.0",
+    "styled-components": "^6.0.7",
     "type-analyzer": "^0.2.3",
     "unit-vis": "^0.0.4",
     "vega": "^5.13.0",
@@ -93,14 +90,11 @@
   "scripts": {
     "dev": "vite",
     "start": "netlify dev",
-    "build": "NODE_ENV=production vite build",
+    "build": "NODE_ENV=production tsc && vite build",
     "lint": "yarn lint:ts",
     "lint:ts": "eslint --ext .ts --ext .tsx src",
-    "lint:fix": "eslint './src/**/*.{ts,tsx}'",
     "test": "NODE_ENV=test && jest",
     "coverage": "yarn test  --collect-coverage",
-    "prettify": "prettier --write 'src/**/*.{ts,tsx}'",
-    "analyze": "NODE_ENV=analysis webpack --profile > stats.json",
     "schema-mod": "ts-node scripts/generate-schema-mod.ts"
   },
   "jest": {
@@ -127,4 +121,4 @@
       "^react-dnd-test-utils$": "react-dnd-test-utils/dist/cjs"
     }
   }
-}
+}
diff --git a/assets/atom-logo.png → public/assets/atom-logo.png b/assets/atom-logo.png → public/assets/atom-logo.png
diff --git a/assets/chart-gallery-logo.png → public/assets/chart-gallery-logo.png b/assets/chart-gallery-logo.png → public/assets/chart-gallery-logo.png
diff --git a/collected-data/Strikes-dirty.csv → ...c/assets/collected-data/Strikes-dirty.csv b/collected-data/Strikes-dirty.csv → ...c/assets/collected-data/Strikes-dirty.csv
diff --git a/collected-data/american-executions.json → ...s/collected-data/american-executions.json b/collected-data/american-executions.json → ...s/collected-data/american-executions.json
diff --git a/collected-data/american-executions.tsv → ...ts/collected-data/american-executions.tsv b/collected-data/american-executions.tsv → ...ts/collected-data/american-executions.tsv
diff --git a/collected-data/deaths.json → public/assets/collected-data/deaths.json b/collected-data/deaths.json → public/assets/collected-data/deaths.json
diff --git a/collected-data/drone-strikes.json → .../assets/collected-data/drone-strikes.json b/collected-data/drone-strikes.json → .../assets/collected-data/drone-strikes.json
diff --git a/collected-data/gapminder.csv → public/assets/collected-data/gapminder.csv b/collected-data/gapminder.csv → public/assets/collected-data/gapminder.csv
diff --git a/collected-data/gapminder_tidy.csv → .../assets/collected-data/gapminder_tidy.csv b/collected-data/gapminder_tidy.csv → .../assets/collected-data/gapminder_tidy.csv
diff --git a/collected-data/hlth_cd_anr_1.tsv → ...c/assets/collected-data/hlth_cd_anr_1.tsv b/collected-data/hlth_cd_anr_1.tsv → ...c/assets/collected-data/hlth_cd_anr_1.tsv
diff --git a/assets/example-chart.png → public/assets/example-chart.png b/assets/example-chart.png → public/assets/example-chart.png
diff --git a/assets/ivy.0.0.1.json → public/assets/ivy.0.0.1.json b/assets/ivy.0.0.1.json → public/assets/ivy.0.0.1.json
diff --git a/assets/ivy.json → public/assets/ivy.json b/assets/ivy.json → public/assets/ivy.json
diff --git a/assets/logo.png → public/assets/logo.png b/assets/logo.png → public/assets/logo.png
diff --git a/assets/polestar-logo.png → public/assets/polestar-logo.png b/assets/polestar-logo.png → public/assets/polestar-logo.png
diff --git a/favicon.ico → public/favicon.ico b/favicon.ico → public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <title>Ivy - Integrated Visualization Editor</title>
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+
+
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="FeX">
+    <meta name="apple-mobile-web-app-title" content="FeX">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="apple-touch-icon" href="single-page-icon.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Ivy - Integrated Visualization Editor</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+    <% if (process.env.REACT_APP_DISABLE_LIVE_RELOAD === "true") { %>
+    <!-- 
+  Live Reload was causing issues for us. Disable it by starting the app with
+  REACT_APP_DISABLE_LIVE_RELOAD=true
+-->
+    <script>
+      {
+        var WS = window.WebSocket;
+        function DevWebSocket(s) {
+          if (s === "ws://localhost:3000/sockjs-node") {
+            console.info("[DEV NOTICE] Live Reload Has Been Disabled");
+            return {};
+          } else {
+            // Pass through other usage of sockets
+            return new WS(s);
+          }
+        }
+        window.WebSocket = DevWebSocket;
+      }
+    </script>
+    <% } %>
+  </body>
+</html>
diff --git a/logo.png → public/logo.png b/logo.png → public/logo.png
diff --git a/src/components/encoding-column.tsx b/src/components/encoding-column.tsx
@@ -187,7 +187,7 @@ export default function EncodingColumn(props: EncodingColumnProps): JSX.Element
             setAllTemplateValues={setAllTemplateValues}
             setTemplateValue={setTemplateValue}
             setWidgetValue={setWidgetValue}
-            disallowFanout={template.disallowFanOut}
+            disallowFanout={!!template.disallowFanOut}
             customCards={template.customCards}
             setMaterialization={setMaterialization}
             widgetValue={templateMap.paramValues[widget.name]}
@@ -219,6 +219,7 @@ export default function EncodingColumn(props: EncodingColumnProps): JSX.Element
       {editMode && template && (
         <div className="flex">
           <div className="flex full-width space-between">
+            {/* @ts-ignore */}
             <IgnoreKeys style={{height: '100%'}}>
               <AddLabelToWidget label={'Name'}>
                 <OnBlurInput
@@ -235,7 +236,7 @@ export default function EncodingColumn(props: EncodingColumnProps): JSX.Element
               <AddLabelToWidget label={'Description'}>
                 <OnBlurInput
                   label="Template Description"
-                  initialValue={template.templateDescription}
+                  initialValue={template.templateDescription || ''}
                   update={(value): any =>
                     modifyValueOnTemplate({
                       value,
@@ -263,6 +264,7 @@ export default function EncodingColumn(props: EncodingColumnProps): JSX.Element
               </AddLabelToWidget>
               <AddLabelToWidget label={'Disallow Fan Out'}>
                 <span className="flex">
+                  {/* @ts-ignore */}
                   <Switch
                     {...switchCommon}
                     checked={!!template.disallowFanOut}

diff --git a/src/components/filter.tsx b/src/components/filter.tsx
@@ -19,6 +19,7 @@ function DateFilter({filter, updateFilter}: Props): JSX.Element {
   } = filter;
   return (
     <div className="flex-down">
+      {/* @ts-ignore */}
       <IgnoreKeys style={{height: '100%'}}>
         <div className="flex">
           <span>Start</span>
@@ -44,6 +45,7 @@ function MeasureFilter({filter, column, updateFilter}: Props): JSX.Element {
   const {domain} = column;
   return (
     <div className="flex-down">
+      {/* @ts-ignore */}
       <IgnoreKeys style={{height: '100%'}}>
         <div className="grid">
           <span className="grid-col-1">min</span>

diff --git a/src/components/modals/data-modal.tsx b/src/components/modals/data-modal.tsx
@@ -21,9 +21,9 @@ interface Props {
 
 export default function DataModal(props: Props): JSX.Element {
   const {changeSelectedFile, loadCustomDataset, setModalState} = props;
-  const [searchTerm, setSearchTerm] = useState(null);
+  const [searchTerm, setSearchTerm] = useState<string | null>(null);
   const [sortMode, setSortMode] = useState('FAVORITES');
-  const [favs, setFavs] = useState(new Set([]));
+  const [favs, setFavs] = useState<Set<string>>(new Set([]));
   useEffect(() => {
     getFavoriteDatasets().then((x) => {
       const entries = x && x.length ? x : ['cars.json', 'penguins.json'];
@@ -35,7 +35,7 @@ export default function DataModal(props: Props): JSX.Element {
     const file = acceptedFiles[0];
     const reader = new FileReader();
     reader.onload = (event): void => {
-      loadCustomDataset({fileName: file.name, data: event.target.result as any});
+      loadCustomDataset({fileName: file.name, data: event!.target?.result as any});
       setModalState(null);
     };
 
@@ -53,6 +53,7 @@ export default function DataModal(props: Props): JSX.Element {
       <div className="flex space-between">
         <h3>Predefined Datasets</h3>
         <div>
+          {/* @ts-ignore */}
           <IgnoreKeys style={{height: '100%'}}>
             <input
               type="text"

diff --git a/src/components/monaco-wrapper.tsx b/src/components/monaco-wrapper.tsx
@@ -50,7 +50,7 @@ export default class CodeEditor extends React.Component<Props, State> {
     return oldMode !== newMode ? this.editor.getScrollTop() : null;
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State, currentTop: number): void {
+  componentDidUpdate(prevProps: Props, _: State, currentTop: number): void {
     const oldMode = prevProps.codeMode;
     const newMode = this.props.codeMode;
     if (oldMode !== newMode) {
@@ -75,7 +75,7 @@ export default class CodeEditor extends React.Component<Props, State> {
       setEditMode,
     } = this.props;
     return (
-      /*eslint-disable react/no-string-refs*/
+      // @ts-ignore
       <IgnoreKeys style={{height: '100%'}}>
         <MonacoEditor
           key={codeMode}

diff --git a/src/components/prong-wrapper.tsx b/src/components/prong-wrapper.tsx
@@ -23,6 +23,7 @@ function CodeEditor(props: Props) {
   const {editMode, setEditMode, handleCodeUpdate, setCodeMode, codeMode, currentCode, height} = props;
 
   return (
+    // @ts-ignore
     <IgnoreKeys style={{height: '100%'}}>
       <Editor
         height={`${height}px`}

diff --git a/src/components/split-pane.tsx b/src/components/split-pane.tsx
@@ -7,6 +7,7 @@ import {getHeight, writeHeight} from '../utils/local-storage';
 export default function SplitPaneWrapper(props: any): JSX.Element {
   if (props.showProgrammaticMode && props.showGUIView) {
     return (
+      // @ts-ignore
       <SplitPane
         split="horizontal"
         minSize={60}

diff --git a/src/components/template-card.tsx b/src/components/template-card.tsx
@@ -38,7 +38,7 @@ function fullMatch(): JSX.Element {
 export function countSymbol(symbol: string): JSX.Element {
   return (
     <div className="count-symbol">
-      {symbol.split('-').map((key, idx, arr) => {
+      {symbol.split('-').map((key, _, arr) => {
         const circType = arr.length === 1 ? 'full' : arr.length === 2 ? 'half' : 'third';
         return (
           <div

diff --git a/src/components/tooltips/publish-instance-tooltip.tsx b/src/components/tooltips/publish-instance-tooltip.tsx
@@ -1,5 +1,8 @@
 import React, {useRef, useState, useEffect} from 'react';
-import DomToImage from 'dom-to-image';
+import DomToImage from 'dom-to-image-more';
+// // @ts-ignore
+// window.require = (name) => new URL(name, import.meta.url).href
+// const DomToImage = require('dom-to-image');
 import Tooltip from 'rc-tooltip';
 import {TiUpload} from 'react-icons/ti';
 import VegaDatasets from '../../constants/vega-datasets-counts.json';
@@ -18,7 +21,7 @@ interface Props {
 }
 
 export default function PublishInstanceTooltip(props: Props): JSX.Element {
-  const [error, setError] = useState(null);
+  const [error, setError] = useState<any>(null);
   const [saved, setSaved] = useState(false);
   const {templateAuthor, templateName, templateMap, dataset, userName} = props;
   useEffect(() => {

diff --git a/src/components/view-controls.tsx b/src/components/view-controls.tsx
@@ -48,6 +48,7 @@ function viewOption(props: ViewOptionProps): JSX.Element {
         overlay={
           <div>
             <div>View Controls</div>
+            {/* @ts-ignore */}
             <IgnoreKeys style={{height: '100%'}}>
               <input
                 aria-label={`Set view name`}

diff --git a/src/components/widgets/free-text-widget.tsx b/src/components/widgets/free-text-widget.tsx
@@ -14,6 +14,7 @@ function FreeTextWidgetConfiguration(props: GeneralWidget<FreeTextWidget>): JSX.
       <EditParameterName widget={widget} idx={idx} setWidgetValue={setWidgetValue} />
       <EditDisplayName widget={widget} idx={idx} setWidgetValue={setWidgetValue} />
       <AddLabelToWidget label="use paragraph mode">
+        {/* @ts-ignore */}
         <Switch
           {...switchCommon}
           checked={!!widget.config.useParagraph}
@@ -35,6 +36,7 @@ function FreeTextWidgetComponent(props: GeneralWidget<FreeTextWidget>): JSX.Elem
   return (
     <div className="flex free-text-widget">
       <div className="widget-title">{widgetName(widget, editMode)}</div>
+      {/* @ts-ignore */}
       <IgnoreKeys style={{height: '100%'}}>
         {!widget.config.useParagraph && <input aria-label={`${widget.name} text box`} {...inputProps} />}
         {widget.config.useParagraph && <textarea aria-label={`${widget.name} text box`} {...inputProps} />}

diff --git a/src/components/widgets/general-widget.tsx b/src/components/widgets/general-widget.tsx
@@ -130,6 +130,7 @@ const GenericMaterializationMenu = (props: GenericMaterializationMenuProps): nul
             return (
               <div key={idx} className="flex space-between">
                 <span>{name}</span>
+                {/* @ts-ignore */}
                 <Switch
                   {...switchCommon}
                   checked={checked}

diff --git a/src/components/widgets/list-widget.tsx b/src/components/widgets/list-widget.tsx
@@ -51,6 +51,7 @@ function optionRow(
         </div>
         <div className="flex">
           <AddLabelToWidget label="Option Value">
+            {/* @ts-ignore */}
             <IgnoreKeys style={{height: '100%'}}>
               <input
                 aria-label={`allow value set`}
@@ -66,6 +67,7 @@ function optionRow(
           </AddLabelToWidget>
           {usingDisplayValueFormat && (
             <AddLabelToWidget label="Option Display Name">
+              {/* @ts-ignore */}
               <IgnoreKeys style={{height: '100%'}}>
                 <input
                   aria-label={`allow value set`}