Dimensions and Metrics Explorer UX update

package.json

@@ -44,21 +44,23 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^4.8.0",
     "react-json-view": "^1.21.3",
+    "react-markdown": "^9.0.1",
     "react-loader-spinner": "^6.1.6",
     "react-redux": "^8.0.5",
     "react-syntax-highlighter": "^15.5.0",
     "redux": "^4.2.1",
+    "remark-gfm": "^4.0.0",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "use-debounce": "^9.0.4",
     "use-query-params": "^0.4.3"
   },
   "devDependencies": {
+    "@reach/router": "^1.3.4",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.1.8",
     "@types/gapi": "^0.0.39",
     "@types/gapi.auth2": "^0.0.54",
-    "@reach/router": "^1.3.4",
     "@types/gapi.client.analytics": "^3.0.7",
     "@types/gapi.client.analyticsadmin": "^1.0.0",
     "@types/gapi.client.analyticsdata": "^1.0.2",

src/components/ga4/DimensionsMetricsExplorer/Compatible.tsx

@@ -11,6 +11,9 @@ import { navigate } from "gatsby"
 import * as React from "react"
 import QueryExplorerLink from "../QueryExplorer/BasicReport/QueryExplorerLink"
 import { CompatibleHook } from "./useCompatibility"
+import Autocomplete from '@mui/material/Autocomplete';
+import {Dimension, Metric} from '@/components/ga4/DimensionsMetricsExplorer/useDimensionsAndMetrics';
+import TextField from '@mui/material/TextField';
 
 const PREFIX = 'Compatible';
 
@@ -23,9 +26,9 @@ const classes = {
 };
 
 const StyledPaper = styled(Paper)((
-  {
-    theme
-  }
+    {
+      theme
+    }
 ) => ({
   [`&.${classes.compatible}`]: {
     padding: theme.spacing(2),
@@ -56,89 +59,148 @@ const StyledPaper = styled(Paper)((
   }
 }));
 
-const WithProperty: React.FC<
-  CompatibleHook & { property: PropertySummary | undefined }
-> = ({
-  dimensions,
-  metrics,
-  removeMetric,
-  removeDimension,
-  property,
-  hasFieldSelected,
-}) => {
+type CompatibleProps =
+    CompatibleHook
+    & {
+  property: PropertySummary | undefined,
+  allMetrics: Metric[],
+  allDimensions: Dimension[]
+}
+const WithProperty: React.FC<CompatibleProps> = ({
+       dimensions,
+       metrics,
+       removeMetric,
+       removeDimension, setDimensions, setMetrics,
+       property,
+       hasFieldSelected, incompatibleDimensions, incompatibleMetrics,
+       allDimensions,
+       allMetrics,
+     }) => {
 
 
   if (property === undefined) {
     return null
   }
 
   return (
-    <>
-      <Typography>
-        As you choose dimensions & metrics (by clicking the checkbox next to
-        their name), they will be added here. Incompatible dimensions & metrics
-        will be grayed out.
-      </Typography>
-      <div className={classes.chipGrid}>
-        <Typography className={classes.chipLabel}>Dimensions:</Typography>
-        <div className={classes.chips}>
-          {dimensions !== undefined && dimensions.length > 0
-            ? dimensions.map(d => (
-                <Chip
-                  variant="outlined"
-                  key={d.apiName}
-                  label={d.apiName}
-                  onClick={() => navigate(`#${d.apiName}`)}
-                  onDelete={() => removeDimension(d)}
-                />
-              ))
-            : "No dimensions selected."}
-        </div>
-        <Typography className={classes.chipLabel}>Metrics:</Typography>
-        <div className={classes.chips}>
-          {metrics !== undefined && metrics.length > 0
-            ? metrics?.map(m => (
-                <Chip
-                  variant="outlined"
-                  key={m.apiName}
-                  label={m.apiName}
-                  onDelete={() => removeMetric(m)}
-                />
-              ))
-            : "No metrics selected."}
-        </div>
-      </div>
-      {hasFieldSelected && (
+      <>
         <Typography>
-          Use these fields in the{" "}
-          <QueryExplorerLink dimensions={dimensions} metrics={metrics} />
+          As you choose dimensions & metrics, they will be added here.
+          Incompatible dimensions & metrics will be grayed out.
         </Typography>
-      )}
-    </>
+        <div className={classes.chipGrid}>
+          <Typography className={classes.chipLabel}>Dimensions:</Typography>
+          <div className={classes.chips}>
+            <Autocomplete<Dimension, true>
+                fullWidth
+                autoComplete
+                multiple
+                isOptionEqualToValue={(a, b) => a.apiName === b.apiName}
+                onChange={(event, value) => setDimensions(value)}
+                value={dimensions || []}
+                options={allDimensions}
+                getOptionDisabled={(option) =>
+                     incompatibleDimensions?.find(d => d.apiName === option.apiName) !== undefined
+                }
+                getOptionLabel={dimension => `${dimension.apiName}: ${dimension.uiName}` || ""}
+                renderInput={params => (
+                    <TextField
+                        {...params}
+                        size="small"
+                        variant="outlined"
+                        helperText={
+                          <>
+                            Select dimensions.
+                          </>
+                        }
+                    />
+                )}
+                renderTags={(tagValue, getTagProps) =>
+                    tagValue.map((option, index) => {
+                      return (
+                          <Chip
+                              key={option.apiName}
+                              label={option.apiName}
+                              onClick={() => navigate(`#${option.apiName}`)}
+                              onDelete={() => removeDimension(option)}
+                          />
+                      );
+                    })
+                }
+            />
+          </div>
+          <Typography className={classes.chipLabel}>Metrics:</Typography>
+          <div className={classes.chips}>
+            <Autocomplete<Metric, true>
+                fullWidth
+                autoComplete
+                multiple
+                isOptionEqualToValue={(a, b) => a.apiName === b.apiName}
+                onChange={(event, value) => setMetrics(value)}
+                value={metrics || []}
+                options={allMetrics}
+                getOptionDisabled={(option) =>
+                    incompatibleMetrics?.find(d => d.apiName === option.apiName) !== undefined
+                }
+                getOptionLabel={metric => `${metric.apiName}: ${metric.uiName}` || ""}
+                renderInput={params => (
+                    <TextField
+                        {...params}
+                        size="small"
+                        variant="outlined"
+                        helperText={
+                          <>
+                            Select metrics.
+                          </>
+                        }
+                    />
+                )}
+                renderTags={(tagValue, getTagProps) =>
+                    tagValue.map((option, index) => {
+                      return (
+                          <Chip
+                              key={option.apiName}
+                              label={option.apiName}
+                              onClick={() => navigate(`#${option.apiName}`)}
+                              onDelete={() => removeMetric(option)}
+                          />
+                      );
+                    })
+                }
+            />
+          </div>
+        </div>
+        {hasFieldSelected && (
+            <Typography>
+              Use these fields in the{" "}
+              <QueryExplorerLink dimensions={dimensions} metrics={metrics} />
+            </Typography>
+        )}
+      </>
   )
 }
 
 const Compatible: React.FC<
-  CompatibleHook & { property: PropertySummary | undefined }
+    CompatibleHook & {  allDimensions: Dimension[], allMetrics: Metric[], property: PropertySummary | undefined }
 > = props => {
 
   const { reset, property, hasFieldSelected } = props
 
   return (
-    <StyledPaper className={classes.compatible}>
-      <Typography variant="h3">
-        Compatible Fields
-        <IconButton disabled={!hasFieldSelected} onClick={reset}>
-          <Replay />
-        </IconButton>
-      </Typography>
-      <WithProperty {...props} property={property} />
-      {property === undefined && (
-        <Typography>
-          Pick a property above to enable this functionality.
+      <StyledPaper className={classes.compatible}>
+        <Typography variant="h3">
+          Compatible Fields
+          <IconButton disabled={!hasFieldSelected} onClick={reset}>
+            <Replay />
+          </IconButton>
         </Typography>
-      )}
-    </StyledPaper>
+        <WithProperty {...props} property={property} />
+        {property === undefined && (
+            <Typography>
+              Pick a property above to enable this functionality.
+            </Typography>
+        )}
+      </StyledPaper>
   );
 }
 

src/components/ga4/DimensionsMetricsExplorer/Field.tsx

@@ -1,18 +1,20 @@
 import * as React from "react"
 
-import { styled } from '@mui/material/styles';
+import {styled} from '@mui/material/styles';
 
 import IconLink from "@mui/icons-material/Link"
 import Typography from "@mui/material/Typography"
 
 import InlineCode from "@/components/InlineCode"
-import { CopyIconButton } from "@/components/CopyButton"
+import {CopyIconButton} from "@/components/CopyButton"
 import ExternalLink from "@/components/ExternalLink"
-import { Dimension, Metric } from "./useDimensionsAndMetrics"
-import { QueryParam } from "."
-import { AccountSummary, PropertySummary } from "@/types/ga4/StreamPicker"
+import {Dimension, Metric} from "./useDimensionsAndMetrics"
+import {QueryParam} from "."
+import {AccountSummary, PropertySummary} from "@/types/ga4/StreamPicker"
 import LabeledCheckbox from "@/components/LabeledCheckbox"
-import { CompatibleHook } from "./useCompatibility"
+import {CompatibleHook} from "./useCompatibility"
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 const PREFIX = 'Field';
 
@@ -83,7 +85,7 @@
   ],
 ]
 
 const linkifyText = (
   remainingString: string,
   elements: (JSX.Element | string)[]
 ): [string, (JSX.Element | string)[]] => {
@@ -128,7 +130,6 @@
 
 const Field: React.FC<FieldProps> = props => {
 
-
   const {
     field,
     account,
@@ -158,27 +159,6 @@
     return `${baseURL}${search}#${apiName}`
   }, [field, apiName, account, property])
 
-  const withLinks = React.useMemo(() => {
-    let remainingText = description
-    let elements: (JSX.Element | string)[] = []
-    let mightHaveLinks = true
-    while (mightHaveLinks) {
-      const result = linkifyText(remainingText, elements)
-      remainingText = result[0]
-      elements = result[1]
-      if (remainingText === "") {
-        mightHaveLinks = false
-      }
-    }
-    return (
-      <>
-        {elements.map((e, idx) => (
-          <React.Fragment key={idx}>{e}</React.Fragment>
-        ))}
-      </>
-    )
-  }, [description])
-
   const isCompatible = React.useMemo(() => {
     return (
       incompatibleDimensions?.find(d => d.apiName === field.value.apiName) ===
@@ -208,29 +188,34 @@
   }, [checked, addDimension, addMetric, removeDimension, removeMetric, field])
 
   return (
-    <Root id={apiName} key={apiName}>
-      <Typography variant="h4" className={classes.heading}>
-        {property === undefined ? (
-          uiName
-        ) : (
-          <LabeledCheckbox
-            className={classes.headingUIName}
-            checked={checked}
-            onChange={onChange}
-            disabled={!isCompatible}
-          >
-            {uiName}
-          </LabeledCheckbox>
-        )}
-        <InlineCode className={classes.apiName}>{apiName}</InlineCode>
-        <CopyIconButton
-          icon={<IconLink color="primary" />}
-          toCopy={link}
-          tooltipText={`Copy link to ${apiName}`}
-        />
-      </Typography>
-      <Typography>{withLinks}</Typography>
-    </Root>
+      <>
+        {
+          <Root id={apiName} key={apiName}>
+            <Typography variant="h4" className={classes.heading}>
+              {property === undefined ? (
+                  uiName
+              ) : (
+                  <LabeledCheckbox
+                      className={classes.headingUIName}
+                      checked={checked}
+                      onChange={onChange}
+                      disabled={!isCompatible}
+                  >
+                    {uiName}
+                  </LabeledCheckbox>
+              )}
+              <InlineCode className={classes.apiName}>{apiName}</InlineCode>
+              <CopyIconButton
+                  icon={<IconLink color="primary"/>}
+                  toCopy={link}
+                  tooltipText={`Copy link to ${apiName}`}
+              />
+            </Typography>
+            <Typography><Markdown
+                remarkPlugins={[remarkGfm]}>{description}</Markdown></Typography>
+          </Root>
+        }
+      </>
   );
 }