@macrostrat/feedback-components 2.0.3 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.1.1] - 2026-05-08
+
+- Supports global entity id
+
+## [2.1.0] - 2026-04-29
+
+- Fix matched links searching bugs
+- Update stories with correct matched links
+
 ## [2.0.3] - 2026-04-05 [_changes_](https://github.com/UW-Macrostrat/web-components/compare/@macrostrat/feedback-components-v2.0.2...@macrostrat/feedback-components-v2.0.3)
 
 ### Patch Changes

package/dist/extractions/index.cjs

@@ -113,8 +113,7 @@ function EntityTag({
   const { name, type, match } = data;
   const className = classNames__default.default(
     {
-      matched: match != null,
-      type: data.type?.name ?? "lith"
+      matched: match != null
     },
     "entity"
   );

package/dist/extractions/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/extractions/index.ts"],"sourcesContent":["import styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { Tag } from \"@blueprintjs/core\";\nimport type { Entity, EntityExt, Highlight, EntityType } from \"./types\";\nimport { CSSProperties } from \"react\";\nimport { asChromaColor } from \"@macrostrat/color-utils\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useDarkMode } from \"@macrostrat/ui-components\";\n\nexport type { Entity, EntityExt };\n\nconst h = hyper.styled(styles);\n\nexport function buildHighlights(\n  entities: EntityExt[],\n  parent: EntityExt | null,\n): Highlight[] {\n  let highlights = [];\n  let parents = [];\n  if (parent != null) {\n    parents = [parent.id, ...(parent.parents ?? [])];\n  }\n\n  for (const entity of entities) {\n    highlights.push({\n      start: entity.indices[0],\n      end: entity.indices[1],\n      text: entity.name,\n      backgroundColor: entity.type?.color,\n      tag: entity.type?.name ?? \"lith\",\n      id: entity.id,\n      parents,\n      match: entity.match,\n    });\n    highlights.push(...buildHighlights(entity.children ?? [], entity));\n  }\n  return highlights;\n}\n\nexport function enhanceData(extractionData, models, entityTypes) {\n  return {\n    ...extractionData,\n    model: models.get(extractionData.model_id),\n    entities: extractionData.entities?.map((d) =>\n      enhanceEntity(d, entityTypes),\n    ),\n  };\n}\n\nexport function getTagStyle(\n  baseColor: string,\n  options: {\n    highlighted?: boolean;\n    inDarkMode?: boolean;\n    active?: boolean;\n    showMatches?: boolean;\n  } = {},\n): CSSProperties {\n  const _baseColor = asChromaColor(baseColor ?? \"#fff\");\n  const {\n    highlighted = true,\n    inDarkMode = useDarkMode().isEnabled,\n    active = false,\n  } = options;\n\n  let mixAmount = highlighted ? 0.8 : 0.5;\n  let backgroundAlpha = highlighted ? 0.8 : 0.2;\n\n  if (active) {\n    mixAmount = 1;\n    backgroundAlpha = 1;\n  }\n\n  const mixTarget = \"black\";\n\n  const color = active ? \"#000\" : _baseColor.mix(mixTarget, mixAmount).hex();\n  const borderColor = highlighted\n    ? _baseColor.mix(mixTarget, mixAmount / 1.1).hex()\n    : \"transparent\";\n\n  let backgroundColor = active\n    ? _baseColor.alpha(backgroundAlpha).hex()\n    : normalizeColor(_baseColor.alpha(backgroundAlpha).hex());\n\n  // handle white backgrounds in light mode\n  if (!inDarkMode && backgroundColor === \"#ffffff\") {\n    backgroundColor = \"#f0f0f0\";\n  }\n\n  return {\n    color,\n    backgroundColor,\n    boxSizing: \"border-box\",\n    borderStyle: \"solid\",\n    borderColor,\n    borderWidth: \"1.5px\",\n    fontWeight: active ? \"bold\" : \"normal\",\n    fontSize: \"0.9em\",\n  };\n}\n\nfunction enhanceEntity(\n  entity: Entity,\n  entityTypes: Map<number, EntityType>,\n): EntityExt {\n  return {\n    ...entity,\n    type: addColor(entityTypes.get(entity.type), entity.match != null),\n    children: entity.children?.map((d) => enhanceEntity(d, entityTypes)),\n  };\n}\n\nfunction addColor(entityType: EntityType, match = false) {\n  const color = asChromaColor(entityType.color ?? \"#fff\").brighten(\n    match ? 1 : 2,\n  );\n\n  return { ...entityType, color: color.css() };\n}\n\nexport function ExtractionContext({\n  data,\n  entityTypes,\n  matchComponent,\n}: {\n  data: any;\n  entityTypes: Map<number, EntityType>;\n  matchComponent: MatchComponent;\n}) {\n  const highlights = buildHighlights(data.entities, null);\n\n  return h(\"div\", [\n    h(\"p\", h(HighlightedText, { text: data.paragraph_text, highlights })),\n    h(ModelInfo, { data: data.model }),\n    h(\n      \"ul.entities\",\n      data.entities.map((d) => h(ExtractionInfo, { data: d, matchComponent })),\n    ),\n  ]);\n}\n\nexport function ModelInfo({ data }) {\n  if (!data) return null;\n  return h(\"p.model-name\", [\"Model: \", h(\"code.bp6-code\", data.name)]);\n}\n\nexport type MatchComponent = (props: { data: any }) => any;\n\ntype EntityTagProps = {\n  data: EntityExt;\n  highlighted?: boolean;\n  active?: boolean;\n  onClickType?: (type: EntityType) => void;\n  matchComponent?: MatchComponent;\n};\n\nexport function EntityTag({\n  data,\n  highlighted = true,\n  active = false,\n  onClickType,\n  matchComponent = null,\n}: EntityTagProps) {\n  const { name, type, match } = data;\n\n  const className = classNames(\n    {\n      matched: match != null,\n      type: data.type?.name ?? \"lith\",\n    },\n    \"entity\",\n  );\n\n  const style = getTagStyle(type?.color, { highlighted, active });\n\n  let _matchLink = null;\n  if (match != null && matchComponent != null) {\n    _matchLink = h(matchComponent, { data: match });\n  }\n\n  return h(Tag, { style, className }, [\n    h(\"span.entity-name\", name),\n    \" \",\n    h(\n      \"code.entity-type.bp6-code\",\n      {\n        onClick(evt) {\n          if (active && onClickType != null) {\n            onClickType(type);\n            evt.stopPropagation();\n          }\n        },\n      },\n      [type?.name, _matchLink],\n    ),\n  ]);\n}\n\nfunction ExtractionInfo({\n  data,\n  matchComponent = null,\n}: {\n  data: EntityExt;\n  matchComponent: MatchComponent;\n}) {\n  const children = data.children ?? [];\n\n  return h(\"li.entity-row\", [\n    h(EntityTag, { data, matchComponent }),\n    h.if(children.length > 0)([\n      h(\n        \"ul.children\",\n        children.map((d) => h(ExtractionInfo, { data: d, matchComponent })),\n      ),\n    ]),\n  ]);\n}\n\nfunction HighlightedText(props: { text: string; highlights: Highlight[] }) {\n  const { text, highlights = [] } = props;\n  const parts = [];\n  let start = 0;\n\n  const sortedHighlights = highlights.sort((a, b) => a.start - b.start);\n  const deconflictedHighlights = sortedHighlights.map((highlight, i) => {\n    if (i === 0) return highlight;\n    const prev = sortedHighlights[i - 1];\n    if (highlight.start < prev.end) {\n      highlight.start = prev.end;\n    }\n    return highlight;\n  });\n\n  for (const highlight of deconflictedHighlights) {\n    const { start: s, end, ...rest } = highlight;\n    parts.push(text.slice(start, s));\n    parts.push(h(\"span.highlight\", { style: rest }, text.slice(s, end)));\n    start = end;\n  }\n  parts.push(text.slice(start));\n  return h(\"span\", parts);\n}\n\nfunction normalizeColor(hex8) {\n  const background = useDarkMode().isEnabled ? \"#000000\" : \"#ffffff\";\n\n  const r = parseInt(hex8.slice(1, 3), 16);\n  const g = parseInt(hex8.slice(3, 5), 16);\n  const b = parseInt(hex8.slice(5, 7), 16);\n  const a = parseInt(hex8.slice(7, 9), 16) / 255;\n\n  const bgR = parseInt(background.slice(1, 3), 16);\n  const bgG = parseInt(background.slice(3, 5), 16);\n  const bgB = parseInt(background.slice(5, 7), 16);\n\n  const blend = (fg, bg) => Math.round((1 - a) * bg + a * fg);\n\n  const blendedR = blend(r, bgR);\n  const blendedG = blend(g, bgG);\n  const blendedB = blend(b, bgB);\n\n  return (\n    \"#\" +\n    blendedR.toString(16).padStart(2, \"0\") +\n    blendedG.toString(16).padStart(2, \"0\") +\n    blendedB.toString(16).padStart(2, \"0\")\n  );\n}\n\nfunction isHighlighted(id: number, selectedNodes: number[], nodes: any[]) {\n  if (selectedNodes?.length === 0) return true;\n  return (\n    selectedNodes?.includes(id) ||\n    nodes?.some(\n      (node) =>\n        selectedNodes?.includes(node.id) &&\n        node.children.some((child) => child.id === id),\n    )\n  );\n}\n"],"names":["hyper","styles","asChromaColor","useDarkMode","classNames","Tag"],"mappings":";;;;;;;;;;;AAWA,MAAM,IAAIA,eAAAA,QAAM,OAAOC,mBAAM;AAEtB,SAAS,gBACd,UACA,QACa;AACb,MAAI,aAAa,CAAA;AACjB,MAAI,UAAU,CAAA;AACd,MAAI,UAAU,MAAM;AAClB,cAAU,CAAC,OAAO,IAAI,GAAI,OAAO,WAAW,EAAG;AAAA,EACjD;AAEA,aAAW,UAAU,UAAU;AAC7B,eAAW,KAAK;AAAA,MACd,OAAO,OAAO,QAAQ,CAAC;AAAA,MACvB,KAAK,OAAO,QAAQ,CAAC;AAAA,MACrB,MAAM,OAAO;AAAA,MACb,iBAAiB,OAAO,MAAM;AAAA,MAC9B,KAAK,OAAO,MAAM,QAAQ;AAAA,MAC1B,IAAI,OAAO;AAAA,MACX;AAAA,MACA,OAAO,OAAO;AAAA,IAAA,CACf;AACD,eAAW,KAAK,GAAG,gBAAgB,OAAO,YAAY,CAAA,GAAI,MAAM,CAAC;AAAA,EACnE;AACA,SAAO;AACT;AAEO,SAAS,YAAY,gBAAgB,QAAQ,aAAa;AAC/D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,OAAO,OAAO,IAAI,eAAe,QAAQ;AAAA,IACzC,UAAU,eAAe,UAAU;AAAA,MAAI,CAAC,MACtC,cAAc,GAAG,WAAW;AAAA,IAAA;AAAA,EAC9B;AAEJ;AAEO,SAAS,YACd,WACA,UAKI,IACW;AACf,QAAM,aAAaC,WAAAA,cAAc,aAAa,MAAM;AACpD,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,aAAaC,aAAAA,cAAc;AAAA,IAC3B,SAAS;AAAA,EAAA,IACP;AAEJ,MAAI,YAAY,cAAc,MAAM;AACpC,MAAI,kBAAkB,cAAc,MAAM;AAE1C,MAAI,QAAQ;AACV,gBAAY;AACZ,sBAAkB;AAAA,EACpB;AAEA,QAAM,YAAY;AAElB,QAAM,QAAQ,SAAS,SAAS,WAAW,IAAI,WAAW,SAAS,EAAE,IAAA;AACrE,QAAM,cAAc,cAChB,WAAW,IAAI,WAAW,YAAY,GAAG,EAAE,IAAA,IAC3C;AAEJ,MAAI,kBAAkB,SAClB,WAAW,MAAM,eAAe,EAAE,QAClC,eAAe,WAAW,MAAM,eAAe,EAAE,KAAK;AAG1D,MAAI,CAAC,cAAc,oBAAoB,WAAW;AAChD,sBAAkB;AAAA,EACpB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,aAAa;AAAA,IACb;AAAA,IACA,aAAa;AAAA,IACb,YAAY,SAAS,SAAS;AAAA,IAC9B,UAAU;AAAA,EAAA;AAEd;AAEA,SAAS,cACP,QACA,aACW;AACX,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MAAM,SAAS,YAAY,IAAI,OAAO,IAAI,GAAG,OAAO,SAAS,IAAI;AAAA,IACjE,UAAU,OAAO,UAAU,IAAI,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC;AAAA,EAAA;AAEvE;AAEA,SAAS,SAAS,YAAwB,QAAQ,OAAO;AACvD,QAAM,QAAQD,WAAAA,cAAc,WAAW,SAAS,MAAM,EAAE;AAAA,IACtD,QAAQ,IAAI;AAAA,EAAA;AAGd,SAAO,EAAE,GAAG,YAAY,OAAO,MAAM,MAAI;AAC3C;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,aAAa,gBAAgB,KAAK,UAAU,IAAI;AAEtD,SAAO,EAAE,OAAO;AAAA,IACd,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,gBAAgB,WAAA,CAAY,CAAC;AAAA,IACpE,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO;AAAA,IACjC;AAAA,MACE;AAAA,MACA,KAAK,SAAS,IAAI,CAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,GAAG,gBAAgB,CAAC;AAAA,IAAA;AAAA,EACzE,CACD;AACH;AAEO,SAAS,UAAU,EAAE,QAAQ;AAClC,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,EAAE,gBAAgB,CAAC,WAAW,EAAE,iBAAiB,KAAK,IAAI,CAAC,CAAC;AACrE;AAYO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,iBAAiB;AACnB,GAAmB;AACjB,QAAM,EAAE,MAAM,MAAM,MAAA,IAAU;AAE9B,QAAM,YAAYE,oBAAAA;AAAAA,IAChB;AAAA,MACE,SAAS,SAAS;AAAA,MAClB,MAAM,KAAK,MAAM,QAAQ;AAAA,IAAA;AAAA,IAE3B;AAAA,EAAA;AAGF,QAAM,QAAQ,YAAY,MAAM,OAAO,EAAE,aAAa,QAAQ;AAE9D,MAAI,aAAa;AACjB,MAAI,SAAS,QAAQ,kBAAkB,MAAM;AAC3C,iBAAa,EAAE,gBAAgB,EAAE,MAAM,OAAO;AAAA,EAChD;AAEA,SAAO,EAAEC,KAAAA,KAAK,EAAE,OAAO,aAAa;AAAA,IAClC,EAAE,oBAAoB,IAAI;AAAA,IAC1B;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,QACE,QAAQ,KAAK;AACX,cAAI,UAAU,eAAe,MAAM;AACjC,wBAAY,IAAI;AAChB,gBAAI,gBAAA;AAAA,UACN;AAAA,QACF;AAAA,MAAA;AAAA,MAEF,CAAC,MAAM,MAAM,UAAU;AAAA,IAAA;AAAA,EACzB,CACD;AACH;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,iBAAiB;AACnB,GAGG;AACD,QAAM,WAAW,KAAK,YAAY,CAAA;AAElC,SAAO,EAAE,iBAAiB;AAAA,IACxB,EAAE,WAAW,EAAE,MAAM,gBAAgB;AAAA,IACrC,EAAE,GAAG,SAAS,SAAS,CAAC,EAAE;AAAA,MACxB;AAAA,QACE;AAAA,QACA,SAAS,IAAI,CAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,GAAG,gBAAgB,CAAC;AAAA,MAAA;AAAA,IACpE,CACD;AAAA,EAAA,CACF;AACH;AAEA,SAAS,gBAAgB,OAAkD;AACzE,QAAM,EAAE,MAAM,aAAa,CAAA,MAAO;AAClC,QAAM,QAAQ,CAAA;AACd,MAAI,QAAQ;AAEZ,QAAM,mBAAmB,WAAW,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AACpE,QAAM,yBAAyB,iBAAiB,IAAI,CAAC,WAAW,MAAM;AACpE,QAAI,MAAM,EAAG,QAAO;AACpB,UAAM,OAAO,iBAAiB,IAAI,CAAC;AACnC,QAAI,UAAU,QAAQ,KAAK,KAAK;AAC9B,gBAAU,QAAQ,KAAK;AAAA,IACzB;AACA,WAAO;AAAA,EACT,CAAC;AAED,aAAW,aAAa,wBAAwB;AAC9C,UAAM,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS;AACnC,UAAM,KAAK,KAAK,MAAM,OAAO,CAAC,CAAC;AAC/B,UAAM,KAAK,EAAE,kBAAkB,EAAE,OAAO,KAAA,GAAQ,KAAK,MAAM,GAAG,GAAG,CAAC,CAAC;AACnE,YAAQ;AAAA,EACV;AACA,QAAM,KAAK,KAAK,MAAM,KAAK,CAAC;AAC5B,SAAO,EAAE,QAAQ,KAAK;AACxB;AAEA,SAAS,eAAe,MAAM;AAC5B,QAAM,aAAaF,aAAAA,YAAA,EAAc,YAAY,YAAY;AAEzD,QAAM,IAAI,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE;AACvC,QAAM,IAAI,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE;AACvC,QAAM,IAAI,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE;AACvC,QAAM,IAAI,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;AAE3C,QAAM,MAAM,SAAS,WAAW,MAAM,GAAG,CAAC,GAAG,EAAE;AAC/C,QAAM,MAAM,SAAS,WAAW,MAAM,GAAG,CAAC,GAAG,EAAE;AAC/C,QAAM,MAAM,SAAS,WAAW,MAAM,GAAG,CAAC,GAAG,EAAE;AAE/C,QAAM,QAAQ,CAAC,IAAI,OAAO,KAAK,OAAO,IAAI,KAAK,KAAK,IAAI,EAAE;AAE1D,QAAM,WAAW,MAAM,GAAG,GAAG;AAC7B,QAAM,WAAW,MAAM,GAAG,GAAG;AAC7B,QAAM,WAAW,MAAM,GAAG,GAAG;AAE7B,SACE,MACA,SAAS,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,IACrC,SAAS,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,IACrC,SAAS,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;AAEzC;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/extractions/index.ts"],"sourcesContent":["import styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { Tag } from \"@blueprintjs/core\";\nimport type { Entity, EntityExt, Highlight, EntityType } from \"./types\";\nimport { CSSProperties } from \"react\";\nimport { asChromaColor } from \"@macrostrat/color-utils\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useDarkMode } from \"@macrostrat/ui-components\";\n\nexport type { Entity, EntityExt };\n\nconst h = hyper.styled(styles);\n\nexport function buildHighlights(\n  entities: EntityExt[],\n  parent: EntityExt | null,\n): Highlight[] {\n  let highlights = [];\n  let parents = [];\n  if (parent != null) {\n    parents = [parent.id, ...(parent.parents ?? [])];\n  }\n\n  for (const entity of entities) {\n    highlights.push({\n      start: entity.indices[0],\n      end: entity.indices[1],\n      text: entity.name,\n      backgroundColor: entity.type?.color,\n      tag: entity.type?.name ?? \"lith\",\n      id: entity.id,\n      parents,\n      match: entity.match,\n    });\n    highlights.push(...buildHighlights(entity.children ?? [], entity));\n  }\n  return highlights;\n}\n\nexport function enhanceData(extractionData, models, entityTypes) {\n  return {\n    ...extractionData,\n    model: models.get(extractionData.model_id),\n    entities: extractionData.entities?.map((d) =>\n      enhanceEntity(d, entityTypes),\n    ),\n  };\n}\n\nexport function getTagStyle(\n  baseColor: string,\n  options: {\n    highlighted?: boolean;\n    inDarkMode?: boolean;\n    active?: boolean;\n    showMatches?: boolean;\n  } = {},\n): CSSProperties {\n  const _baseColor = asChromaColor(baseColor ?? \"#fff\");\n  const {\n    highlighted = true,\n    inDarkMode = useDarkMode().isEnabled,\n    active = false,\n  } = options;\n\n  let mixAmount = highlighted ? 0.8 : 0.5;\n  let backgroundAlpha = highlighted ? 0.8 : 0.2;\n\n  if (active) {\n    mixAmount = 1;\n    backgroundAlpha = 1;\n  }\n\n  const mixTarget = \"black\";\n\n  const color = active ? \"#000\" : _baseColor.mix(mixTarget, mixAmount).hex();\n  const borderColor = highlighted\n    ? _baseColor.mix(mixTarget, mixAmount / 1.1).hex()\n    : \"transparent\";\n\n  let backgroundColor = active\n    ? _baseColor.alpha(backgroundAlpha).hex()\n    : normalizeColor(_baseColor.alpha(backgroundAlpha).hex());\n\n  // handle white backgrounds in light mode\n  if (!inDarkMode && backgroundColor === \"#ffffff\") {\n    backgroundColor = \"#f0f0f0\";\n  }\n\n  return {\n    color,\n    backgroundColor,\n    boxSizing: \"border-box\",\n    borderStyle: \"solid\",\n    borderColor,\n    borderWidth: \"1.5px\",\n    fontWeight: active ? \"bold\" : \"normal\",\n    fontSize: \"0.9em\",\n  };\n}\n\nfunction enhanceEntity(\n  entity: Entity,\n  entityTypes: Map<number, EntityType>,\n): EntityExt {\n  return {\n    ...entity,\n    type: addColor(entityTypes.get(entity.type), entity.match != null),\n    children: entity.children?.map((d) => enhanceEntity(d, entityTypes)),\n  };\n}\n\nfunction addColor(entityType: EntityType, match = false) {\n  const color = asChromaColor(entityType.color ?? \"#fff\").brighten(\n    match ? 1 : 2,\n  );\n\n  return { ...entityType, color: color.css() };\n}\n\nexport function ExtractionContext({\n  data,\n  entityTypes,\n  matchComponent,\n}: {\n  data: any;\n  entityTypes: Map<number, EntityType>;\n  matchComponent: MatchComponent;\n}) {\n  const highlights = buildHighlights(data.entities, null);\n\n  return h(\"div\", [\n    h(\"p\", h(HighlightedText, { text: data.paragraph_text, highlights })),\n    h(ModelInfo, { data: data.model }),\n    h(\n      \"ul.entities\",\n      data.entities.map((d) => h(ExtractionInfo, { data: d, matchComponent })),\n    ),\n  ]);\n}\n\nexport function ModelInfo({ data }) {\n  if (!data) return null;\n  return h(\"p.model-name\", [\"Model: \", h(\"code.bp6-code\", data.name)]);\n}\n\nexport type MatchComponent = (props: { data: any }) => any;\n\ntype EntityTagProps = {\n  data: EntityExt;\n  highlighted?: boolean;\n  active?: boolean;\n  onClickType?: (type: EntityType) => void;\n  matchComponent?: MatchComponent;\n};\n\nexport function EntityTag({\n  data,\n  highlighted = true,\n  active = false,\n  onClickType,\n  matchComponent = null,\n}: EntityTagProps) {\n  const { name, type, match } = data;\n\n  const className = classNames(\n    {\n      matched: match != null,\n    },\n    \"entity\",\n  );\n\n  const style = getTagStyle(type?.color, { highlighted, active });\n\n  let _matchLink = null;\n  if (match != null && matchComponent != null) {\n    _matchLink = h(matchComponent, { data: match });\n  }\n\n  return h(Tag, { style, className }, [\n    h(\"span.entity-name\", name),\n    \" \",\n    h(\n      \"code.entity-type.bp6-code\",\n      {\n        onClick(evt) {\n          if (active && onClickType != null) {\n            onClickType(type);\n            evt.stopPropagation();\n          }\n        },\n      },\n      [type?.name, _matchLink],\n    ),\n  ]);\n}\n\nfunction ExtractionInfo({\n  data,\n  matchComponent = null,\n}: {\n  data: EntityExt;\n  matchComponent: MatchComponent;\n}) {\n  const children = data.children ?? [];\n\n  return h(\"li.entity-row\", [\n    h(EntityTag, { data, matchComponent }),\n    h.if(children.length > 0)([\n      h(\n        \"ul.children\",\n        children.map((d) => h(ExtractionInfo, { data: d, matchComponent })),\n      ),\n    ]),\n  ]);\n}\n\nfunction HighlightedText(props: { text: string; highlights: Highlight[] }) {\n  const { text, highlights = [] } = props;\n  const parts = [];\n  let start = 0;\n\n  const sortedHighlights = highlights.sort((a, b) => a.start - b.start);\n  const deconflictedHighlights = sortedHighlights.map((highlight, i) => {\n    if (i === 0) return highlight;\n    const prev = sortedHighlights[i - 1];\n    if (highlight.start < prev.end) {\n      highlight.start = prev.end;\n    }\n    return highlight;\n  });\n\n  for (const highlight of deconflictedHighlights) {\n    const { start: s, end, ...rest } = highlight;\n    parts.push(text.slice(start, s));\n    parts.push(h(\"span.highlight\", { style: rest }, text.slice(s, end)));\n    start = end;\n  }\n  parts.push(text.slice(start));\n  return h(\"span\", parts);\n}\n\nfunction normalizeColor(hex8) {\n  const background = useDarkMode().isEnabled ? \"#000000\" : \"#ffffff\";\n\n  const r = parseInt(hex8.slice(1, 3), 16);\n  const g = parseInt(hex8.slice(3, 5), 16);\n  const b = parseInt(hex8.slice(5, 7), 16);\n  const a = parseInt(hex8.slice(7, 9), 16) / 255;\n\n  const bgR = parseInt(background.slice(1, 3), 16);\n  const bgG = parseInt(background.slice(3, 5), 16);\n  const bgB = parseInt(background.slice(5, 7), 16);\n\n  const blend = (fg, bg) => Math.round((1 - a) * bg + a * fg);\n\n  const blendedR = blend(r, bgR);\n  const blendedG = blend(g, bgG);\n  const blendedB = blend(b, bgB);\n\n  return (\n    \"#\" +\n    blendedR.toString(16).padStart(2, \"0\") +\n    blendedG.toString(16).padStart(2, \"0\") +\n    blendedB.toString(16).padStart(2, \"0\")\n  );\n}\n\nfunction isHighlighted(id: number, selectedNodes: number[], nodes: any[]) {\n  if (selectedNodes?.length === 0) return true;\n  return (\n    selectedNodes?.includes(id) ||\n    nodes?.some(\n      (node) =>\n        selectedNodes?.includes(node.id) &&\n        node.children.some((child) => child.id === id),\n    )\n  );\n}\n"],"names":["hyper","styles","asChromaColor","useDarkMode","classNames","Tag"],"mappings":"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"}

