chore: cleanup viz (#433)

qlik-oss · May 27, 2020 · 237e656 · 237e656
1 parent 97d0811
commit 237e656
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 34 deletions.
diff --git a/apis/nucleus/src/hooks/usePropertiesById.js b/apis/nucleus/src/hooks/usePropertiesById.js
@@ -0,0 +1,9 @@
+import useRpc from './useRpc';
+import { useModelStore } from '../stores/modelStore';
+
+export default function usePropertiesById(id) {
+  const [modelStore] = useModelStore();
+  const model = modelStore.get(id);
+  const [properties, ...rest] = useRpc(model, 'getProperties');
+  return [properties, (p) => model.setProperties(p), ...rest];
+}
diff --git a/apis/nucleus/src/object/create-session-object.js b/apis/nucleus/src/object/create-session-object.js
@@ -1,6 +1,6 @@
 import populateData from './populator';
 import init from './initiate';
-import { subscribe } from '../stores/modelStore';
+import { subscribe, modelStore } from '../stores/modelStore';
 /**
  * @interface CreateConfig
  * @extends BaseConfig
@@ -43,10 +43,12 @@ export default async function createSessionObject({ type, version, fields, prope
     // console.error(e); // eslint-disable-line
   }
   const model = await halo.app.createSessionObject(mergedProps);
+  modelStore.set(model.id, model);
   const unsubscribe = subscribe(model);
   const onDestroy = async () => {
     await halo.app.destroySessionObject(model.id);
     unsubscribe();
+    modelStore.set(model.id, undefined);
   };
   return init(model, { options, element }, halo, error, onDestroy);
 }
diff --git a/apis/nucleus/src/viz.js b/apis/nucleus/src/viz.js
@@ -46,7 +46,7 @@ export default function viz({ model, halo, initialError, onDestroy = async () =>
    * ctl.destroy();
    */
   const api = /** @lends SupernovaController# */ {
-    model, // TODO - remove
+    id: model.id,
     mount(element) {
       if (mountedReference) {
         throw new Error('Already mounted');
@@ -69,7 +69,6 @@ export default function viz({ model, halo, initialError, onDestroy = async () =>
      * ctl.destroy();
      */
     async destroy() {
-      // TODO - destroy session object (if created as such)
       await onDestroy();
       unmountCell();
       unmountCell = noopi;
@@ -84,7 +83,6 @@ export default function viz({ model, halo, initialError, onDestroy = async () =>
     },
     options(opts) {
       setSnOptions(opts);
-      // return api;
     },
     exportImage() {
       // TODO - check if exportable

diff --git a/commands/serve/web/components/Properties.jsx b/commands/serve/web/components/Properties.jsx
@@ -2,13 +2,13 @@ import React, { useCallback, useState } from 'react';
 
 import { Divider, Grid, Checkbox, FormControlLabel } from '@material-ui/core';
 
-import useProperties from '@nebula.js/nucleus/src/hooks/useProperties';
+import usePropertiesById from '@nebula.js/nucleus/src/hooks/usePropertiesById';
 
 import Data from './property-panel/Data';
 import generateComponents from './AutoComponents';
 
 export default function Properties({ viz, sn, isTemp, storage }) {
-  const [properties] = useProperties(viz.model);
+  const [properties, setProperties] = usePropertiesById(viz.id);
 
   const [isReadCacheEnabled, setReadCacheEnabled] = useState(storage.get('readFromCache') !== false);
 
@@ -18,7 +18,7 @@ export default function Properties({ viz, sn, isTemp, storage }) {
   };
 
   const changed = useCallback(() => {
-    viz.model.setProperties(properties);
+    setProperties(properties);
   }, [viz, sn, properties]);
 
   if (!sn) {
@@ -50,7 +50,7 @@ export default function Properties({ viz, sn, isTemp, storage }) {
           <Divider />
         </>
       )}
-      <Data properties={properties} model={viz.model} sn={sn} />
+      <Data properties={properties} setProperties={setProperties} sn={sn} />
       {generateComponents(properties, changed)}
     </div>
   );

diff --git a/commands/serve/web/components/Stage.jsx b/commands/serve/web/components/Stage.jsx
@@ -1,17 +1,18 @@
 import React, { useEffect, useState, useContext } from 'react';
-import useProperties from '@nebula.js/nucleus/src/hooks/useProperties';
 
 import { Grid } from '@material-ui/core';
 
+import usePropertiesById from '@nebula.js/nucleus/src/hooks/usePropertiesById';
+
 import Cell from './Cell';
 import NebulaContext from '../contexts/NebulaContext';
 import VizContext from '../contexts/VizContext';
 
 export default function Stage({ info, storage, uid }) {
   const nebbie = useContext(NebulaContext);
-  const [model, setModel] = useState(null);
-  const [properties] = useProperties(model);
+  const [hasViz, setHasViz] = useState(false);
   const { setActiveViz } = useContext(VizContext);
+  const [properties] = usePropertiesById(uid);
 
   useEffect(() => {
     if (!uid) {
@@ -28,8 +29,8 @@ export default function Stage({ info, storage, uid }) {
       },
     });
     res.then((v) => {
-      setModel(v.model);
       setActiveViz(v);
+      setHasViz(true);
     });
     return () => {
       res.then((v) => v.destroy());
@@ -41,22 +42,20 @@ export default function Stage({ info, storage, uid }) {
     storage.props(info.supernova.name, properties);
   }, [properties]);
 
-  if (!model) {
-    return null;
-  }
-
   return (
-    <Grid
-      item
-      container
-      justify="center"
-      style={{
-        height: '100%',
-      }}
-    >
-      <Grid item xs>
-        <Cell id={model.id} />
+    hasViz && (
+      <Grid
+        item
+        container
+        justify="center"
+        style={{
+          height: '100%',
+        }}
+      >
+        <Grid item xs>
+          <Cell id={uid} />
+        </Grid>
       </Grid>
-    </Grid>
+    )
   );
 }
diff --git a/commands/serve/web/components/property-panel/Data.jsx b/commands/serve/web/components/property-panel/Data.jsx
@@ -4,7 +4,7 @@ import { List, ListItem, Typography } from '@material-ui/core';
 
 import HyperCube from './HyperCube';
 
-export default function Data({ model, sn, properties }) {
+export default function Data({ setProperties, sn, properties }) {
   if (!sn) {
     return null;
   }
@@ -19,7 +19,7 @@ export default function Data({ model, sn, properties }) {
     <List>
       {targets.map((t) => (
         <ListItem key={t.propertyPath} divider disableGutters>
-          <HyperCube target={t} properties={properties} model={model} />
+          <HyperCube target={t} properties={properties} setProperties={setProperties} />
         </ListItem>
       ))}
     </List>

diff --git a/commands/serve/web/components/property-panel/HyperCube.jsx b/commands/serve/web/components/property-panel/HyperCube.jsx
@@ -25,7 +25,7 @@ const getValue = (data, reference, defaultValue) => {
   return dataContainer;
 };
 
-export default function HyperCube({ model, target, properties }) {
+export default function HyperCube({ setProperties, target, properties }) {
   const handler = useMemo(
     () =>
       hcHandler({
@@ -38,22 +38,22 @@ export default function HyperCube({ model, target, properties }) {
 
   const onDimensionAdded = (a) => {
     handler.addDimension(typeof a === 'object' ? { qLibraryId: a.qId } : a);
-    model.setProperties(properties);
+    setProperties(properties);
   };
 
   const onDimensionRemoved = (idx) => {
     handler.removeDimension(idx);
-    model.setProperties(properties);
+    setProperties(properties);
   };
 
   const onMeasureAdded = (a) => {
     handler.addMeasure(typeof a === 'object' ? { qLibraryId: a.qId } : a);
-    model.setProperties(properties);
+    setProperties(properties);
   };
 
   const onMeasureRemoved = (idx) => {
     handler.removeMeasure(idx);
-    model.setProperties(properties);
+    setProperties(properties);
   };
 
   return (