Customize Aim UI (#31)

src/package.json

@@ -68,22 +68,22 @@
   },
   "scripts": {
     "start": "react-app-rewired --max_old_space_size=4096 start",
-    "build": "react-app-rewired --max_old_space_size=4096 build && gzipper c -i js,css,html ./build && node tasks/index-html-template-generator.js",
+    "build": "GENERATE_SOURCEMAP=false react-app-rewired --max_old_space_size=2048 build",
     "test": "react-app-rewired test ",
     "test:coverage": "react-app-rewired test --collectCoverage",
     "test:watch": "react-app-rewired test --watchAll",
     "eject": "react-scripts eject",
     "lint": "eslint src/. --ext .js,.jsx,.ts,.tsx",
     "format:fix": "eslint src/. --ext .js,.jsx,.ts,.tsx --quiet --fix",
     "preinstall": "rimraf public/vs",
-    "postinstall": "cp -R node_modules/monaco-editor/min/vs public/vs",
+    "postinstall": "cp -R node_modules/monaco-editor/min/vs public/vs && find public/vs -type f | xargs sed -i -e '/^\\/\\/# sourceMappingURL=/d'",
     "analyze-bundles": "node tasks/bundle-analyzer.js",
     "crc-kit": "func() { node tasks/cli/index.js  create-component --name=\"$1\" --path=./src/components/kit/ --lint; }; func",
     "crc": "func() { node tasks/cli/index.js  create-component --name=\"$1\" --path=./src/components/ --lint; }; func",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public"
   },