package/dist/extractions/index.d.ts

@@ -16,7 +16,7 @@ export declare function ExtractionContext({ data, entityTypes, matchComponent, }
 }): import('react').DetailedReactHTMLElement<import('react').HTMLAttributes<HTMLElement>, HTMLElement>;
 export declare function ModelInfo({ data }: {
     data: any;
-}): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;
+}): import('react').DOMElement<import('react').DOMAttributes<Element>, Element> | null;
 export type MatchComponent = (props: {
     data: any;
 }) => any;

package/dist/extractions/index.js

@@ -108,8 +108,7 @@ function EntityTag({
   const { name, type, match } = data;
   const className = classNames(
     {
-      matched: match != null,
-      type: data.type?.name ?? "lith"
+      matched: match != null
     },
     "entity"
   );

package/dist/extractions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/extractions/index.ts"],"sourcesContent":["import styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { Tag } from \"@blueprintjs/core\";\nimport type { Entity, EntityExt, Highlight, EntityType } from \"./types\";\nimport { CSSProperties } from \"react\";\nimport { asChromaColor } from \"@macrostrat/color-utils\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useDarkMode } from \"@macrostrat/ui-components\";\n\nexport type { Entity, EntityExt };\n\nconst h = hyper.styled(styles);\n\nexport function buildHighlights(\n  entities: EntityExt[],\n  parent: EntityExt | null,\n): Highlight[] {\n  let highlights = [];\n  let parents = [];\n  if (parent != null) {\n    parents = [parent.id, ...(parent.parents ?? [])];\n  }\n\n  for (const entity of entities) {\n    highlights.push({\n      start: entity.indices[0],\n      end: entity.indices[1],\n      text: entity.name,\n      backgroundColor: entity.type?.color,\n      tag: entity.type?.name ?? \"lith\",\n      id: entity.id,\n      parents,\n      match: entity.match,\n    });\n    highlights.push(...buildHighlights(entity.children ?? [], entity));\n  }\n  return highlights;\n}\n\nexport function enhanceData(extractionData, models, entityTypes) {\n  return {\n    ...extractionData,\n    model: models.get(extractionData.model_id),\n    entities: extractionData.entities?.map((d) =>\n      enhanceEntity(d, entityTypes),\n    ),\n  };\n}\n\nexport function getTagStyle(\n  baseColor: string,\n  options: {\n    highlighted?: boolean;\n    inDarkMode?: boolean;\n    active?: boolean;\n    showMatches?: boolean;\n  } = {},\n): CSSProperties {\n  const _baseColor = asChromaColor(baseColor ?? \"#fff\");\n  const {\n    highlighted = true,\n    inDarkMode = useDarkMode().isEnabled,\n    active = false,\n  } = options;\n\n  let mixAmount = highlighted ? 0.8 : 0.5;\n  let backgroundAlpha = highlighted ? 0.8 : 0.2;\n\n  if (active) {\n    mixAmount = 1;\n    backgroundAlpha = 1;\n  }\n\n  const mixTarget = \"black\";\n\n  const color = active ? \"#000\" : _baseColor.mix(mixTarget, mixAmount).hex();\n  const borderColor = highlighted\n    ? _baseColor.mix(mixTarget, mixAmount / 1.1).hex()\n    : \"transparent\";\n\n  let backgroundColor = active\n    ? _baseColor.alpha(backgroundAlpha).hex()\n    : normalizeColor(_baseColor.alpha(backgroundAlpha).hex());\n\n  // handle white backgrounds in light mode\n  if (!inDarkMode && backgroundColor === \"#ffffff\") {\n    backgroundColor = \"#f0f0f0\";\n  }\n\n  return {\n    color,\n    backgroundColor,\n    boxSizing: \"border-box\",\n    borderStyle: \"solid\",\n    borderColor,\n    borderWidth: \"1.5px\",\n    fontWeight: active ? \"bold\" : \"normal\",\n    fontSize: \"0.9em\",\n  };\n}\n\nfunction enhanceEntity(\n  entity: Entity,\n  entityTypes: Map<number, EntityType>,\n): EntityExt {\n  return {\n    ...entity,\n    type: addColor(entityTypes.get(entity.type), entity.match != null),\n    children: entity.children?.map((d) => enhanceEntity(d, entityTypes)),\n  };\n}\n\nfunction addColor(entityType: EntityType, match = false) {\n  const color = asChromaColor(entityType.color ?? \"#fff\").brighten(\n    match ? 1 : 2,\n  );\n\n  return { ...entityType, color: color.css() };\n}\n\nexport function ExtractionContext({\n  data,\n  entityTypes,\n  matchComponent,\n}: {\n  data: any;\n  entityTypes: Map<number, EntityType>;\n  matchComponent: MatchComponent;\n}) {\n  const highlights = buildHighlights(data.entities, null);\n\n  return h(\"div\", [\n    h(\"p\", h(HighlightedText, { text: data.paragraph_text, highlights })),\n    h(ModelInfo, { data: data.model }),\n    h(\n      \"ul.entities\",\n      data.entities.map((d) => h(ExtractionInfo, { data: d, matchComponent })),\n    ),\n  ]);\n}\n\nexport function ModelInfo({ data }) {\n  if (!data) return null;\n  return h(\"p.model-name\", [\"Model: \", h(\"code.bp6-code\", data.name)]);\n}\n\nexport type MatchComponent = (props: { data: any }) => any;\n\ntype EntityTagProps = {\n  data: EntityExt;\n  highlighted?: boolean;\n  active?: boolean;\n  onClickType?: (type: EntityType) => void;\n  matchComponent?: MatchComponent;\n};\n\nexport function EntityTag({\n  data,\n  highlighted = true,\n  active = false,\n  onClickType,\n  matchComponent = null,\n}: EntityTagProps) {\n  const { name, type, match } = data;\n\n  const className = classNames(\n    {\n      matched: match != null,\n      type: data.type?.name ?? \"lith\",\n    },\n    \"entity\",\n  );\n\n  const style = getTagStyle(type?.color, { highlighted, active });\n\n  let _matchLink = null;\n  if (match != null && matchComponent != null) {\n    _matchLink = h(matchComponent, { data: match });\n  }\n\n  return h(Tag, { style, className }, [\n    h(\"span.entity-name\", name),\n    \" \",\n    h(\n      \"code.entity-type.bp6-code\",\n      {\n        onClick(evt) {\n          if (active && onClickType != null) {\n            onClickType(type);\n            evt.stopPropagation();\n          }\n        },\n      },\n      [type?.name, _matchLink],\n    ),\n  ]);\n}\n\nfunction ExtractionInfo({\n  data,\n  matchComponent = null,\n}: {\n  data: EntityExt;\n  matchComponent: MatchComponent;\n}) {\n  const children = data.children ?? [];\n\n  return h(\"li.entity-row\", [\n    h(EntityTag, { data, matchComponent }),\n    h.if(children.length > 0)([\n      h(\n        \"ul.children\",\n        children.map((d) => h(ExtractionInfo, { data: d, matchComponent })),\n      ),\n    ]),\n  ]);\n}\n\nfunction HighlightedText(props: { text: string; highlights: Highlight[] }) {\n  const { text, highlights = [] } = props;\n  const parts = [];\n  let start = 0;\n\n  const sortedHighlights = highlights.sort((a, b) => a.start - b.start);\n  const deconflictedHighlights = sortedHighlights.map((highlight, i) => {\n    if (i === 0) return highlight;\n    const prev = sortedHighlights[i - 1];\n    if (highlight.start < prev.end) {\n      highlight.start = prev.end;\n    }\n    return highlight;\n  });\n\n  for (const highlight of deconflictedHighlights) {\n    const { start: s, end, ...rest } = highlight;\n    parts.push(text.slice(start, s));\n    parts.push(h(\"span.highlight\", { style: rest }, text.slice(s, end)));\n    start = end;\n  }\n  parts.push(text.slice(start));\n  return h(\"span\", parts);\n}\n\nfunction normalizeColor(hex8) {\n  const background = useDarkMode().isEnabled ? \"#000000\" : \"#ffffff\";\n\n  const r = parseInt(hex8.slice(1, 3), 16);\n  const g = parseInt(hex8.slice(3, 5), 16);\n  const b = parseInt(hex8.slice(5, 7), 16);\n  const a = parseInt(hex8.slice(7, 9), 16) / 255;\n\n  const bgR = parseInt(background.slice(1, 3), 16);\n  const bgG = parseInt(background.slice(3, 5), 16);\n  const bgB = parseInt(background.slice(5, 7), 16);\n\n  const blend = (fg, bg) => Math.round((1 - a) * bg + a * fg);\n\n  const blendedR = blend(r, bgR);\n  const blendedG = blend(g, bgG);\n  const blendedB = blend(b, bgB);\n\n  return (\n    \"#\" +\n    blendedR.toString(16).padStart(2, \"0\") +\n    blendedG.toString(16).padStart(2, \"0\") +\n    blendedB.toString(16).padStart(2, \"0\")\n  );\n}\n\nfunction isHighlighted(id: number, selectedNodes: number[], nodes: any[]) {\n  if (selectedNodes?.length === 0) return true;\n  return (\n    selectedNodes?.includes(id) ||\n    nodes?.some(\n      (node) =>\n        selectedNodes?.includes(node.id) &&\n        node.children.some((child) => child.id === id),\n    )\n  );\n}\n"],"names":["styles"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/extractions/index.ts"],"sourcesContent":["import styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { Tag } from \"@blueprintjs/core\";\nimport type { Entity, EntityExt, Highlight, EntityType } from \"./types\";\nimport { CSSProperties } from \"react\";\nimport { asChromaColor } from \"@macrostrat/color-utils\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useDarkMode } from \"@macrostrat/ui-components\";\n\nexport type { Entity, EntityExt };\n\nconst h = hyper.styled(styles);\n\nexport function buildHighlights(\n  entities: EntityExt[],\n  parent: EntityExt | null,\n): Highlight[] {\n  let highlights = [];\n  let parents = [];\n  if (parent != null) {\n    parents = [parent.id, ...(parent.parents ?? [])];\n  }\n\n  for (const entity of entities) {\n    highlights.push({\n      start: entity.indices[0],\n      end: entity.indices[1],\n      text: entity.name,\n      backgroundColor: entity.type?.color,\n      tag: entity.type?.name ?? \"lith\",\n      id: entity.id,\n      parents,\n      match: entity.match,\n    });\n    highlights.push(...buildHighlights(entity.children ?? [], entity));\n  }\n  return highlights;\n}\n\nexport function enhanceData(extractionData, models, entityTypes) {\n  return {\n    ...extractionData,\n    model: models.get(extractionData.model_id),\n    entities: extractionData.entities?.map((d) =>\n      enhanceEntity(d, entityTypes),\n    ),\n  };\n}\n\nexport function getTagStyle(\n  baseColor: string,\n  options: {\n    highlighted?: boolean;\n    inDarkMode?: boolean;\n    active?: boolean;\n    showMatches?: boolean;\n  } = {},\n): CSSProperties {\n  const _baseColor = asChromaColor(baseColor ?? \"#fff\");\n  const {\n    highlighted = true,\n    inDarkMode = useDarkMode().isEnabled,\n    active = false,\n  } = options;\n\n  let mixAmount = highlighted ? 0.8 : 0.5;\n  let backgroundAlpha = highlighted ? 0.8 : 0.2;\n\n  if (active) {\n    mixAmount = 1;\n    backgroundAlpha = 1;\n  }\n\n  const mixTarget = \"black\";\n\n  const color = active ? \"#000\" : _baseColor.mix(mixTarget, mixAmount).hex();\n  const borderColor = highlighted\n    ? _baseColor.mix(mixTarget, mixAmount / 1.1).hex()\n    : \"transparent\";\n\n  let backgroundColor = active\n    ? _baseColor.alpha(backgroundAlpha).hex()\n    : normalizeColor(_baseColor.alpha(backgroundAlpha).hex());\n\n  // handle white backgrounds in light mode\n  if (!inDarkMode && backgroundColor === \"#ffffff\") {\n    backgroundColor = \"#f0f0f0\";\n  }\n\n  return {\n    color,\n    backgroundColor,\n    boxSizing: \"border-box\",\n    borderStyle: \"solid\",\n    borderColor,\n    borderWidth: \"1.5px\",\n    fontWeight: active ? \"bold\" : \"normal\",\n    fontSize: \"0.9em\",\n  };\n}\n\nfunction enhanceEntity(\n  entity: Entity,\n  entityTypes: Map<number, EntityType>,\n): EntityExt {\n  return {\n    ...entity,\n    type: addColor(entityTypes.get(entity.type), entity.match != null),\n    children: entity.children?.map((d) => enhanceEntity(d, entityTypes)),\n  };\n}\n\nfunction addColor(entityType: EntityType, match = false) {\n  const color = asChromaColor(entityType.color ?? \"#fff\").brighten(\n    match ? 1 : 2,\n  );\n\n  return { ...entityType, color: color.css() };\n}\n\nexport function ExtractionContext({\n  data,\n  entityTypes,\n  matchComponent,\n}: {\n  data: any;\n  entityTypes: Map<number, EntityType>;\n  matchComponent: MatchComponent;\n}) {\n  const highlights = buildHighlights(data.entities, null);\n\n  return h(\"div\", [\n    h(\"p\", h(HighlightedText, { text: data.paragraph_text, highlights })),\n    h(ModelInfo, { data: data.model }),\n    h(\n      \"ul.entities\",\n      data.entities.map((d) => h(ExtractionInfo, { data: d, matchComponent })),\n    ),\n  ]);\n}\n\nexport function ModelInfo({ data }) {\n  if (!data) return null;\n  return h(\"p.model-name\", [\"Model: \", h(\"code.bp6-code\", data.name)]);\n}\n\nexport type MatchComponent = (props: { data: any }) => any;\n\ntype EntityTagProps = {\n  data: EntityExt;\n  highlighted?: boolean;\n  active?: boolean;\n  onClickType?: (type: EntityType) => void;\n  matchComponent?: MatchComponent;\n};\n\nexport function EntityTag({\n  data,\n  highlighted = true,\n  active = false,\n  onClickType,\n  matchComponent = null,\n}: EntityTagProps) {\n  const { name, type, match } = data;\n\n  const className = classNames(\n    {\n      matched: match != null,\n    },\n    \"entity\",\n  );\n\n  const style = getTagStyle(type?.color, { highlighted, active });\n\n  let _matchLink = null;\n  if (match != null && matchComponent != null) {\n    _matchLink = h(matchComponent, { data: match });\n  }\n\n  return h(Tag, { style, className }, [\n    h(\"span.entity-name\", name),\n    \" \",\n    h(\n      \"code.entity-type.bp6-code\",\n      {\n        onClick(evt) {\n          if (active && onClickType != null) {\n            onClickType(type);\n            evt.stopPropagation();\n          }\n        },\n      },\n      [type?.name, _matchLink],\n    ),\n  ]);\n}\n\nfunction ExtractionInfo({\n  data,\n  matchComponent = null,\n}: {\n  data: EntityExt;\n  matchComponent: MatchComponent;\n}) {\n  const children = data.children ?? [];\n\n  return h(\"li.entity-row\", [\n    h(EntityTag, { data, matchComponent }),\n    h.if(children.length > 0)([\n      h(\n        \"ul.children\",\n        children.map((d) => h(ExtractionInfo, { data: d, matchComponent })),\n      ),\n    ]),\n  ]);\n}\n\nfunction HighlightedText(props: { text: string; highlights: Highlight[] }) {\n  const { text, highlights = [] } = props;\n  const parts = [];\n  let start = 0;\n\n  const sortedHighlights = highlights.sort((a, b) => a.start - b.start);\n  const deconflictedHighlights = sortedHighlights.map((highlight, i) => {\n    if (i === 0) return highlight;\n    const prev = sortedHighlights[i - 1];\n    if (highlight.start < prev.end) {\n      highlight.start = prev.end;\n    }\n    return highlight;\n  });\n\n  for (const highlight of deconflictedHighlights) {\n    const { start: s, end, ...rest } = highlight;\n    parts.push(text.slice(start, s));\n    parts.push(h(\"span.highlight\", { style: rest }, text.slice(s, end)));\n    start = end;\n  }\n  parts.push(text.slice(start));\n  return h(\"span\", parts);\n}\n\nfunction normalizeColor(hex8) {\n  const background = useDarkMode().isEnabled ? \"#000000\" : \"#ffffff\";\n\n  const r = parseInt(hex8.slice(1, 3), 16);\n  const g = parseInt(hex8.slice(3, 5), 16);\n  const b = parseInt(hex8.slice(5, 7), 16);\n  const a = parseInt(hex8.slice(7, 9), 16) / 255;\n\n  const bgR = parseInt(background.slice(1, 3), 16);\n  const bgG = parseInt(background.slice(3, 5), 16);\n  const bgB = parseInt(background.slice(5, 7), 16);\n\n  const blend = (fg, bg) => Math.round((1 - a) * bg + a * fg);\n\n  const blendedR = blend(r, bgR);\n  const blendedG = blend(g, bgG);\n  const blendedB = blend(b, bgB);\n\n  return (\n    \"#\" +\n    blendedR.toString(16).padStart(2, \"0\") +\n    blendedG.toString(16).padStart(2, \"0\") +\n    blendedB.toString(16).padStart(2, \"0\")\n  );\n}\n\nfunction isHighlighted(id: number, selectedNodes: number[], nodes: any[]) {\n  if (selectedNodes?.length === 0) return true;\n  return (\n    selectedNodes?.includes(id) ||\n    nodes?.some(\n      (node) =>\n        selectedNodes?.includes(node.id) &&\n        node.children.some((child) => child.id === id),\n    )\n  );\n}\n"],"names":["styles"],"mappings":"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"}

