Dynamic Card titles

src/card/settings/custom/CardSettingsContentPropertySelect.tsx

@@ -98,7 +98,7 @@ const NeoCardSettingsContentPropertySelect = ({
   function handlePropertyNameSelectionUpdate(newValue) {
     onReportSettingUpdate('propertyType', newValue);
     if (newValue && settings.entityType) {
-      const newParameterName = `neodash_$${settings.entityType}_${newValue}`;
+      const newParameterName = `neodash_${settings.entityType}_${newValue}`;
       const formattedParameterId = formatParameterId(settings.id);
       const cleanedParameter = cleanParameter(newParameterName + formattedParameterId);
 
@@ -113,9 +113,8 @@ const NeoCardSettingsContentPropertySelect = ({
     onReportSettingUpdate('id', `${newValue}`);
     if (settings.propertyType && settings.entityType) {
       const newParameterName = `neodash_${settings.entityType}_${settings.propertyType}`;
-      const formattedParameterId = formatParameterId(settings.id);
+      const formattedParameterId = formatParameterId(`${newValue}`);
       const cleanedParameter = cleanParameter(newParameterName + formattedParameterId);
-
       handleReportQueryUpdate(cleanedParameter, settings.entityType, settings.propertyType);
     }
   }

src/card/view/CardView.tsx

@@ -42,6 +42,22 @@ const NeoCardView = ({
   const cardHeight = heightPx - CARD_FOOTER_HEIGHT;
   const ref = React.useRef();
 
+  const getLocalParameters = (parse_string): any => {
+    let re = /(?:^|\W)\$(\w+)(?!\w)/g;
+      let match;
+      let localQueryVariables: string[] = [];
+    while ((match = re.exec(parse_string))) {
+      localQueryVariables.push(match[1]);
+    }
+
+    if (!globalParameters) {
+      return {};
+    }
+    return Object.fromEntries(
+      Object.entries(globalParameters).filter(([local]) => localQueryVariables.includes(local))
+    );
+  };
+
   // @ts-ignore
   const reportHeader = (
     <NeoCardViewHeader
@@ -56,6 +72,7 @@ const NeoCardView = ({
       onDownloadImage={() => downloadComponentAsImage(ref)}
       onToggleCardExpand={onToggleCardExpand}
       expanded={expanded}
+      parameters={getLocalParameters(title)}
     ></NeoCardViewHeader>
   );
 
@@ -85,22 +102,17 @@ const NeoCardView = ({
     return globalParameters ? globalParameters[key] : undefined;
   };
 
-  const getLocalParameters = (): any => {
-    if (!globalParameters) {
-      return {};
-    }
-
-    let re = /(?:^|\W|%20)\$(\w+)(?!\w)/g;
-    let match;
-    let localQueryVariables: string[] = [];
-    while ((match = re.exec(query))) {
-      localQueryVariables.push(match[1]);
-    }
-
-    return Object.fromEntries(
-      Object.entries(globalParameters).filter(([local]) => localQueryVariables.includes(local))
-    );
-  };
+  // ONLY if the 'actions' extension is enabled, we send 'actionsRules' to the table visualization.
+  const filteredSettings = Object.fromEntries(
+    Object.entries(settings).filter(
+      ([k, _]) =>
+        !(
+          k == 'actionsRules' &&
+          dashboardSettings.extensions != null &&
+          !dashboardSettings.extensions.includes('actions')
+        )
+    )
+  );
 
   // TODO - understand why CardContent is throwing a warning based on this style config.
   const cardContentStyle = {
@@ -126,7 +138,7 @@ const NeoCardView = ({
         <NeoReport
           query={query}
           database={database}
-          parameters={getLocalParameters()}
+          parameters={getLocalParameters(query)}
           extensions={extensions}
           disabled={settingsOpen}
           selection={selection}

src/card/view/CardViewHeader.tsx

@@ -26,13 +26,34 @@ const NeoCardViewHeader = ({
   onDownloadImage,
   onToggleCardExpand,
   expanded,
+  parameters,
 }) => {
   const [text, setText] = React.useState(title);
+  const [parsedText, setParsedText] = React.useState(title);
+  const [editing, setEditing] = React.useState(false);
   const [descriptionModalOpen, setDescriptionModalOpen] = React.useState(false);
 
+  function replaceParamsOnString(s, p) {
+    let parsed = `${s} `;
+    for (const [key, value] of Object.entries(p)) {
+      // TODO: make this a regex.
+      parsed = parsed.replace(`$${key} `, `${value} `);
+      parsed = parsed.replace(`$${key},`, `${value},`);
+      parsed = parsed.replace(`$${key}.`, `${value}.`);
+    }
+    return parsed;
+  }
+
   // Ensure that we only trigger a text update event after the user has stopped typing.
   const debouncedTitleUpdate = useCallback(debounce(onTitleUpdate, 250), []);
 
+  useEffect(() => {
+    let titleParsed = replaceParamsOnString(`${title}`, parameters);
+    if (!editing) {
+      setParsedText(titleParsed);
+    }
+  }, [editing, parameters]);
+
   useEffect(() => {
     // Reset text to the dashboard state when the page gets reorganized.
     if (text !== title) {
@@ -58,13 +79,19 @@ const NeoCardViewHeader = ({
             <td style={{ width: '100%' }}>
               <TextField
                 id='standard-outlined'
+                onFocus={() => {
+                  setEditing(true);
+                }}
+                onBlur={() => {
+                  setEditing(false);
+                }}
                 className={'no-underline large'}
                 label=''
                 disabled={!editable}
                 placeholder='Report name...'
                 fullWidth
                 maxRows={4}
-                value={text}
+                value={editing ? text : parsedText}
                 onChange={(event) => {
                   setText(event.target.value);
                   debouncedTitleUpdate(event.target.value);

src/chart/parameter/ParameterSelectionChart.tsx

@@ -108,7 +108,9 @@ const NeoParameterSelectionChart = (props: ChartProps) => {
             setInputText(`${value}`);
             debouncedQueryCallback(query, { input: `${value}` }, setExtraRecords);
           }}
-          getOptionSelected={(option, value) => (option && option.toString()) === (value && value.toString())}
+          getOptionSelected={(option, value) => {
+            return (option && option.toString()) === (value && value.toString());
+          }}
           value={value !== null ? value.toString() : `${currentValue}`}
           onChange={(event, newValue) => {
             setValue(newValue);

yarn.lock

@@ -3595,12 +3595,12 @@ d3-color@1:
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a"
   integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
 
-"d3-color@1 - 2":
+"d3-color@1 - 2", d3-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
   integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
 
-"d3-color@1 - 3", d3-color@^3.0.0:
+"d3-color@1 - 3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==