feat: add variable and expression support to serve props

commands/serve/lib/init-config.js

@@ -47,6 +47,10 @@ const options = {
     type: 'array',
     description: 'Array of scripts to inject',
   },
+  flags: {
+    type: 'array',
+    description: 'Array of flags to enable',
+  },
   stylesheets: {
     type: 'array',
     description: 'Array of stylesheets to inject',

commands/serve/lib/webpack.build.js

@@ -24,7 +24,7 @@ const cfg = ({ srcDir, distDir, dev = false, serveConfig = {} }) => {
       eHub: [path.resolve(srcDir, 'eHub')],
       fixtures: [path.resolve(__dirname, './fixtures.js')],
     },
-    devtool: dev ? 'eval-cheap-module-source-map' : false,
+    devtool: dev ? 'source-map' : false,
     output: {
       path: distDir,
       filename: '[name].js',

commands/serve/package.json

@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "build": "cross-env NODE_ENV=production DEFAULTS=true webpack --config ./lib/webpack.build.js",
-    "build:dev": "cross-env DEFAULTS=true webpack --config ./lib/webpack.build.js",
+    "build:dev": "cross-env NODE_ENV=development DEFAULTS=true webpack --config ./lib/webpack.build.js",
     "lint": "eslint web",
     "prepublishOnly": "rm -rf dist && yarn run build"
   },

commands/serve/web/components/App.jsx

@@ -325,7 +325,13 @@ export default function App({ app, info }) {
                             padding: 0,
                           }}
                         >
-                          <Properties sn={sn} viz={activeViz} isTemp={!objectListMode} storage={storage} />
+                          <Properties
+                            sn={sn}
+                            viz={activeViz}
+                            isTemp={!objectListMode}
+                            storage={storage}
+                            flags={info.flags}
+                          />
                         </Grid>
                       )}
                     </Grid>

commands/serve/web/components/AutoComponents.jsx

@@ -14,9 +14,11 @@ import {
   Accordion,
   AccordionSummary,
   AccordionDetails,
+  InputAdornment,
 } from '@mui/material';
 
 import { ExpandMore } from '@nebula.js/ui/icons';
+import Variable from './property-panel/Variable';
 
 const PREFIX = 'AutoComponents';
 
@@ -50,10 +52,19 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
   },
 }));
 