package/dist/feedback/edit-state.d.ts

@@ -103,7 +103,7 @@ type TreeAction = {
 };
 export type TreeDispatch = Dispatch<TreeAction>;
 export declare function useUpdatableTree(initialTree: TreeData[], entityTypes: Map<number, EntityType>, viewOnly: boolean, matchMode: boolean, autoSelect?: string[]): [TreeState, TreeDispatch];
-export declare const TreeDispatchContext: import('react').Context<TreeDispatch>;
+export declare const TreeDispatchContext: import('react').Context<TreeDispatch | null>;
 export declare function useTreeDispatch(): TreeDispatch;
 export interface EntityOutput {
     id: number;

package/dist/feedback/graph.d.ts

@@ -1,4 +1,5 @@
 import { TreeData } from './types';
+import { ErrorBoundary } from '../../../ui-components/src/index.ts';
 export declare function GraphView(props: {
     tree: TreeData[];
     width: number;
@@ -6,4 +7,10 @@ export declare function GraphView(props: {
     dispatch: (action: any) => void;
     selectedNodes: number[];
     viewOnly?: boolean;
-}): import('react').DetailedReactHTMLElement<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | import('react').FunctionComponentElement<import('@blueprintjs/core').SpinnerProps<HTMLElement>>;
+}): import('react').FunctionComponentElement<import('@blueprintjs/core').SpinnerProps<HTMLElement>> | import('react').ComponentElement<{
+    description?: string;
+    title?: string;
+    fallback?: import('react').ReactNode;
+    override?: boolean;
+    onCatch?(error: Error, info: any): void;
+}, ErrorBoundary>;

package/dist/feedback/index.d.ts

@@ -2,7 +2,7 @@ export type { GraphData } from './edit-state';
 export { treeToGraph } from './edit-state';
 export type { TreeData } from './types';
 export declare function FeedbackComponent({ entities, text, model, entityTypes, matchComponent, onSave, allowOverlap, matchLinks, view, autoSelect, }: {
-    entities?: any[];
+    entities?: never[] | undefined;
     text: any;
     model: any;
     entityTypes: any;
@@ -10,6 +10,6 @@ export declare function FeedbackComponent({ entities, text, model, entityTypes,
     onSave: any;
     allowOverlap: any;
     matchLinks: any;
-    view?: boolean;
-    autoSelect?: any[];
+    view?: boolean | undefined;
+    autoSelect?: never[] | undefined;
 }): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;

package/dist/feedback/matches.cjs

@@ -83,9 +83,15 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
   const [selectedItem, setSelectedItem] = react.useState(h("div", "Select a match"));
   const [disabled, setDisabled] = react.useState(true);
   const [payload, setPayload] = react.useState({});
-  const data = uiComponents.useAPIResult(
-    "https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*" + inputValue + "*"
-  );
+  const [data, setData] = react.useState([]);
+  react.useEffect(() => {
+    if (!inputValue || inputValue.length < 3) return;
+    fetch(
+      "https://dev.macrostrat.org/api/pg/kg_global_entity?name=ilike.*" + inputValue + "*"
+    ).then((res) => res.json()).then((res) => {
+      setData(res);
+    });
+  }, [inputValue]);
   const items = data?.map((data2) => h(MatchTag, { data: data2, setPayload }));
   return h(
     core.Overlay2,
@@ -119,7 +125,7 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
                 setSelectedItem(item);
               },
               onQueryChange: (query) => setInputValue(query),
-              popoverProps: { minimal: true },
+              popoverProps: { minimal: true, usePortal: false },
               query: inputValue,
               placeholder: "Enter match name"
             },
@@ -160,86 +166,32 @@ function Match({ data, matchLinks, dispatch, nodeId }) {
   ]);
 }
 function MatchTag({ data, matchLinks, setPayload }) {
-  if (!data || Object.keys(data).length === 0) return;
-  if (data.lith_id || data?.type === "lith") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "lith" ? setPayload({ lith_id: data.id, name: data.name }) : null;
-        }
-      },
-      h(uiComponents.DataField, {
-        className: "match-item",
-        label: "Stratigraphic name",
-        value: h(dataComponents.LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
-          onClick: () => window.open(
-            matchLinks.strat_name + "/" + data.strat_name_id,
-            "_blank"
-          )
-        })
-      })
-    );
-  }
-  if (data.strat_name_id || data?.type === "strat_name") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "strat_name" ? setPayload({ strat_name_id: data.id, name: data.name }) : null;
-        }
-      },
-      h(uiComponents.DataField, {
-        className: "match-item",
-        label: "Stratigraphic name",
-        value: h(dataComponents.LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
-          onClick: () => window.open(
-            matchLinks.strat_name + "/" + data.strat_name_id,
-            "_blank"
-          )
-        })
-      })
-    );
-  }
-  if (data.lith_att_id || data?.type === "lith_att") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "lith_att" ? setPayload({ lith_att_id: data.id, name: data.name }) : null;
-        }
-      },
-      h(uiComponents.DataField, {
-        className: "match-item",
-        label: "Lithology attribute",
-        value: h(dataComponents.LithologyTag, {
-          data: { name: data.name, id: data.lith_att_id },
-          onClick: () => window.open(matchLinks.lith_att + "/" + data.lith_att_id, "_blank")
-        })
-      })
-    );
-  }
-  if (data.int_id || data?.type === "interval") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "interval" ? setPayload({ int_id: data.id, name: data.name }) : null;
-        }
-      },
-      h(uiComponents.DataField, {
-        label: "Interval",
-        className: "match-item",
-        value: h(dataComponents.LithologyTag, {
-          data: { name: data.name, id: data.id },
-          onClick: () => window.open(matchLinks.interval + "/" + data.int_id, "_blank")
-        })
+  if (data == void 0 || Object.keys(data).length === 0) return;
+  const { entity_id, entity_table, global_entity_id, name } = data;
+  const type = entity_table.split(".").pop();
+  const newPayload = {
+    entity_id,
+    entity_table: type,
+    global_entity_id,
+    name
+  };
+  return h(
+    "div",
+    {
+      onClick: () => setPayload(newPayload)
+    },
+    h(uiComponents.DataField, {
+      className: "match-item",
+      label: type.replace(/^./, (c) => c.toUpperCase()),
+      value: h(dataComponents.LithologyTag, {
+        data: { name: data.name, id: data.global_entity_id, lith_id: 1 },
+        onClick: () => window.open(
+          matchLinks.type + "/" + data.entity_id,
+          "_blank"
+        )
       })
-    );
-  }
-  return h(uiComponents.JSONView, { data });
+    })
+  );
 }
 exports.MatchTag = MatchTag;
 exports.Matches = Matches;