-  "homepage": "/static-files/",
+  "homepage": "/static/aim/",
   "browserslist": {
     "production": [
       ">0.2%",

src/public/index.html

@@ -75,14 +75,12 @@
     <script>
       document.write(`<div id='preload-spinner' class='preloader'>
         <div class='preloader-wrapper'>
-        <svg overflow='overlay' id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="56.71503" height="56.50146">
-  <g id="Logo">
-    <path fill="#57aeea" class="cls-1" d="M43.8887,2.55052A4.37315,4.37315,0,1,0,37.704,8.73494l10.98239,10.983a4.373,4.373,0,1,0,6.18471-6.18411Z"/>
-    <path fill="#7869d0" class="cls-2" d="M11.46467,5.38778a4.37283,4.37283,0,1,0-6.18411,6.18411l39.472,39.472A4.37314,4.37314,0,0,0,50.9373,44.8595Z"/>
-    <path fill="#688bdd" class="cls-3" d="M24.98757,1.2809a4.37293,4.37293,0,1,0-6.18411,6.18441l30.44626,30.446a4.37293,4.37293,0,1,0,6.18411-6.18441Z"/>
-    <path fill="#8946c2" class="cls-4" d="M7.463,19.01562A4.37314,4.37314,0,1,0,1.27833,25.2L31.29946,55.22055a4.37314,4.37314,0,1,0,6.18471-6.18441Z"/>
-    <path fill="#9923b5" class="cls-5" d="M8.62889,37.81033a4.37315,4.37315,0,1,0-6.18471,6.18442l10.98239,10.983a4.373,4.373,0,1,0,6.18471-6.18411Z"/>
-  </g>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+  <defs>
+    <style>.a{fill:#00a4e0;}.b{fill:#00131a;}</style>
+  </defs>
+  <path class="a" d="M310,107.57c-.64-.88-2.09-1.13-4.37-.77L210.72,122l-13.15,2.11-34.85,5.59c-2.39.38-2.95,3.71-.74,4.37l24.48,7.37-13.91,49.73L80.37,206l-4.05,12.53,192.16-30.82.48-1.64c1.31-4.52,1.46-10.26-6.42-9l-51.74,8.3,9.25-33.78,70.57-11.32a19.28,19.28,0,0,0,7.18-2.33,10.58,10.58,0,0,0,3.95-5.45l8.2-20.83Q311,108.88,310,107.57Z" />
+  <path class="b" d="M200,10C95.23,10,10,95.23,10,200a189.19,189.19,0,0,0,2,27.2l24.56-3.08A165.39,165.39,0,0,1,34.78,200C34.78,108.9,108.9,34.78,200,34.78S365.22,108.9,365.22,200,291.1,365.22,200,365.22c-73.36,0-135.66-48.07-157.16-114.36l116.49-18.69-18.91,64.88q-1.33,4.56,0,5.87c.9.87,2.81,1.08,5.7.61l23.64-3.78q6.71-1.08,8.75-8.11l19.1-65.5,31.43-5c4.62-.74,7.65-3.54,9.06-8.39l2.29-7.84L39,237.17h0l0,0L14.52,241.1s.66,2.84,1.5,6.15c.22.86.44,1.72.67,2.58.48,1.82,1,3.61,1.42,5h0C41.73,332.93,114.29,390,200,390c104.77,0,190-85.23,190-190S304.77,10,200,10Z" />
 </svg>
   <div class="progress-bar">
     <div class="progress-bar-value"></div>
@@ -147,11 +145,7 @@
       rel="stylesheet"
       href="%PUBLIC_URL%/assets/icomoon/icomoonIcons.css"
     />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-    />
-    <title>Aim</title>
+    <title>FastTrackML (modern)</title>
 
     <script>
       !(function () {
@@ -214,7 +208,10 @@
       })();
     </script>
     <script>
-      window.API_BASE_PATH = '{{ base_path }}';
+      const found = window.location.pathname.match(/^(\/ns\/[^/]+\/)aim/);
+      const prefix = found ? found[1] : '/';
+      window.PREFIX = prefix;
+      window.API_BASE_PATH = prefix + 'aim';
       window.externalPublicPath = '%PUBLIC_URL%/';
     </script>
   </head>

src/src/App.tsx

@@ -27,7 +27,7 @@ const isVisibleCacheBanner = checkIsBasePathInCachedEnv(basePath) && inIframe();
 // loading monaco from node modules instead of CDN
 loader.config({
   paths: {
-    vs: `${getBasePath()}/static-files/vs`,
+    vs: '/static/aim/vs',
   },
 });
 

src/src/components/AutocompleteInput/AutocompleteInput.tsx

@@ -186,7 +186,7 @@ function AutocompleteInput({
           //   : formattedValue;
           onChange(formattedValue, ev);
         }
-        if (ev.changes[0].text === '\n') {
+        if (/^\r?\n$/.test(ev.changes[0].text)) {
           formattedValue = hasSelection
             ? editorValue.replace(/[\n\r]/g, '')
             : formattedValue;

src/src/components/AxesPropsPopover/config.ts

@@ -7,11 +7,11 @@ export const METRICS_ALIGNMENT_LIST: {
 }[] = [
   {
     value: AlignmentOptionsEnum.STEP,
-    label: 'Step',
+    label: 'Logging Iteration',
   },
   {
     value: AlignmentOptionsEnum.EPOCH,
-    label: 'Epoch',
+    label: 'Step',
   },
   {
     value: AlignmentOptionsEnum.RELATIVE_TIME,

src/src/components/CodeBlock/CodeBlock.tsx

@@ -29,7 +29,7 @@ function CodeBlock({
         <ErrorBoundary>
           <CopyToClipBoard
             className='CodeBlock__copy__button'
-            contentRef={elementRef}
+            copyContent={code}
           />
         </ErrorBoundary>
       </div>

src/src/components/CommunityPopup/CommunityPopup.tsx

@@ -6,6 +6,8 @@ import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
 
 import { trackEvent } from 'services/analytics';
 
+import { getItem, setItem } from 'utils/storage';
+
 import { Button, Text } from '../kit';
 
 import { ICommunityPopupProps } from './';
@@ -20,7 +22,7 @@ function CommunityPopup(props: ICommunityPopupProps) {
   let timeoutIdRef = React.useRef<number>();
 
   React.useEffect(() => {
-    const popupSeenStorage = localStorage.getItem(COMMUNITY_POPUP_SEEN);
+    const popupSeenStorage = getItem(COMMUNITY_POPUP_SEEN);
 
     if (popupSeenStorage === 'true') {
       setOpen(false);
@@ -33,12 +35,12 @@ function CommunityPopup(props: ICommunityPopupProps) {
   }, []);
 
   const onSkip = React.useCallback(() => {
-    localStorage.setItem(COMMUNITY_POPUP_SEEN, 'true');
+    setItem(COMMUNITY_POPUP_SEEN, 'true');
     setOpen(false);
   }, []);
 
   const onJoin = React.useCallback(() => {
-    localStorage.setItem(COMMUNITY_POPUP_SEEN, 'true');
+    setItem(COMMUNITY_POPUP_SEEN, 'true');
     window.open(COMMUNITY_URL, '_blank');
     trackEvent(ANALYTICS_EVENT_KEYS.sidebar.discord);
     setOpen(false);

src/src/components/SideBar/SideBar.tsx

@@ -1,18 +1,16 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { NavLink } from 'react-router-dom';
 
 import { Drawer, Tooltip } from '@material-ui/core';
 
 import logoImg from 'assets/logo.svg';
-import { ReactComponent as DiscordIcon } from 'assets/icons/discord.svg';
 
 import { Icon, Text } from 'components/kit';
 import { IconName } from 'components/kit/Icon';
 import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
-import CommunityPopup from 'components/CommunityPopup';
 
 import { PathEnum } from 'config/enums/routesEnum';
-import { AIM_VERSION } from 'config/config';
+import { getBaseHost, getPrefix } from 'config/config';
 import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
 import { DOCUMENTATIONS } from 'config/references';
 
@@ -25,6 +23,16 @@ import { getItem } from 'utils/storage';
 import './Sidebar.scss';
 
 function SideBar(): React.FunctionComponentElement<React.ReactNode> {
+  const [version, setVersion] = React.useState('unknown');
+
+  useEffect(() => {
+    fetch(`${getBaseHost()}/version`).then((response) => {
+      response.text().then((version) => {
+        setVersion(version);
+      });
+    });
+  }, []);
+
   function getPathFromStorage(route: PathEnum): PathEnum | string {
     const path = getItem(`${route.slice(1)}Url`) ?? '';
     if (path !== '' && path.startsWith(route)) {
@@ -83,21 +91,11 @@ function SideBar(): React.FunctionComponentElement<React.ReactNode> {
             </div>
           </ul>
           <div className='Sidebar__bottom'>
-            <CommunityPopup>
-              <Tooltip title='Community Discord' placement='right'>
-                <a
-                  target='_blank'
-                  href='https://community.aimstack.io/'
-                  rel='noreferrer'
-                  className='Sidebar__bottom__anchor'
-                  onClick={() =>
-                    trackEvent(ANALYTICS_EVENT_KEYS.sidebar.discord)
-                  }
-                >
-                  <DiscordIcon />
-                </a>
-              </Tooltip>
-            </CommunityPopup>
+            <Tooltip title='Switch UI' placement='right'>
+              <a href={getPrefix()} className='Sidebar__bottom__anchor'>
+                <Icon name='live-demo' />
+              </a>
+            </Tooltip>
             <Tooltip title='Docs' placement='right'>
               <a
                 target='_blank'
@@ -109,7 +107,7 @@ function SideBar(): React.FunctionComponentElement<React.ReactNode> {
                 <Icon name='full-docs' />
               </a>
             </Tooltip>
-            <Text tint={30}>v{AIM_VERSION}</Text>
+            <Text tint={30}>{version}</Text>
           </div>
         </Drawer>
       </div>

src/src/components/SplitPane/SplitPane.tsx

@@ -4,6 +4,8 @@ import classNames from 'classnames';
 
 import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
 
+import { getItem, setItem } from 'utils/storage';
+
 import { SplitPaneProps, SplitPaneContext } from '.';
 
 import './SplitPane.scss';
@@ -41,7 +43,7 @@ function SplitPane(props: SplitPaneProps) {
         onDragEnd(endSizes);
       }
       if (useLocalStorage) {
-        localStorage.setItem(`${id}-panesSizes`, JSON.stringify(endSizes));
+        setItem(`${id}-panesSizes`, JSON.stringify(endSizes));
       }
     },
     [onDragEnd, id, useLocalStorage],
@@ -50,7 +52,7 @@ function SplitPane(props: SplitPaneProps) {
   const getSizes = React.useCallback(
     (useLocalStorage: boolean, id: string, sizes?: number[]) => {
       if (useLocalStorage) {
-        const savedSizes = localStorage.getItem(`${id}-panesSizes`);
+        const savedSizes = getItem(`${id}-panesSizes`);
         if (savedSizes) {
           return JSON.parse(savedSizes);
         }

src/src/components/kit/DictVisualizer/DictVisualizer.tsx

@@ -206,7 +206,7 @@ function flattenDict(
         closedValue: '[...]',
         sub: `${nestedItemsLength} item${nestedItemsLength === 1 ? '' : 's'}`,
         color: typeToColor('array'),
-        copyContent: formatValue(dict),
+        copyContent: JSON.stringify(JSON.parse(formatValue(dict)), null, 2),
       });
     } else {
       let nestedItemsLength = Object.keys(dict).length;
@@ -219,7 +219,7 @@ function flattenDict(
         closedValue: '{...}',
         sub: `${nestedItemsLength} item${nestedItemsLength === 1 ? '' : 's'}`,
         color: typeToColor('object'),
-        copyContent: formatValue(dict),
+        copyContent: JSON.stringify(JSON.parse(formatValue(dict)), null, 2),
       });
     }
   }
@@ -240,7 +240,7 @@ function flattenDict(
         closedValue: '[...]',
         sub: `${item.length} item${item.length === 1 ? '' : 's'}`,
         color: typeToColor('array'),
-        copyContent: value,
+        copyContent: JSON.stringify(JSON.parse(value), null, 2),
       });
       if (item.length > 0) {
         rows.push(...flattenDict(item as unknown[], level + 1, id));
@@ -266,7 +266,7 @@ function flattenDict(
         closedValue: '{...}',
         sub: `${nestedItemsLength} item${nestedItemsLength === 1 ? '' : 's'}`,
         color: typeToColor('object'),
-        copyContent: value,
+        copyContent: JSON.stringify(JSON.parse(value), null, 2),
       });
       if (nestedItemsLength > 0) {
         rows.push(

src/src/config/config.ts

@@ -2,6 +2,7 @@ import { version } from '../../package.json';
 
 interface GlobalScope extends Window {
   API_BASE_PATH?: string;
+  PREFIX?: string;
 }
 
 let globalScope: GlobalScope;
@@ -15,26 +16,39 @@ try {
 
 const isDEVModeOn: boolean = process.env.NODE_ENV === 'development';
 
+function getBaseHost(): string {
+  return isDEVModeOn ? 'http://localhost:5000' : '';
+}
+
 function getBasePath(isApiBasePath: boolean = true): string {
   if (globalScope.API_BASE_PATH === '{{ base_path }}') {
     return isApiBasePath ? '' : '/';
   }
   return `${globalScope.API_BASE_PATH}`;
 }
 
-let API_HOST: string = isDEVModeOn
-  ? `http://127.0.0.1:43800${getBasePath()}/api`
-  : `${getBasePath()}/api`;
+let API_HOST: string = `${getBaseHost()}${getBasePath()}/api`;
 
 function getAPIHost() {
   return API_HOST;
 }
 
+function getPrefix(): string {
+  return `${globalScope.PREFIX}`;
+}
+
+function getTrackingURI(): string {
+  let host = getBaseHost();
+  if (host === '') {
+    const { protocol, hostname, port } = window.location;
+    host = `${protocol}//${hostname}${port ? `:${port}` : ''}`;
+  }
+  return `${host}${getPrefix()}`;
+}
+
 function setAPIBasePath(basePath: string) {
   globalScope.API_BASE_PATH = basePath;
-  API_HOST = isDEVModeOn
-    ? `http://127.0.0.1:43800${getBasePath()}/api`
-    : `${getBasePath()}/api`;
+  API_HOST = `${getBaseHost()}${getBasePath()}/api`;
 }
 
 export const AIM_VERSION = version;
@@ -48,4 +62,11 @@ export function checkIsBasePathInCachedEnv(basePath: string) {
   return PATHS_TO_SHOW_CACHE_BANNERS.includes(parsed_path);
 }
 
-export { isDEVModeOn, getBasePath, getAPIHost, setAPIBasePath };
+export {
+  getBaseHost,
+  getBasePath,
+  getAPIHost,
+  getPrefix,
+  getTrackingURI,
+  setAPIBasePath,
+};