Fixes for urlstate of new projects (#86)

* Fixes for urlstate of new projects * Fix for formatter * Getting closer * Drop console log
multiprocessio · Nov 10, 2021 · 84edd1e · 84edd1e
1 parent d80918f
commit 84edd1e
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 26 deletions.
diff --git a/ui/Header.tsx b/ui/Header.tsx
@@ -14,6 +14,7 @@ export function Header({
 }) {
   const {
     state: { projectId },
+    setState: setUrlState,
   } = React.useContext(UrlStateContext);
   const { setState: setProjectState } = React.useContext(ProjectContext);
 
@@ -26,14 +27,21 @@ export function Header({
         <div className="flex-right vertical-align-center">
           {MODE === 'browser' ? (
             <React.Fragment>
+              <a href={`${SITE_ROOT}/#online-environment`} target="_blank">
+                About
+              </a>
               <span title="Drop all state and load a sample project.">
                 <Button
                   onClick={() => {
                     setProjectState(DEFAULT_PROJECT);
-                    window.location.reload();
+                    setUrlState({
+                      projectId: DEFAULT_PROJECT.projectName,
+                      page: 0,
+                      view: 'editor',
+                    });
                   }}
                 >
-                  Reset
+                  Load Default Project
                 </Button>
               </span>
               <a
@@ -49,9 +57,6 @@ export function Header({
                   title="GitHub"
                 ></iframe>
               </a>
-              <a href={`${SITE_ROOT}/#online-environment`} target="_blank">
-                About
-              </a>
             </React.Fragment>
           ) : (
             <span>{projectId}</span>

diff --git a/ui/PageList.tsx b/ui/PageList.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react';
+import { MODE_FEATURES } from '../shared/constants';
 import { EVAL_ERRORS } from '../shared/errors';
-import { PanelResultMeta, ProjectPage, ProjectState } from '../shared/state';
+import {
+  DEFAULT_PROJECT,
+  PanelResultMeta,
+  ProjectPage,
+  ProjectState,
+} from '../shared/state';
 import { Button } from './components/Button';
 import { Confirm } from './components/Confirm';
 import { Input } from './components/Input';
@@ -10,6 +16,7 @@ import { PanelPlayWarning } from './errors';
 import { NotFound } from './NotFound';
 import { PanelList } from './PanelList';
 import { PANEL_UI_DETAILS } from './panels';
+import { ProjectContext } from './ProjectStore';
 import { Scheduler } from './scheduler';
 import { UrlStateContext } from './urlState';
 
@@ -102,7 +109,9 @@ export function PageList({
   pageIndex: number;
 }) {
   const page: ProjectPage | null = state.pages[pageIndex] || null;
-  const { state: urlState } = React.useContext(UrlStateContext);
+  const { state: urlState, setState: setUrlState } =
+    React.useContext(UrlStateContext);
+  const { setState: setProjectState } = React.useContext(ProjectContext);
 
   if (!page) {
     return (
@@ -120,6 +129,24 @@ export function PageList({
           </Button>{' '}
           to get started!
         </p>
+        {MODE_FEATURES.useDefaultProject && (
+          <p>
+            Or,{' '}
+            <Button
+              onClick={() => {
+                setProjectState(DEFAULT_PROJECT);
+                setUrlState({
+                  projectId: DEFAULT_PROJECT.projectName,
+                  page: 0,
+                  view: 'editor',
+                });
+              }}
+            >
+              load the example project
+            </Button>{' '}
+            to get a feel for what DataStation can do.
+          </p>
+        )}
       </div>
     );
   }

diff --git a/ui/Panel.tsx b/ui/Panel.tsx
@@ -276,7 +276,6 @@ export function Panel({
               details ? 'panel-header--open' : ''
             } vertical-align-center`}
           >
-            <span className="text-muted">#{panelIndex}</span>
             <span title="Move Up">
               <Button
                 icon
@@ -328,7 +327,7 @@ export function Panel({
               label="Name"
               className="panel-name"
               autoWidth
-              placeholder={`Untitled panel #${panelIndex}`}
+              placeholder={`Untitled panel #${panels.length + 1}`}
               onChange={(value: string) => {
                 panel.name = value;
                 updatePanel(panel);

diff --git a/ui/PanelList.tsx b/ui/PanelList.tsx
@@ -48,7 +48,7 @@ export function PanelList({
         <Button
           onClick={() => {
             const panel = new ProgramPanelInfo({
-              name: `Untitled panel #${panelIndex + 1}`,
+              name: `Untitled panel #${page.panels.length + 1}`,
               type: 'python',
             });
             page.panels.splice(panelIndex + 1, 0, panel);

diff --git a/ui/app.tsx b/ui/app.tsx
@@ -26,7 +26,7 @@ import { UrlStateContext, useUrlState } from './urlState';
 if (MODE === 'browser') {
   Object.values(LANGUAGES).map((l) => {
     if (l.inMemoryInit) {
-      l.inMemoryInit();
+      // These can be really big, so run it out of band                                                                                     setTimeout(() => l.inMemoryInit(), 0);
     }
   });
 }
@@ -44,7 +44,7 @@ function useProjectState(
       Object.setPrototypeOf(c, ProjectState.prototype);
       setProjectState(c);
     },
-    [projectId, store]
+    [projectId, store, setProjectState]
   );
 
   // Re-read state when projectId changes
@@ -184,7 +184,7 @@ export function App() {
     if (!MODE_FEATURES.useDefaultProject) {
       main = <MakeSelectProject />;
     }
-  } else if (urlState.projectId) {
+  } else {
     // This allows us to render the sidebar in tests where we
     // prepopulate connectors and servers
     const hasSidebar = Boolean(

diff --git a/ui/panels/ProgramPanel.tsx b/ui/panels/ProgramPanel.tsx
@@ -126,9 +126,15 @@ export function ProgramInfo({ panel }: { panel: ProgramPanelInfo }) {
   return (
     <React.Fragment>
       Use builtin functions, <code>DM_setPanel($some_array_data)</code> and{' '}
-      <code>DM_getPanel($panel_number)</code>, to interact with other panels.
-      For example:{' '}
-      <code>const passthrough = DM_getPanel(0); DM_setPanel(passthrough);</code>
+      <code>DM_getPanel($panel_number_or_name)</code>, to interact with other
+      panels. For example:{' '}
+      <code>const passthrough = DM_getPanel(0); DM_setPanel(passthrough);</code>{' '}
+      or
+      <code>
+        const passthrough = DM_getPanel('my panel to fetch data');
+        DM_setPanel(passthrough);
+      </code>
+      .
       {panel.program.type === 'julia' && (
         <React.Fragment>
           <br />

diff --git a/ui/style.css b/ui/style.css
@@ -49,8 +49,17 @@ header a {
 
 header .button,
 header a {
-  margin-left: 15px;
   display: inline-block;
+  color: black;
+  font-size: 0.75rem;
+}
+
+header .vertical-align-center a {
+  margin-right: 15px;
+}
+
+header iframe {
+  margin-left: 15px;
 }
 
 [contenteditable='true'] {
@@ -522,6 +531,10 @@ header > div {
 .panel-preview-results {
   margin: 5px;
   font-size: 0.9rem;
+
+  pre {
+    background: transparent !important;
+  }
 }
 
 .panel-out .button:disabled {

diff --git a/ui/urlState.tsx b/ui/urlState.tsx
@@ -53,15 +53,15 @@ export function useUrlState(): [UrlState, (a0: Partial<UrlState>) => void] {
     }
   });
 
-  const setState = React.useCallback(function setState(
-    newState: Partial<UrlState>
-  ) {
-    setStateInternal({
-      ...state,
-      ...newState,
-    });
-  },
-  []);
+  const setState = React.useCallback(
+    function setState(newState: Partial<UrlState>) {
+      setStateInternal({
+        ...state,
+        ...newState,
+      });
+    },
+    [state, setStateInternal]
+  );
 
   return [state, setState];
 }