package/dist/feedback/matches.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"matches.cjs","sources":["../../src/feedback/matches.ts"],"sourcesContent":["import { Switch } from \"@blueprintjs/core\";\nimport { Select } from \"@blueprintjs/select\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useState } from \"react\";\nimport { Icon, Divider, Overlay2 } from \"@blueprintjs/core\";\nimport { JSONView, SaveButton } from \"@macrostrat/ui-components\";\nimport { useAPIResult, DataField } from \"@macrostrat/ui-components\";\nimport { LithologyTag } from \"@macrostrat/data-components\";\n\nconst h = hyper.styled(styles);\n\nexport function Matches({\n  match,\n  setMatchLinks,\n  matchLinks,\n  selectedNodes,\n  tree,\n  dispatch,\n}) {\n  const [overlayOpen, setOverlayOpen] = useState(false);\n\n  let nodeMatch = null;\n  if (selectedNodes.length === 1) {\n    nodeMatch = findMatchingNode(tree, selectedNodes[0]);\n  }\n\n  return h.if(matchLinks)(\"div\", [\n    h(Divider),\n    h(Switch, {\n      label: \"Match mode\",\n      checked: match !== undefined,\n      onChange: (e) => {\n        setMatchLinks(match === undefined ? matchLinks || {} : undefined);\n        dispatch({ type: \"toggle-match-mode\" });\n      },\n    }),\n    h.if(nodeMatch && match)(Match, {\n      data: nodeMatch?.match,\n      matchLinks: matchLinks,\n      dispatch,\n      nodeId: nodeMatch?.id,\n    }),\n    h.if(selectedNodes.length == 1 && !nodeMatch?.match && match)(\n      \"div.add-match-container\",\n      [\n        h(\n          \"div.add-type\",\n          {\n            onClick: () => {\n              setOverlayOpen(true);\n            },\n          },\n          [h(\"p.add-match-text\", \"Add match\"), h(Icon, { icon: \"plus\" })],\n        ),\n        h(MatchOverlay, {\n          isOpen: overlayOpen,\n          setOverlayOpen,\n          nodeMatch,\n          dispatch,\n        }),\n      ],\n    ),\n  ]);\n}\n\nfunction findMatchingNode(tree, nodeId) {\n  let match = null;\n\n  function traverse(node) {\n    if (node.id === nodeId) {\n      match = node;\n      return true;\n    }\n    if (Array.isArray(node.children)) {\n      for (const child of node.children) {\n        if (traverse(child)) return true;\n      }\n    }\n    return false;\n  }\n\n  tree.forEach(traverse);\n  return match;\n}\n\nfunction MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {\n  const [inputValue, setInputValue] = useState(nodeMatch?.name || \"\");\n  const [selectedItem, setSelectedItem] = useState(h(\"div\", \"Select a match\"));\n  const [disabled, setDisabled] = useState(true);\n  const [payload, setPayload] = useState({});\n\n  const data = useAPIResult(\n    \"https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*\" +\n      inputValue +\n      \"*\",\n  );\n  const items = data?.map((data) => h(MatchTag, { data, setPayload }));\n\n  return h(\n    Overlay2,\n    {\n      isOpen,\n    },\n    h(\n      \"div.overlay-container\",\n      h(\"div.add-type-overlay\", [\n        h(\"h2.title\", [\n          \"Add match with \" + nodeMatch.name,\n          h(Icon, {\n            icon: \"cross\",\n            className: \"close-icon\",\n            onClick: () => {\n              setOverlayOpen(false);\n            },\n            style: { cursor: \"pointer\", color: \"red\" },\n          }),\n        ]),\n        h(\"div.form-group\", [\n          h(\n            Select,\n            {\n              items: items || [],\n              itemRenderer: (item, { handleClick }) => {\n                return h(\"div.match-item\", { onClick: handleClick }, item);\n              },\n              onItemSelect: (item) => {\n                setDisabled(false);\n                setSelectedItem(item);\n              },\n              onQueryChange: (query) => setInputValue(query),\n              popoverProps: { minimal: true },\n              query: inputValue,\n              placeholder: \"Enter match name\",\n            },\n            selectedItem,\n          ),\n        ]),\n        h(\n          SaveButton,\n          {\n            className: \"save-btn\",\n            small: true,\n            onClick: () => {\n              // Handle save changes\n              dispatch({\n                type: \"add-match\",\n                payload: { id: nodeMatch.id, payload },\n              });\n              setOverlayOpen(false);\n            },\n            disabled,\n          },\n          \"Save changes\",\n        ),\n      ]),\n    ),\n  );\n}\n\nfunction Match({ data, matchLinks, dispatch, nodeId }) {\n  return h.if(data)(\"div.match-container\", [\n    MatchTag({ data, matchLinks }),\n    h(Icon, {\n      icon: \"cross\",\n      color: \"red\",\n      className: \"close-btn\",\n      onClick: () => {\n        dispatch({ type: \"remove-match\", payload: { id: nodeId } });\n      },\n    }),\n  ]);\n}\n\ninterface MatchTagProps {\n  data: any;\n  matchLinks?: Record<string, string>;\n  setPayload?: (payload: Record<string, any>) => void;\n}\n\nexport function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {\n  if (!data || Object.keys(data).length === 0) return;\n\n  if (data.lith_id || data?.type === \"lith\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith\"\n            ? setPayload({ lith_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Stratigraphic name\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color },\n          onClick: () =>\n            window.open(\n              matchLinks.strat_name + \"/\" + data.strat_name_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.strat_name_id || data?.type === \"strat_name\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"strat_name\"\n            ? setPayload({ strat_name_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Stratigraphic name\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color },\n          onClick: () =>\n            window.open(\n              matchLinks.strat_name + \"/\" + data.strat_name_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.lith_att_id || data?.type === \"lith_att\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith_att\"\n            ? setPayload({ lith_att_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Lithology attribute\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.lith_att_id },\n          onClick: () =>\n            window.open(matchLinks.lith_att + \"/\" + data.lith_att_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  if (data.int_id || data?.type === \"interval\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"interval\"\n            ? setPayload({ int_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        label: \"Interval\",\n        className: \"match-item\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id },\n          onClick: () =>\n            window.open(matchLinks.interval + \"/\" + data.int_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  return h(JSONView, { data });\n}\n"],"names":["hyper","styles","useState","Divider","Switch","Icon","useAPIResult","data","Overlay2","Select","SaveButton","DataField","LithologyTag","JSONView"],"mappings":"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"}
+{"version":3,"file":"matches.cjs","sources":["../../src/feedback/matches.ts"],"sourcesContent":["import { Switch } from \"@blueprintjs/core\";\nimport { Select } from \"@blueprintjs/select\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useState, useEffect } from \"react\";\nimport { Icon, Divider, Overlay2 } from \"@blueprintjs/core\";\nimport { JSONView, SaveButton } from \"@macrostrat/ui-components\";\nimport { useAPIResult, DataField } from \"@macrostrat/ui-components\";\nimport { LithologyTag } from \"@macrostrat/data-components\";\n\nconst h = hyper.styled(styles);\n\nexport function Matches({\n  match,\n  setMatchLinks,\n  matchLinks,\n  selectedNodes,\n  tree,\n  dispatch,\n}) {\n  const [overlayOpen, setOverlayOpen] = useState(false);\n\n  let nodeMatch = null;\n  if (selectedNodes.length === 1) {\n    nodeMatch = findMatchingNode(tree, selectedNodes[0]);\n  }\n\n  return h.if(matchLinks)(\"div\", [\n    h(Divider),\n    h(Switch, {\n      label: \"Match mode\",\n      checked: match !== undefined,\n      onChange: (e) => {\n        setMatchLinks(match === undefined ? matchLinks || {} : undefined);\n        dispatch({ type: \"toggle-match-mode\" });\n      },\n    }),\n    h.if(nodeMatch && match)(Match, {\n      data: nodeMatch?.match,\n      matchLinks: matchLinks,\n      dispatch,\n      nodeId: nodeMatch?.id,\n    }),\n    h.if(selectedNodes.length == 1 && !nodeMatch?.match && match)(\n      \"div.add-match-container\",\n      [\n        h(\n          \"div.add-type\",\n          {\n            onClick: () => {\n              setOverlayOpen(true);\n            },\n          },\n          [h(\"p.add-match-text\", \"Add match\"), h(Icon, { icon: \"plus\" })],\n        ),\n        h(MatchOverlay, {\n          isOpen: overlayOpen,\n          setOverlayOpen,\n          nodeMatch,\n          dispatch,\n        }),\n      ],\n    ),\n  ]);\n}\n\nfunction findMatchingNode(tree, nodeId) {\n  let match = null;\n\n  function traverse(node) {\n    if (node.id === nodeId) {\n      match = node;\n      return true;\n    }\n    if (Array.isArray(node.children)) {\n      for (const child of node.children) {\n        if (traverse(child)) return true;\n      }\n    }\n    return false;\n  }\n\n  tree.forEach(traverse);\n  return match;\n}\n\nfunction MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {\n  const [inputValue, setInputValue] = useState(nodeMatch?.name || \"\");\n  const [selectedItem, setSelectedItem] = useState(h(\"div\", \"Select a match\"));\n  const [disabled, setDisabled] = useState(true);\n  const [payload, setPayload] = useState({});\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    if (!inputValue || inputValue.length < 3) return;\n\n    fetch(\n      \"https://dev.macrostrat.org/api/pg/kg_global_entity?name=ilike.*\" +\n        inputValue +\n        \"*\"\n    )\n      .then((res) => res.json())\n      .then((res) => {\n        setData(res);\n      });\n  }, [inputValue]);\n\n  const items = data?.map((data) => h(MatchTag, { data, setPayload }));\n\n  return h(\n    Overlay2,\n    {\n      isOpen,\n    },\n    h(\n      \"div.overlay-container\",\n      h(\"div.add-type-overlay\", [\n        h(\"h2.title\", [\n          \"Add match with \" + nodeMatch.name,\n          h(Icon, {\n            icon: \"cross\",\n            className: \"close-icon\",\n            onClick: () => {\n              setOverlayOpen(false);\n            },\n            style: { cursor: \"pointer\", color: \"red\" },\n          }),\n        ]),\n        h(\"div.form-group\", [\n          h(\n            Select,\n            {\n              items: items || [],\n              itemRenderer: (item, { handleClick }) => {\n                return h(\"div.match-item\", { onClick: handleClick }, item);\n              },\n              onItemSelect: (item) => {\n                setDisabled(false);\n                setSelectedItem(item);\n              },\n              onQueryChange: (query) => setInputValue(query),\n              popoverProps: { minimal: true, usePortal: false },\n              query: inputValue,\n              placeholder: \"Enter match name\",\n            },\n            selectedItem,\n          ),\n        ]),\n        h(\n          SaveButton,\n          {\n            className: \"save-btn\",\n            small: true,\n            onClick: () => {\n              // Handle save changes\n              dispatch({\n                type: \"add-match\",\n                payload: { id: nodeMatch.id, payload },\n              });\n              setOverlayOpen(false);\n            },\n            disabled,\n          },\n          \"Save changes\",\n        ),\n      ]),\n    ),\n  );\n}\n\nfunction Match({ data, matchLinks, dispatch, nodeId }) {\n  return h.if(data)(\"div.match-container\", [\n    MatchTag({ data, matchLinks }),\n    h(Icon, {\n      icon: \"cross\",\n      color: \"red\",\n      className: \"close-btn\",\n      onClick: () => {\n        dispatch({ type: \"remove-match\", payload: { id: nodeId } });\n      },\n    }),\n  ]);\n}\n\ninterface MatchTagProps {\n  data: any;\n  matchLinks?: Record<string, string>;\n  setPayload?: (payload: Record<string, any>) => void;\n}\n\nexport function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {\n  if (data == undefined || Object.keys(data).length === 0) return;\n\n  const { entity_id, entity_table, global_entity_id, name } = data\n\n  const type = entity_table\n            .split(\".\")\n            .pop()\n\n  const newPayload = {\n    entity_id,\n    entity_table: type,\n    global_entity_id,\n    name,\n  }\n\n  return h(\n      \"div\",\n      {\n        onClick: () => setPayload(newPayload)\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: type.replace(/^./, (c) => c.toUpperCase()),\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.global_entity_id, lith_id: 1 },\n          onClick: () =>\n            window.open(\n              matchLinks.type + \"/\" + data.entity_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n\n  return h(JSONView, { data });\n}\n"],"names":["hyper","styles","useState","Divider","Switch","Icon","useEffect","data","Overlay2","Select","SaveButton","DataField","LithologyTag"],"mappings":";;;;;;;;;;;AAUA,MAAM,IAAIA,eAAAA,QAAM,OAAOC,uBAAM;AAEtB,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,CAAC,aAAa,cAAc,IAAIC,MAAAA,SAAS,KAAK;AAEpD,MAAI,YAAY;AAChB,MAAI,cAAc,WAAW,GAAG;AAC9B,gBAAY,iBAAiB,MAAM,cAAc,CAAC,CAAC;AAAA,EACrD;AAEA,SAAO,EAAE,GAAG,UAAU,EAAE,OAAO;AAAA,IAC7B,EAAEC,KAAAA,OAAO;AAAA,IACT,EAAEC,KAAAA,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS,UAAU;AAAA,MACnB,UAAU,CAAC,MAAM;AACf,sBAAc,UAAU,SAAY,cAAc,CAAA,IAAK,MAAS;AAChE,iBAAS,EAAE,MAAM,qBAAqB;AAAA,MACxC;AAAA,IAAA,CACD;AAAA,IACD,EAAE,GAAG,aAAa,KAAK,EAAE,OAAO;AAAA,MAC9B,MAAM,WAAW;AAAA,MACjB;AAAA,MACA;AAAA,MACA,QAAQ,WAAW;AAAA,IAAA,CACpB;AAAA,IACD,EAAE,GAAG,cAAc,UAAU,KAAK,CAAC,WAAW,SAAS,KAAK;AAAA,MAC1D;AAAA,MACA;AAAA,QACE;AAAA,UACE;AAAA,UACA;AAAA,YACE,SAAS,MAAM;AACb,6BAAe,IAAI;AAAA,YACrB;AAAA,UAAA;AAAA,UAEF,CAAC,EAAE,oBAAoB,WAAW,GAAG,EAAEC,WAAM,EAAE,MAAM,QAAQ,CAAC;AAAA,QAAA;AAAA,QAEhE,EAAE,cAAc;AAAA,UACd,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;AAEA,SAAS,iBAAiB,MAAM,QAAQ;AACtC,MAAI,QAAQ;AAEZ,WAAS,SAAS,MAAM;AACtB,QAAI,KAAK,OAAO,QAAQ;AACtB,cAAQ;AACR,aAAO;AAAA,IACT;AACA,QAAI,MAAM,QAAQ,KAAK,QAAQ,GAAG;AAChC,iBAAW,SAAS,KAAK,UAAU;AACjC,YAAI,SAAS,KAAK,EAAG,QAAO;AAAA,MAC9B;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,OAAK,QAAQ,QAAQ;AACrB,SAAO;AACT;AAEA,SAAS,aAAa,EAAE,QAAQ,gBAAgB,WAAW,YAAY;AACrE,QAAM,CAAC,YAAY,aAAa,IAAIH,MAAAA,SAAS,WAAW,QAAQ,EAAE;AAClE,QAAM,CAAC,cAAc,eAAe,IAAIA,MAAAA,SAAS,EAAE,OAAO,gBAAgB,CAAC;AAC3E,QAAM,CAAC,UAAU,WAAW,IAAIA,MAAAA,SAAS,IAAI;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,CAAA,CAAE;AACzC,QAAM,CAAC,MAAM,OAAO,IAAIA,MAAAA,SAAS,CAAA,CAAE;AAEnCI,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,cAAc,WAAW,SAAS,EAAG;AAE1C;AAAA,MACE,oEACE,aACA;AAAA,IAAA,EAED,KAAK,CAAC,QAAQ,IAAI,MAAM,EACxB,KAAK,CAAC,QAAQ;AACb,cAAQ,GAAG;AAAA,IACb,CAAC;AAAA,EACL,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,QAAQ,MAAM,IAAI,CAACC,UAAS,EAAE,UAAU,EAAE,MAAAA,OAAM,WAAA,CAAY,CAAC;AAEnE,SAAO;AAAA,IACLC,KAAAA;AAAAA,IACA;AAAA,MACE;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA,EAAE,wBAAwB;AAAA,QACxB,EAAE,YAAY;AAAA,UACZ,oBAAoB,UAAU;AAAA,UAC9B,EAAEH,KAAAA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,MAAM;AACb,6BAAe,KAAK;AAAA,YACtB;AAAA,YACA,OAAO,EAAE,QAAQ,WAAW,OAAO,MAAA;AAAA,UAAM,CAC1C;AAAA,QAAA,CACF;AAAA,QACD,EAAE,kBAAkB;AAAA,UAClB;AAAA,YACEI,OAAAA;AAAAA,YACA;AAAA,cACE,OAAO,SAAS,CAAA;AAAA,cAChB,cAAc,CAAC,MAAM,EAAE,kBAAkB;AACvC,uBAAO,EAAE,kBAAkB,EAAE,SAAS,YAAA,GAAe,IAAI;AAAA,cAC3D;AAAA,cACA,cAAc,CAAC,SAAS;AACtB,4BAAY,KAAK;AACjB,gCAAgB,IAAI;AAAA,cACtB;AAAA,cACA,eAAe,CAAC,UAAU,cAAc,KAAK;AAAA,cAC7C,cAAc,EAAE,SAAS,MAAM,WAAW,MAAA;AAAA,cAC1C,OAAO;AAAA,cACP,aAAa;AAAA,YAAA;AAAA,YAEf;AAAA,UAAA;AAAA,QACF,CACD;AAAA,QACD;AAAA,UACEC,aAAAA;AAAAA,UACA;AAAA,YACE,WAAW;AAAA,YACX,OAAO;AAAA,YACP,SAAS,MAAM;AAEb,uBAAS;AAAA,gBACP,MAAM;AAAA,gBACN,SAAS,EAAE,IAAI,UAAU,IAAI,QAAA;AAAA,cAAQ,CACtC;AACD,6BAAe,KAAK;AAAA,YACtB;AAAA,YACA;AAAA,UAAA;AAAA,UAEF;AAAA,QAAA;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EACH;AAEJ;AAEA,SAAS,MAAM,EAAE,MAAM,YAAY,UAAU,UAAU;AACrD,SAAO,EAAE,GAAG,IAAI,EAAE,uBAAuB;AAAA,IACvC,SAAS,EAAE,MAAM,YAAY;AAAA,IAC7B,EAAEL,KAAAA,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS,MAAM;AACb,iBAAS,EAAE,MAAM,gBAAgB,SAAS,EAAE,IAAI,OAAA,GAAU;AAAA,MAC5D;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;AAQO,SAAS,SAAS,EAAE,MAAM,YAAY,cAA6B;AACxE,MAAI,QAAQ,UAAa,OAAO,KAAK,IAAI,EAAE,WAAW,EAAG;AAEzD,QAAM,EAAE,WAAW,cAAc,kBAAkB,SAAS;AAE5D,QAAM,OAAO,aACF,MAAM,GAAG,EACT,IAAA;AAEX,QAAM,aAAa;AAAA,IACjB;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EAAA;AAGF,SAAO;AAAA,IACH;AAAA,IACA;AAAA,MACE,SAAS,MAAM,WAAW,UAAU;AAAA,IAAA;AAAA,IAEtC,EAAEM,aAAAA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,OAAO,KAAK,QAAQ,MAAM,CAAC,MAAM,EAAE,aAAa;AAAA,MAChD,OAAO,EAAEC,6BAAc;AAAA,QACrB,MAAM,EAAE,MAAM,KAAK,MAAM,IAAI,KAAK,kBAAkB,SAAS,EAAA;AAAA,QAC7D,SAAS,MACP,OAAO;AAAA,UACL,WAAW,OAAO,MAAM,KAAK;AAAA,UAC7B;AAAA,QAAA;AAAA,MACF,CACH;AAAA,IAAA,CACF;AAAA,EAAA;AAIP;;;"}

