{"version":3,"file":"JSONCell.mjs","sources":["../../../../../../src/components/Table/TableNG/Cells/JSONCell.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { Property } from 'csstype';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../../themes';\nimport { Button, clearLinkButtonStyles } from '../../../Button';\nimport { DataLinksContextMenu } from '../../../DataLinks/DataLinksContextMenu';\nimport { JSONCellProps } from '../types';\nimport { getCellLinks } from '../utils';\n\nexport const JSONCell = ({ value, justifyContent, field, rowIdx }: JSONCellProps) => {\n  const styles = useStyles2(getStyles, justifyContent);\n  const clearButtonStyle = useStyles2(clearLinkButtonStyles);\n\n  let displayValue = value;\n\n  // Handle string values that might be JSON\n  if (typeof value === 'string') {\n    try {\n      const parsed = JSON.parse(value);\n      displayValue = JSON.stringify(parsed, null, ' ');\n    } catch {\n      displayValue = value; // Keep original if not valid JSON\n    }\n  } else {\n    // For non-string values, stringify them\n    try {\n      displayValue = JSON.stringify(value, null, ' ');\n    } catch (error) {\n      // Handle circular references or other stringify errors\n      displayValue = String(value);\n    }\n  }\n\n  const hasLinks = Boolean(getCellLinks(field, rowIdx)?.length);\n\n  // TODO: Implement actions\n  return (\n    <div className={styles.jsonText}>\n      {hasLinks ? (\n        <DataLinksContextMenu links={() => getCellLinks(field, rowIdx) || []}>\n          {(api) => {\n            if (api.openMenu) {\n              return (\n                <Button className={cx(clearButtonStyle)} onClick={api.openMenu}>\n                  {displayValue}\n                </Button>\n              );\n            } else {\n              return <>{displayValue}</>;\n            }\n          }}\n        </DataLinksContextMenu>\n      ) : (\n        displayValue\n      )}\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2, justifyContent: Property.JustifyContent) => ({\n  jsonText: css({\n    display: 'flex',\n    cursor: 'pointer',\n    fontFamily: 'monospace',\n    justifyContent: justifyContent,\n  }),\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWO,MAAM,WAAW,CAAC,EAAE,OAAO,cAAgB,EAAA,KAAA,EAAO,QAA4B,KAAA;AAXrF,EAAA,IAAA,EAAA;AAYE,EAAM,MAAA,MAAA,GAAS,UAAW,CAAA,SAAA,EAAW,cAAc,CAAA;AACnD,EAAM,MAAA,gBAAA,GAAmB,WAAW,qBAAqB,CAAA;AAEzD,EAAA,IAAI,YAAe,GAAA,KAAA;AAGnB,EAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,IAAI,IAAA;AACF,MAAM,MAAA,MAAA,GAAS,IAAK,CAAA,KAAA,CAAM,KAAK,CAAA;AAC/B,MAAA,YAAA,GAAe,IAAK,CAAA,SAAA,CAAU,MAAQ,EAAA,IAAA,EAAM,GAAG,CAAA;AAAA,KACzC,CAAA,OAAA,CAAA,EAAA;AACN,MAAe,YAAA,GAAA,KAAA;AAAA;AACjB,GACK,MAAA;AAEL,IAAI,IAAA;AACF,MAAA,YAAA,GAAe,IAAK,CAAA,SAAA,CAAU,KAAO,EAAA,IAAA,EAAM,GAAG,CAAA;AAAA,aACvC,KAAO,EAAA;AAEd,MAAA,YAAA,GAAe,OAAO,KAAK,CAAA;AAAA;AAC7B;AAGF,EAAA,MAAM,WAAW,OAAQ,CAAA,CAAA,EAAA,GAAA,YAAA,CAAa,OAAO,MAAM,CAAA,KAA1B,mBAA6B,MAAM,CAAA;AAG5D,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,QAAA,EACpB,qCACE,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,MAAM,aAAa,KAAO,EAAA,MAAM,KAAK,EAAC,EAChE,WAAC,GAAQ,KAAA;AACR,IAAA,IAAI,IAAI,QAAU,EAAA;AAChB,MACE,uBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,EAAA,CAAG,gBAAgB,CAAG,EAAA,OAAA,EAAS,GAAI,CAAA,QAAA,EACnD,QACH,EAAA,YAAA,EAAA,CAAA;AAAA,KAEG,MAAA;AACL,MAAA,uCAAU,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA;AACzB,GACF,EACF,IAEA,YAEJ,EAAA,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,cAA6C,MAAA;AAAA,EACpF,UAAU,GAAI,CAAA;AAAA,IACZ,OAAS,EAAA,MAAA;AAAA,IACT,MAAQ,EAAA,SAAA;AAAA,IACR,UAAY,EAAA,WAAA;AAAA,IACZ;AAAA,GACD;AACH,CAAA,CAAA;;;;"}