-const getType = (value) => {
+const getType = (value, key) => {
   if (Array.isArray(value)) {
     return 'array';
   }
+
+  if (key === 'variable' && enableExpressions) {
+    return 'variable';
+  }
+
+  if (value && typeof value === 'object' && 'qStringExpression' in value && enableExpressions) {
+    return 'expression';
+  }
+
   if (typeof value === 'boolean') {
     return 'boolean';
   }
@@ -113,13 +124,41 @@ function Num({ property, value, target, changed }) {
   return <TextField variant="standard" fullWidth onChange={handleChange} onBlur={onBlur} label={property} value={s} />;
 }
 
-function Obj({ property, value, changed }) {
+function Expression({ property, value, target, changed }) {
+  const initial = value.qStringExpression && value.qStringExpression.qExpr ? value.qStringExpression.qExpr : '';
+  const [s, setS] = useState(initial);
+  const handleChange = (e) => {
+    setS(e.target.value);
+  };
+  const onBlur = () => {
+    if (s !== value) {
+      target[property].qStringExpression = { qExpr: `=${s}` };
+      changed();
+    }
+  };
+
+  return (
+    <TextField
+      variant="standard"
+      InputProps={{
+        startAdornment: <InputAdornment position="start">=</InputAdornment>,
+      }}
+      fullWidth
+      onChange={handleChange}
+      onBlur={onBlur}
+      label={property}
+      value={s}
+    />
+  );
+}
+
+function Obj({ property, value, changed, app }) {
   return (
     <StyledAccordion square className={classes.root}>
       <AccordionSummary expandIcon={<ExpandMore />} className={classes.summary}>
         <Typography>{property}</Typography>
       </AccordionSummary>
-      <AccordionDetails className={classes.details}>{generateComponents(value, changed)}</AccordionDetails>
+      <AccordionDetails className={classes.details}>{generateComponents(value, changed, app)}</AccordionDetails>
     </StyledAccordion>
   );
 }
@@ -129,24 +168,36 @@ const registeredComponents = {
   string: Str,
   object: Obj,
   number: Num,
+  expression: Expression,
+  variable: Variable,
 };
 
 const QRX = /^q[A-Z]/;
 
-export default function generateComponents(properties, changed) {
+const whiteListedQ = {};
+
+let enableExpressions = false;
+
+export default function generateComponents(properties, changed, app, flags) {
+  if (flags && flags.PP_EXPRESSIONS) {
+    enableExpressions = true;
+    whiteListedQ.qStringExpression = true;
+  }
+
   const components = Object.keys(properties)
     .map((key) => {
       if (['visualization', 'version'].indexOf(key) !== -1) {
         return false;
       }
-      if (QRX.test(key)) {
-        // skip q properties for now
+      if (!whiteListedQ[key] && QRX.test(key)) {
+        // skip q properties for now, but allow qStringExpression
         return false;
       }
-      const type = getType(properties[key]);
+      const type = getType(properties[key], key);
       if (!registeredComponents[type]) {
         return false;
       }
+
       return {
         Component: registeredComponents[type],
         property: key,
@@ -161,7 +212,14 @@ export default function generateComponents(properties, changed) {
     <StyledGrid container direction="column" gap={0} alignItems="stretch">
       {components.map((c) => (
         <Grid item xs key={c.key} style={{ width: '100%' }}>
-          <c.Component key={c.key} property={c.property} value={c.value} target={properties} changed={changed} />
+          <c.Component
+            key={c.key}
+            app={app}
+            property={c.property}
+            value={c.value}
+            target={properties}
+            changed={changed}
+          />
         </Grid>
       ))}
     </StyledGrid>

commands/serve/web/components/FieldsPopover.jsx

@@ -142,7 +142,7 @@ export default function FieldsPopover({ alignTo, show, close, onSelected, type }
       open={show}
       onClose={close}
       anchorEl={alignTo.current}
-      marginThreshold={theme.spacing(1)}
+      marginThreshold={16} // theme.spacing(1)
       elevation={3}
       anchorOrigin={{
         vertical: 'bottom',

commands/serve/web/components/Properties.jsx

@@ -1,14 +1,16 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useContext } from 'react';
 
 import { Divider, Grid, Checkbox, FormControlLabel } from '@mui/material';
 
 import usePropertiesById from '@nebula.js/nucleus/src/hooks/usePropertiesById';
 
+import AppContext from '../contexts/AppContext';
 import Data from './property-panel/Data';
 import generateComponents from './AutoComponents';
 
-export default function Properties({ viz, sn, isTemp, storage }) {
+export default function Properties({ viz, sn, isTemp, storage, flags }) {
   const [properties, setProperties] = usePropertiesById(viz.id);
+  const app = useContext(AppContext);
 
   const [isReadCacheEnabled, setReadCacheEnabled] = useState(storage.get('readFromCache') !== false);
 
@@ -51,7 +53,7 @@ export default function Properties({ viz, sn, isTemp, storage }) {
         </>
       )}
       <Data properties={properties} setProperties={setProperties} sn={sn} />
-      {generateComponents(properties, changed)}
+      {generateComponents(properties, changed, app, flags)}
     </div>
   );
 }

commands/serve/web/components/property-panel/Variable.jsx

@@ -0,0 +1,73 @@
+/* eslint no-param-reassign:0 */
+import React, { useState, useEffect } from 'react';
+
+import { Select, FormControl, MenuItem } from '@mui/material';
+
+let variableList = null;
+
+async function getVariables(app) {
+  if (!variableList) {
+    variableList = await app.createSessionObject({
+      qInfo: {
+        qType: 'VariableList',
+      },
+      qVariableListDef: {
+        qType: 'variable',
+        qShowReserved: false,
+        qShowConfig: false,
+      },
+    });
+  }
+  const reply = await variableList.getLayout();
+
+  const list = reply.qVariableList.qItems.map((item) => ({
+    value: item.qName,
+    label: item.qName.length > 50 ? `${item.qName.slice(0, 50)}...` : item.qName,
+  }));
+
+  return list;
+}
+// variable, {name, value}, properties
+export default function Variable({ property, value, target, changed, app }) {
+  const [s, setS] = useState(value.name);
+  const [l, setL] = useState([]);
+
+  useEffect(() => {
+    async function fetchData() {
+      const list = await getVariables(app);
+      setL(list);
+    }
+    fetchData();
+  }, []);
+
+  const handleChange = (e) => {
+    setS(e.target.value);
+    target[property].name = e.target.value;
+    target[property].value = { qStringExpression: { qExpr: `$(${e.target.value})` } };
+    changed();
+  };
+  return l.length === 0 ? (
+    <em>No variables in app</em>
+  ) : (
+    <FormControl size="small" fullWidth>
+      <Select
+        onChange={handleChange}
+        displayEmpty
+        fullWidth
+        value={s}
+        renderValue={(selected) => {
+          if (selected.length === 0) {
+            return <em>Select a variable</em>;
+          }
+          return selected;
+        }}
+      >
+        {l.map((c) => (
+          <MenuItem key={c.value} value={c.value}>
+            {c.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}