package/dist/feedback/matches.d.ts

@@ -13,5 +13,5 @@ interface MatchTagProps {
 }
 export declare function MatchTag({ data, matchLinks, setPayload }: MatchTagProps): import('react').DetailedReactHTMLElement<{
     onClick: () => void;
-}, HTMLElement> | import('react').FunctionComponentElement<any>;
+}, HTMLElement> | import('react').FunctionComponentElement<any> | undefined;
 export {};

package/dist/feedback/matches.js

@@ -2,8 +2,8 @@ import { Divider, Switch, Icon, Overlay2 } from "@blueprintjs/core";
 import { Select } from "@blueprintjs/select";
 import h$1 from "./feedback.module.sass.js";
 import hyper from "@macrostrat/hyper";
-import { useState } from "react";
-import { useAPIResult, SaveButton, DataField, JSONView } from "@macrostrat/ui-components";
+import { useState, useEffect } from "react";
+import { SaveButton, DataField } from "@macrostrat/ui-components";
 import { LithologyTag } from "@macrostrat/data-components";
 const h = hyper.styled(h$1);
 function Matches({
@@ -79,9 +79,15 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
   const [selectedItem, setSelectedItem] = useState(h("div", "Select a match"));
   const [disabled, setDisabled] = useState(true);
   const [payload, setPayload] = useState({});
-  const data = useAPIResult(
-    "https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*" + inputValue + "*"
-  );
+  const [data, setData] = useState([]);
+  useEffect(() => {
+    if (!inputValue || inputValue.length < 3) return;
+    fetch(
+      "https://dev.macrostrat.org/api/pg/kg_global_entity?name=ilike.*" + inputValue + "*"
+    ).then((res) => res.json()).then((res) => {
+      setData(res);
+    });
+  }, [inputValue]);
   const items = data?.map((data2) => h(MatchTag, { data: data2, setPayload }));
   return h(
     Overlay2,
@@ -115,7 +121,7 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
                 setSelectedItem(item);
               },
               onQueryChange: (query) => setInputValue(query),
-              popoverProps: { minimal: true },
+              popoverProps: { minimal: true, usePortal: false },
               query: inputValue,
               placeholder: "Enter match name"
             },
@@ -156,86 +162,32 @@ function Match({ data, matchLinks, dispatch, nodeId }) {
   ]);
 }
 function MatchTag({ data, matchLinks, setPayload }) {
-  if (!data || Object.keys(data).length === 0) return;
-  if (data.lith_id || data?.type === "lith") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "lith" ? setPayload({ lith_id: data.id, name: data.name }) : null;
-        }
-      },
-      h(DataField, {
-        className: "match-item",
-        label: "Stratigraphic name",
-        value: h(LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
-          onClick: () => window.open(
-            matchLinks.strat_name + "/" + data.strat_name_id,
-            "_blank"
-          )
-        })
-      })
-    );
-  }
-  if (data.strat_name_id || data?.type === "strat_name") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "strat_name" ? setPayload({ strat_name_id: data.id, name: data.name }) : null;
-        }
-      },
-      h(DataField, {
-        className: "match-item",
-        label: "Stratigraphic name",
-        value: h(LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
-          onClick: () => window.open(
-            matchLinks.strat_name + "/" + data.strat_name_id,
-            "_blank"
-          )
-        })
-      })
-    );
-  }
-  if (data.lith_att_id || data?.type === "lith_att") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "lith_att" ? setPayload({ lith_att_id: data.id, name: data.name }) : null;
-        }
-      },
-      h(DataField, {
-        className: "match-item",
-        label: "Lithology attribute",
-        value: h(LithologyTag, {
-          data: { name: data.name, id: data.lith_att_id },
-          onClick: () => window.open(matchLinks.lith_att + "/" + data.lith_att_id, "_blank")
-        })
-      })
-    );
-  }
-  if (data.int_id || data?.type === "interval") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "interval" ? setPayload({ int_id: data.id, name: data.name }) : null;
-        }
-      },
-      h(DataField, {
-        label: "Interval",
-        className: "match-item",
-        value: h(LithologyTag, {
-          data: { name: data.name, id: data.id },
-          onClick: () => window.open(matchLinks.interval + "/" + data.int_id, "_blank")
-        })
+  if (data == void 0 || Object.keys(data).length === 0) return;
+  const { entity_id, entity_table, global_entity_id, name } = data;
+  const type = entity_table.split(".").pop();
+  const newPayload = {
+    entity_id,
+    entity_table: type,
+    global_entity_id,
+    name
+  };
+  return h(
+    "div",
+    {
+      onClick: () => setPayload(newPayload)
+    },
+    h(DataField, {
+      className: "match-item",
+      label: type.replace(/^./, (c) => c.toUpperCase()),
+      value: h(LithologyTag, {
+        data: { name: data.name, id: data.global_entity_id, lith_id: 1 },
+        onClick: () => window.open(
+          matchLinks.type + "/" + data.entity_id,
+          "_blank"
+        )
       })
-    );
-  }
-  return h(JSONView, { data });
+    })
+  );
 }
 export {
   MatchTag,

package/dist/feedback/matches.js.map

@@ -1 +1 @@
-{"version":3,"file":"matches.js","sources":["../../src/feedback/matches.ts"],"sourcesContent":["import { Switch } from \"@blueprintjs/core\";\nimport { Select } from \"@blueprintjs/select\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useState } from \"react\";\nimport { Icon, Divider, Overlay2 } from \"@blueprintjs/core\";\nimport { JSONView, SaveButton } from \"@macrostrat/ui-components\";\nimport { useAPIResult, DataField } from \"@macrostrat/ui-components\";\nimport { LithologyTag } from \"@macrostrat/data-components\";\n\nconst h = hyper.styled(styles);\n\nexport function Matches({\n  match,\n  setMatchLinks,\n  matchLinks,\n  selectedNodes,\n  tree,\n  dispatch,\n}) {\n  const [overlayOpen, setOverlayOpen] = useState(false);\n\n  let nodeMatch = null;\n  if (selectedNodes.length === 1) {\n    nodeMatch = findMatchingNode(tree, selectedNodes[0]);\n  }\n\n  return h.if(matchLinks)(\"div\", [\n    h(Divider),\n    h(Switch, {\n      label: \"Match mode\",\n      checked: match !== undefined,\n      onChange: (e) => {\n        setMatchLinks(match === undefined ? matchLinks || {} : undefined);\n        dispatch({ type: \"toggle-match-mode\" });\n      },\n    }),\n    h.if(nodeMatch && match)(Match, {\n      data: nodeMatch?.match,\n      matchLinks: matchLinks,\n      dispatch,\n      nodeId: nodeMatch?.id,\n    }),\n    h.if(selectedNodes.length == 1 && !nodeMatch?.match && match)(\n      \"div.add-match-container\",\n      [\n        h(\n          \"div.add-type\",\n          {\n            onClick: () => {\n              setOverlayOpen(true);\n            },\n          },\n          [h(\"p.add-match-text\", \"Add match\"), h(Icon, { icon: \"plus\" })],\n        ),\n        h(MatchOverlay, {\n          isOpen: overlayOpen,\n          setOverlayOpen,\n          nodeMatch,\n          dispatch,\n        }),\n      ],\n    ),\n  ]);\n}\n\nfunction findMatchingNode(tree, nodeId) {\n  let match = null;\n\n  function traverse(node) {\n    if (node.id === nodeId) {\n      match = node;\n      return true;\n    }\n    if (Array.isArray(node.children)) {\n      for (const child of node.children) {\n        if (traverse(child)) return true;\n      }\n    }\n    return false;\n  }\n\n  tree.forEach(traverse);\n  return match;\n}\n\nfunction MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {\n  const [inputValue, setInputValue] = useState(nodeMatch?.name || \"\");\n  const [selectedItem, setSelectedItem] = useState(h(\"div\", \"Select a match\"));\n  const [disabled, setDisabled] = useState(true);\n  const [payload, setPayload] = useState({});\n\n  const data = useAPIResult(\n    \"https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*\" +\n      inputValue +\n      \"*\",\n  );\n  const items = data?.map((data) => h(MatchTag, { data, setPayload }));\n\n  return h(\n    Overlay2,\n    {\n      isOpen,\n    },\n    h(\n      \"div.overlay-container\",\n      h(\"div.add-type-overlay\", [\n        h(\"h2.title\", [\n          \"Add match with \" + nodeMatch.name,\n          h(Icon, {\n            icon: \"cross\",\n            className: \"close-icon\",\n            onClick: () => {\n              setOverlayOpen(false);\n            },\n            style: { cursor: \"pointer\", color: \"red\" },\n          }),\n        ]),\n        h(\"div.form-group\", [\n          h(\n            Select,\n            {\n              items: items || [],\n              itemRenderer: (item, { handleClick }) => {\n                return h(\"div.match-item\", { onClick: handleClick }, item);\n              },\n              onItemSelect: (item) => {\n                setDisabled(false);\n                setSelectedItem(item);\n              },\n              onQueryChange: (query) => setInputValue(query),\n              popoverProps: { minimal: true },\n              query: inputValue,\n              placeholder: \"Enter match name\",\n            },\n            selectedItem,\n          ),\n        ]),\n        h(\n          SaveButton,\n          {\n            className: \"save-btn\",\n            small: true,\n            onClick: () => {\n              // Handle save changes\n              dispatch({\n                type: \"add-match\",\n                payload: { id: nodeMatch.id, payload },\n              });\n              setOverlayOpen(false);\n            },\n            disabled,\n          },\n          \"Save changes\",\n        ),\n      ]),\n    ),\n  );\n}\n\nfunction Match({ data, matchLinks, dispatch, nodeId }) {\n  return h.if(data)(\"div.match-container\", [\n    MatchTag({ data, matchLinks }),\n    h(Icon, {\n      icon: \"cross\",\n      color: \"red\",\n      className: \"close-btn\",\n      onClick: () => {\n        dispatch({ type: \"remove-match\", payload: { id: nodeId } });\n      },\n    }),\n  ]);\n}\n\ninterface MatchTagProps {\n  data: any;\n  matchLinks?: Record<string, string>;\n  setPayload?: (payload: Record<string, any>) => void;\n}\n\nexport function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {\n  if (!data || Object.keys(data).length === 0) return;\n\n  if (data.lith_id || data?.type === \"lith\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith\"\n            ? setPayload({ lith_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Stratigraphic name\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color },\n          onClick: () =>\n            window.open(\n              matchLinks.strat_name + \"/\" + data.strat_name_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.strat_name_id || data?.type === \"strat_name\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"strat_name\"\n            ? setPayload({ strat_name_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Stratigraphic name\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id, color: data.color },\n          onClick: () =>\n            window.open(\n              matchLinks.strat_name + \"/\" + data.strat_name_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n  }\n\n  if (data.lith_att_id || data?.type === \"lith_att\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"lith_att\"\n            ? setPayload({ lith_att_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: \"Lithology attribute\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.lith_att_id },\n          onClick: () =>\n            window.open(matchLinks.lith_att + \"/\" + data.lith_att_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  if (data.int_id || data?.type === \"interval\") {\n    return h(\n      \"div\",\n      {\n        onClick: () => {\n          data.type === \"interval\"\n            ? setPayload({ int_id: data.id, name: data.name })\n            : null;\n        },\n      },\n      h(DataField, {\n        label: \"Interval\",\n        className: \"match-item\",\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.id },\n          onClick: () =>\n            window.open(matchLinks.interval + \"/\" + data.int_id, \"_blank\"),\n        }),\n      }),\n    );\n  }\n\n  return h(JSONView, { data });\n}\n"],"names":["styles","data"],"mappings":"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"}
+{"version":3,"file":"matches.js","sources":["../../src/feedback/matches.ts"],"sourcesContent":["import { Switch } from \"@blueprintjs/core\";\nimport { Select } from \"@blueprintjs/select\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useState, useEffect } from \"react\";\nimport { Icon, Divider, Overlay2 } from \"@blueprintjs/core\";\nimport { JSONView, SaveButton } from \"@macrostrat/ui-components\";\nimport { useAPIResult, DataField } from \"@macrostrat/ui-components\";\nimport { LithologyTag } from \"@macrostrat/data-components\";\n\nconst h = hyper.styled(styles);\n\nexport function Matches({\n  match,\n  setMatchLinks,\n  matchLinks,\n  selectedNodes,\n  tree,\n  dispatch,\n}) {\n  const [overlayOpen, setOverlayOpen] = useState(false);\n\n  let nodeMatch = null;\n  if (selectedNodes.length === 1) {\n    nodeMatch = findMatchingNode(tree, selectedNodes[0]);\n  }\n\n  return h.if(matchLinks)(\"div\", [\n    h(Divider),\n    h(Switch, {\n      label: \"Match mode\",\n      checked: match !== undefined,\n      onChange: (e) => {\n        setMatchLinks(match === undefined ? matchLinks || {} : undefined);\n        dispatch({ type: \"toggle-match-mode\" });\n      },\n    }),\n    h.if(nodeMatch && match)(Match, {\n      data: nodeMatch?.match,\n      matchLinks: matchLinks,\n      dispatch,\n      nodeId: nodeMatch?.id,\n    }),\n    h.if(selectedNodes.length == 1 && !nodeMatch?.match && match)(\n      \"div.add-match-container\",\n      [\n        h(\n          \"div.add-type\",\n          {\n            onClick: () => {\n              setOverlayOpen(true);\n            },\n          },\n          [h(\"p.add-match-text\", \"Add match\"), h(Icon, { icon: \"plus\" })],\n        ),\n        h(MatchOverlay, {\n          isOpen: overlayOpen,\n          setOverlayOpen,\n          nodeMatch,\n          dispatch,\n        }),\n      ],\n    ),\n  ]);\n}\n\nfunction findMatchingNode(tree, nodeId) {\n  let match = null;\n\n  function traverse(node) {\n    if (node.id === nodeId) {\n      match = node;\n      return true;\n    }\n    if (Array.isArray(node.children)) {\n      for (const child of node.children) {\n        if (traverse(child)) return true;\n      }\n    }\n    return false;\n  }\n\n  tree.forEach(traverse);\n  return match;\n}\n\nfunction MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {\n  const [inputValue, setInputValue] = useState(nodeMatch?.name || \"\");\n  const [selectedItem, setSelectedItem] = useState(h(\"div\", \"Select a match\"));\n  const [disabled, setDisabled] = useState(true);\n  const [payload, setPayload] = useState({});\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    if (!inputValue || inputValue.length < 3) return;\n\n    fetch(\n      \"https://dev.macrostrat.org/api/pg/kg_global_entity?name=ilike.*\" +\n        inputValue +\n        \"*\"\n    )\n      .then((res) => res.json())\n      .then((res) => {\n        setData(res);\n      });\n  }, [inputValue]);\n\n  const items = data?.map((data) => h(MatchTag, { data, setPayload }));\n\n  return h(\n    Overlay2,\n    {\n      isOpen,\n    },\n    h(\n      \"div.overlay-container\",\n      h(\"div.add-type-overlay\", [\n        h(\"h2.title\", [\n          \"Add match with \" + nodeMatch.name,\n          h(Icon, {\n            icon: \"cross\",\n            className: \"close-icon\",\n            onClick: () => {\n              setOverlayOpen(false);\n            },\n            style: { cursor: \"pointer\", color: \"red\" },\n          }),\n        ]),\n        h(\"div.form-group\", [\n          h(\n            Select,\n            {\n              items: items || [],\n              itemRenderer: (item, { handleClick }) => {\n                return h(\"div.match-item\", { onClick: handleClick }, item);\n              },\n              onItemSelect: (item) => {\n                setDisabled(false);\n                setSelectedItem(item);\n              },\n              onQueryChange: (query) => setInputValue(query),\n              popoverProps: { minimal: true, usePortal: false },\n              query: inputValue,\n              placeholder: \"Enter match name\",\n            },\n            selectedItem,\n          ),\n        ]),\n        h(\n          SaveButton,\n          {\n            className: \"save-btn\",\n            small: true,\n            onClick: () => {\n              // Handle save changes\n              dispatch({\n                type: \"add-match\",\n                payload: { id: nodeMatch.id, payload },\n              });\n              setOverlayOpen(false);\n            },\n            disabled,\n          },\n          \"Save changes\",\n        ),\n      ]),\n    ),\n  );\n}\n\nfunction Match({ data, matchLinks, dispatch, nodeId }) {\n  return h.if(data)(\"div.match-container\", [\n    MatchTag({ data, matchLinks }),\n    h(Icon, {\n      icon: \"cross\",\n      color: \"red\",\n      className: \"close-btn\",\n      onClick: () => {\n        dispatch({ type: \"remove-match\", payload: { id: nodeId } });\n      },\n    }),\n  ]);\n}\n\ninterface MatchTagProps {\n  data: any;\n  matchLinks?: Record<string, string>;\n  setPayload?: (payload: Record<string, any>) => void;\n}\n\nexport function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {\n  if (data == undefined || Object.keys(data).length === 0) return;\n\n  const { entity_id, entity_table, global_entity_id, name } = data\n\n  const type = entity_table\n            .split(\".\")\n            .pop()\n\n  const newPayload = {\n    entity_id,\n    entity_table: type,\n    global_entity_id,\n    name,\n  }\n\n  return h(\n      \"div\",\n      {\n        onClick: () => setPayload(newPayload)\n      },\n      h(DataField, {\n        className: \"match-item\",\n        label: type.replace(/^./, (c) => c.toUpperCase()),\n        value: h(LithologyTag, {\n          data: { name: data.name, id: data.global_entity_id, lith_id: 1 },\n          onClick: () =>\n            window.open(\n              matchLinks.type + \"/\" + data.entity_id,\n              \"_blank\",\n            ),\n        }),\n      }),\n    );\n\n  return h(JSONView, { data });\n}\n"],"names":["styles","data"],"mappings":"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"}

package/dist/feedback/node.cjs

@@ -41,7 +41,6 @@ function Node({
 }) {
   let highlighted = isNodeHighlighted(node, tree);
   let active = isNodeActive(node, tree);
-  console.log("viewOnly", viewOnly);
   const dispatch = editState.useTreeDispatch();
   if (!node.data?.type) {
     node.data.type = { name: "lith", color: "rgb(107, 255, 91)" };

package/dist/feedback/node.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"node.cjs","sources":["../../src/feedback/node.ts"],"sourcesContent":["import { NodeApi, TreeApi } from \"react-arborist\";\nimport { TreeData } from \"./types\";\nimport { EntityTag } from \"../extractions\";\nimport { useTreeDispatch } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nconst h = hyper.styled(styles);\n\nfunction isSelected(searchNode: TreeData, treeNode: TreeData) {\n  return searchNode.id == treeNode.id;\n  // We could also select children of the search node here if we wanted to\n}\n\nfunction isNodeHighlighted(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  // We treat no selection as all nodes being active. We may add some nuance later\n  if (tree.selectedNodes.length == 0) {\n    return true;\n  }\n\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n\n  // Check if the parent node is highlighted\n  if (node.parent != null && isNodeHighlighted(node.parent, tree)) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction isNodeActive(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n  return false;\n}\n\nfunction Node({\n  node,\n  style,\n  dragHandle,\n  tree,\n  matchComponent,\n  viewOnly,\n}: any) {\n  let highlighted: boolean = isNodeHighlighted(node, tree);\n  let active: boolean = isNodeActive(node, tree);\n\n  console.log(\"viewOnly\", viewOnly);\n\n  const dispatch = useTreeDispatch();\n\n  if (!node.data?.type) {\n    node.data.type = { name: \"lith\", color: \"rgb(107, 255, 91)\" };\n  }\n\n  return h(\n    \"div.node\" + (!viewOnly ? \".clickable\" : \"\"),\n    { style, ref: dragHandle },\n    h(EntityTag, {\n      data: node.data,\n      active: viewOnly ? false : active,\n      highlighted: viewOnly ? true : highlighted,\n      matchComponent,\n      onClickType() {\n        dispatch({ type: \"toggle-entity-type-selector\" });\n      },\n    }),\n  );\n}\n\nexport default Node;\n"],"names":["hyper","styles","useTreeDispatch","EntityTag"],"mappings":";;;;;;;AAOA,MAAM,IAAIA,eAAAA,QAAM,OAAOC,uBAAM;AAE7B,SAAS,WAAW,YAAsB,UAAoB;AAC5D,SAAO,WAAW,MAAM,SAAS;AAEnC;AAEA,SAAS,kBAAkB,MAAyB,MAAyB;AAE3E,MAAI,KAAK,cAAc,UAAU,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AAGA,MAAI,KAAK,UAAU,QAAQ,kBAAkB,KAAK,QAAQ,IAAI,GAAG;AAC/D,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,MAAyB,MAAyB;AACtE,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAQ;AACN,MAAI,cAAuB,kBAAkB,MAAM,IAAI;AACvD,MAAI,SAAkB,aAAa,MAAM,IAAI;AAE7C,UAAQ,IAAI,YAAY,QAAQ;AAEhC,QAAM,WAAWC,UAAAA,gBAAA;AAEjB,MAAI,CAAC,KAAK,MAAM,MAAM;AACpB,SAAK,KAAK,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAA;AAAA,EAC1C;AAEA,SAAO;AAAA,IACL,cAAc,CAAC,WAAW,eAAe;AAAA,IACzC,EAAE,OAAO,KAAK,WAAA;AAAA,IACd,EAAEC,MAAAA,WAAW;AAAA,MACX,MAAM,KAAK;AAAA,MACX,QAAQ,WAAW,QAAQ;AAAA,MAC3B,aAAa,WAAW,OAAO;AAAA,MAC/B;AAAA,MACA,cAAc;AACZ,iBAAS,EAAE,MAAM,+BAA+B;AAAA,MAClD;AAAA,IAAA,CACD;AAAA,EAAA;AAEL;;"}
+{"version":3,"file":"node.cjs","sources":["../../src/feedback/node.ts"],"sourcesContent":["import { NodeApi, TreeApi } from \"react-arborist\";\nimport { TreeData } from \"./types\";\nimport { EntityTag } from \"../extractions\";\nimport { useTreeDispatch } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nconst h = hyper.styled(styles);\n\nfunction isSelected(searchNode: TreeData, treeNode: TreeData) {\n  return searchNode.id == treeNode.id;\n  // We could also select children of the search node here if we wanted to\n}\n\nfunction isNodeHighlighted(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  // We treat no selection as all nodes being active. We may add some nuance later\n  if (tree.selectedNodes.length == 0) {\n    return true;\n  }\n\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n\n  // Check if the parent node is highlighted\n  if (node.parent != null && isNodeHighlighted(node.parent, tree)) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction isNodeActive(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n  return false;\n}\n\nfunction Node({\n  node,\n  style,\n  dragHandle,\n  tree,\n  matchComponent,\n  viewOnly,\n}: any) {\n  let highlighted: boolean = isNodeHighlighted(node, tree);\n  let active: boolean = isNodeActive(node, tree);\n\n  const dispatch = useTreeDispatch();\n\n  if (!node.data?.type) {\n    node.data.type = { name: \"lith\", color: \"rgb(107, 255, 91)\" };\n  }\n\n  return h(\n    \"div.node\" + (!viewOnly ? \".clickable\" : \"\"),\n    { style, ref: dragHandle },\n    h(EntityTag, {\n      data: node.data,\n      active: viewOnly ? false : active,\n      highlighted: viewOnly ? true : highlighted,\n      matchComponent,\n      onClickType() {\n        dispatch({ type: \"toggle-entity-type-selector\" });\n      },\n    }),\n  );\n}\n\nexport default Node;\n"],"names":["hyper","styles","useTreeDispatch","EntityTag"],"mappings":";;;;;;;AAOA,MAAM,IAAIA,eAAAA,QAAM,OAAOC,uBAAM;AAE7B,SAAS,WAAW,YAAsB,UAAoB;AAC5D,SAAO,WAAW,MAAM,SAAS;AAEnC;AAEA,SAAS,kBAAkB,MAAyB,MAAyB;AAE3E,MAAI,KAAK,cAAc,UAAU,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AAGA,MAAI,KAAK,UAAU,QAAQ,kBAAkB,KAAK,QAAQ,IAAI,GAAG;AAC/D,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,MAAyB,MAAyB;AACtE,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAQ;AACN,MAAI,cAAuB,kBAAkB,MAAM,IAAI;AACvD,MAAI,SAAkB,aAAa,MAAM,IAAI;AAE7C,QAAM,WAAWC,UAAAA,gBAAA;AAEjB,MAAI,CAAC,KAAK,MAAM,MAAM;AACpB,SAAK,KAAK,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAA;AAAA,EAC1C;AAEA,SAAO;AAAA,IACL,cAAc,CAAC,WAAW,eAAe;AAAA,IACzC,EAAE,OAAO,KAAK,WAAA;AAAA,IACd,EAAEC,MAAAA,WAAW;AAAA,MACX,MAAM,KAAK;AAAA,MACX,QAAQ,WAAW,QAAQ;AAAA,MAC3B,aAAa,WAAW,OAAO;AAAA,MAC/B;AAAA,MACA,cAAc;AACZ,iBAAS,EAAE,MAAM,+BAA+B;AAAA,MAClD;AAAA,IAAA,CACD;AAAA,EAAA;AAEL;;"}

package/dist/feedback/node.js

@@ -38,7 +38,6 @@ function Node({
 }) {
   let highlighted = isNodeHighlighted(node, tree);
   let active = isNodeActive(node, tree);
-  console.log("viewOnly", viewOnly);
   const dispatch = useTreeDispatch();
   if (!node.data?.type) {
     node.data.type = { name: "lith", color: "rgb(107, 255, 91)" };

package/dist/feedback/node.js.map

@@ -1 +1 @@
-{"version":3,"file":"node.js","sources":["../../src/feedback/node.ts"],"sourcesContent":["import { NodeApi, TreeApi } from \"react-arborist\";\nimport { TreeData } from \"./types\";\nimport { EntityTag } from \"../extractions\";\nimport { useTreeDispatch } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nconst h = hyper.styled(styles);\n\nfunction isSelected(searchNode: TreeData, treeNode: TreeData) {\n  return searchNode.id == treeNode.id;\n  // We could also select children of the search node here if we wanted to\n}\n\nfunction isNodeHighlighted(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  // We treat no selection as all nodes being active. We may add some nuance later\n  if (tree.selectedNodes.length == 0) {\n    return true;\n  }\n\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n\n  // Check if the parent node is highlighted\n  if (node.parent != null && isNodeHighlighted(node.parent, tree)) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction isNodeActive(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n  return false;\n}\n\nfunction Node({\n  node,\n  style,\n  dragHandle,\n  tree,\n  matchComponent,\n  viewOnly,\n}: any) {\n  let highlighted: boolean = isNodeHighlighted(node, tree);\n  let active: boolean = isNodeActive(node, tree);\n\n  console.log(\"viewOnly\", viewOnly);\n\n  const dispatch = useTreeDispatch();\n\n  if (!node.data?.type) {\n    node.data.type = { name: \"lith\", color: \"rgb(107, 255, 91)\" };\n  }\n\n  return h(\n    \"div.node\" + (!viewOnly ? \".clickable\" : \"\"),\n    { style, ref: dragHandle },\n    h(EntityTag, {\n      data: node.data,\n      active: viewOnly ? false : active,\n      highlighted: viewOnly ? true : highlighted,\n      matchComponent,\n      onClickType() {\n        dispatch({ type: \"toggle-entity-type-selector\" });\n      },\n    }),\n  );\n}\n\nexport default Node;\n"],"names":["styles"],"mappings":";;;;AAOA,MAAM,IAAI,MAAM,OAAOA,GAAM;AAE7B,SAAS,WAAW,YAAsB,UAAoB;AAC5D,SAAO,WAAW,MAAM,SAAS;AAEnC;AAEA,SAAS,kBAAkB,MAAyB,MAAyB;AAE3E,MAAI,KAAK,cAAc,UAAU,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AAGA,MAAI,KAAK,UAAU,QAAQ,kBAAkB,KAAK,QAAQ,IAAI,GAAG;AAC/D,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,MAAyB,MAAyB;AACtE,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAQ;AACN,MAAI,cAAuB,kBAAkB,MAAM,IAAI;AACvD,MAAI,SAAkB,aAAa,MAAM,IAAI;AAE7C,UAAQ,IAAI,YAAY,QAAQ;AAEhC,QAAM,WAAW,gBAAA;AAEjB,MAAI,CAAC,KAAK,MAAM,MAAM;AACpB,SAAK,KAAK,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAA;AAAA,EAC1C;AAEA,SAAO;AAAA,IACL,cAAc,CAAC,WAAW,eAAe;AAAA,IACzC,EAAE,OAAO,KAAK,WAAA;AAAA,IACd,EAAE,WAAW;AAAA,MACX,MAAM,KAAK;AAAA,MACX,QAAQ,WAAW,QAAQ;AAAA,MAC3B,aAAa,WAAW,OAAO;AAAA,MAC/B;AAAA,MACA,cAAc;AACZ,iBAAS,EAAE,MAAM,+BAA+B;AAAA,MAClD;AAAA,IAAA,CACD;AAAA,EAAA;AAEL;"}
+{"version":3,"file":"node.js","sources":["../../src/feedback/node.ts"],"sourcesContent":["import { NodeApi, TreeApi } from \"react-arborist\";\nimport { TreeData } from \"./types\";\nimport { EntityTag } from \"../extractions\";\nimport { useTreeDispatch } from \"./edit-state\";\nimport styles from \"./feedback.module.sass\";\nimport hyper from \"@macrostrat/hyper\";\n\nconst h = hyper.styled(styles);\n\nfunction isSelected(searchNode: TreeData, treeNode: TreeData) {\n  return searchNode.id == treeNode.id;\n  // We could also select children of the search node here if we wanted to\n}\n\nfunction isNodeHighlighted(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  // We treat no selection as all nodes being active. We may add some nuance later\n  if (tree.selectedNodes.length == 0) {\n    return true;\n  }\n\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n\n  // Check if the parent node is highlighted\n  if (node.parent != null && isNodeHighlighted(node.parent, tree)) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction isNodeActive(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {\n  for (const selectedNode of tree.selectedNodes) {\n    if (isSelected(node.data, selectedNode.data)) {\n      return true;\n    }\n  }\n  return false;\n}\n\nfunction Node({\n  node,\n  style,\n  dragHandle,\n  tree,\n  matchComponent,\n  viewOnly,\n}: any) {\n  let highlighted: boolean = isNodeHighlighted(node, tree);\n  let active: boolean = isNodeActive(node, tree);\n\n  const dispatch = useTreeDispatch();\n\n  if (!node.data?.type) {\n    node.data.type = { name: \"lith\", color: \"rgb(107, 255, 91)\" };\n  }\n\n  return h(\n    \"div.node\" + (!viewOnly ? \".clickable\" : \"\"),\n    { style, ref: dragHandle },\n    h(EntityTag, {\n      data: node.data,\n      active: viewOnly ? false : active,\n      highlighted: viewOnly ? true : highlighted,\n      matchComponent,\n      onClickType() {\n        dispatch({ type: \"toggle-entity-type-selector\" });\n      },\n    }),\n  );\n}\n\nexport default Node;\n"],"names":["styles"],"mappings":";;;;AAOA,MAAM,IAAI,MAAM,OAAOA,GAAM;AAE7B,SAAS,WAAW,YAAsB,UAAoB;AAC5D,SAAO,WAAW,MAAM,SAAS;AAEnC;AAEA,SAAS,kBAAkB,MAAyB,MAAyB;AAE3E,MAAI,KAAK,cAAc,UAAU,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AAGA,MAAI,KAAK,UAAU,QAAQ,kBAAkB,KAAK,QAAQ,IAAI,GAAG;AAC/D,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,MAAyB,MAAyB;AACtE,aAAW,gBAAgB,KAAK,eAAe;AAC7C,QAAI,WAAW,KAAK,MAAM,aAAa,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAQ;AACN,MAAI,cAAuB,kBAAkB,MAAM,IAAI;AACvD,MAAI,SAAkB,aAAa,MAAM,IAAI;AAE7C,QAAM,WAAW,gBAAA;AAEjB,MAAI,CAAC,KAAK,MAAM,MAAM;AACpB,SAAK,KAAK,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAA;AAAA,EAC1C;AAEA,SAAO;AAAA,IACL,cAAc,CAAC,WAAW,eAAe;AAAA,IACzC,EAAE,OAAO,KAAK,WAAA;AAAA,IACd,EAAE,WAAW;AAAA,MACX,MAAM,KAAK;AAAA,MACX,QAAQ,WAAW,QAAQ;AAAA,MAC3B,aAAa,WAAW,OAAO;AAAA,MAC/B;AAAA,MACA,cAAc;AACZ,iBAAS,EAAE,MAAM,+BAA+B;AAAA,MAClD;AAAA,IAAA,CACD;AAAA,EAAA;AAEL;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/feedback-components",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "description": "",
   "repository": {
     "type": "git",
@@ -50,10 +50,10 @@
     "@blueprintjs/core": "^6.11.3",
     "@blueprintjs/select": "^6.1.8",
     "@macrostrat/color-utils": "^1.2.1",
-    "@macrostrat/data-components": "^1.1.5",
-    "@macrostrat/data-sheet": "^3.0.4",
+    "@macrostrat/data-components": "^1.1.8",
+    "@macrostrat/data-sheet": "^4.0.0-dev1",
     "@macrostrat/hyper": "^3.1.0",
-    "@macrostrat/ui-components": "^5.0.7",
+    "@macrostrat/ui-components": "^5.0.8",
     "classnames": "^2.5.1",
     "d3-force": "^3.0.0",
     "immutability-helper": "^3.1.1",

package/src/extractions/index.ts

@@ -166,7 +166,6 @@ export function EntityTag({
   const className = classNames(
     {
       matched: match != null,
-      type: data.type?.name ?? "lith",
     },
     "entity",
   );

package/src/feedback/matches.ts

@@ -2,7 +2,7 @@ import { Switch } from "@blueprintjs/core";
 import { Select } from "@blueprintjs/select";
 import styles from "./feedback.module.sass";
 import hyper from "@macrostrat/hyper";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Icon, Divider, Overlay2 } from "@blueprintjs/core";
 import { JSONView, SaveButton } from "@macrostrat/ui-components";
 import { useAPIResult, DataField } from "@macrostrat/ui-components";
@@ -89,12 +89,22 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
   const [selectedItem, setSelectedItem] = useState(h("div", "Select a match"));
   const [disabled, setDisabled] = useState(true);
   const [payload, setPayload] = useState({});
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    if (!inputValue || inputValue.length < 3) return;
+
+    fetch(
+      "https://dev.macrostrat.org/api/pg/kg_global_entity?name=ilike.*" +
+        inputValue +
+        "*"
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        setData(res);
+      });
+  }, [inputValue]);
 
-  const data = useAPIResult(
-    "https://dev.macrostrat.org/api/pg/type_lookup?name=ilike.*" +
-      inputValue +
-      "*",
-  );
   const items = data?.map((data) => h(MatchTag, { data, setPayload }));
 
   return h(
@@ -129,7 +139,7 @@ function MatchOverlay({ isOpen, setOverlayOpen, nodeMatch, dispatch }) {
                 setSelectedItem(item);
               },
               onQueryChange: (query) => setInputValue(query),
-              popoverProps: { minimal: true },
+              popoverProps: { minimal: true, usePortal: false },
               query: inputValue,
               placeholder: "Enter match name",
             },
@@ -179,101 +189,39 @@ interface MatchTagProps {
 }
 
 export function MatchTag({ data, matchLinks, setPayload }: MatchTagProps) {
-  if (!data || Object.keys(data).length === 0) return;
+  if (data == undefined || Object.keys(data).length === 0) return;
 
-  if (data.lith_id || data?.type === "lith") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "lith"
-            ? setPayload({ lith_id: data.id, name: data.name })
-            : null;
-        },
-      },
-      h(DataField, {
-        className: "match-item",
-        label: "Stratigraphic name",
-        value: h(LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
-          onClick: () =>
-            window.open(
-              matchLinks.strat_name + "/" + data.strat_name_id,
-              "_blank",
-            ),
-        }),
-      }),
-    );
+  const { entity_id, entity_table, global_entity_id, name } = data
+
+  const type = entity_table
+            .split(".")
+            .pop()
+
+  const newPayload = {
+    entity_id,
+    entity_table: type,
+    global_entity_id,
+    name,
   }
 
-  if (data.strat_name_id || data?.type === "strat_name") {
-    return h(
+  return h(
       "div",
       {
-        onClick: () => {
-          data.type === "strat_name"
-            ? setPayload({ strat_name_id: data.id, name: data.name })
-            : null;
-        },
+        onClick: () => setPayload(newPayload)
       },
       h(DataField, {
         className: "match-item",
-        label: "Stratigraphic name",
+        label: type.replace(/^./, (c) => c.toUpperCase()),
         value: h(LithologyTag, {
-          data: { name: data.name, id: data.id, color: data.color },
+          data: { name: data.name, id: data.global_entity_id, lith_id: 1 },
           onClick: () =>
             window.open(
-              matchLinks.strat_name + "/" + data.strat_name_id,
+              matchLinks.type + "/" + data.entity_id,
               "_blank",
             ),
         }),
       }),
     );
-  }
-
-  if (data.lith_att_id || data?.type === "lith_att") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "lith_att"
-            ? setPayload({ lith_att_id: data.id, name: data.name })
-            : null;
-        },
-      },
-      h(DataField, {
-        className: "match-item",
-        label: "Lithology attribute",
-        value: h(LithologyTag, {
-          data: { name: data.name, id: data.lith_att_id },
-          onClick: () =>
-            window.open(matchLinks.lith_att + "/" + data.lith_att_id, "_blank"),
-        }),
-      }),
-    );
-  }
-
-  if (data.int_id || data?.type === "interval") {
-    return h(
-      "div",
-      {
-        onClick: () => {
-          data.type === "interval"
-            ? setPayload({ int_id: data.id, name: data.name })
-            : null;
-        },
-      },
-      h(DataField, {
-        label: "Interval",
-        className: "match-item",
-        value: h(LithologyTag, {
-          data: { name: data.name, id: data.id },
-          onClick: () =>
-            window.open(matchLinks.interval + "/" + data.int_id, "_blank"),
-        }),
-      }),
-    );
-  }
 
   return h(JSONView, { data });
 }

package/src/feedback/node.ts

@@ -52,8 +52,6 @@ function Node({
   let highlighted: boolean = isNodeHighlighted(node, tree);
   let active: boolean = isNodeActive(node, tree);
 
-  console.log("viewOnly", viewOnly);
-
   const dispatch = useTreeDispatch();
 
   if (!node.data?.type) {