@macrostrat/feedback-components 1.1.9 → 2.0.0

package/dist/feedback-components.css

@@ -0,0 +1,343 @@
+._entities_m1o0j_1 {
+  list-style: none;
+  padding-left: 0;
+}
+._entities_m1o0j_1 ._entities_m1o0j_1 ul {
+  list-style: none;
+}
+
+._entity_m1o0j_9 {
+  margin: 0.2em 0 0.5em;
+  padding-right: 3px;
+}:root {
+  --text-line-height: 3em;
+  --main-extra-width: 200px;
+}
+
+._page-wrapper_65dbg_6 {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  gap: 2em;
+  align-items: flex-start;
+}
+
+._feedback-container_65dbg_14 {
+  flex: 4;
+}
+
+._control-panel_65dbg_18 {
+  flex: 1;
+  height: auto;
+}
+
+._control-content_65dbg_23 {
+  position: sticky;
+  top: 0;
+}
+
+._feedback-component_65dbg_28 {
+  position: relative;
+  width: 800px;
+}
+._feedback-component_65dbg_28 > svg {
+  width: 800px;
+}
+
+circle {
+  border: 1px solid black;
+}
+
+._selected_65dbg_40 {
+  border: 1px solid white;
+}
+
+._feedback-text_65dbg_44 {
+  margin-bottom: 2em;
+}
+
+._entity-panel_65dbg_48 {
+  position: relative;
+  max-height: 600px;
+  width: calc(100% - 2em);
+  flex: 1;
+  min-height: 100px;
+  padding: 1em;
+  background: var(--panel-secondary-background-color);
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px var(--panel-border-color) inset;
+}
+
+._selection-tree_65dbg_60 {
+  margin: -1em 0;
+  padding: 1em 0;
+}
+
+._type-list_65dbg_65 {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(10, auto);
+  gap: 0.2em;
+}
+._type-list_65dbg_65 ._type-tag_65dbg_71 {
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+}
+
+._description_65dbg_76 {
+  max-width: 300px;
+  padding: 0.5em;
+}
+
+mark {
+  border-radius: 0.2em;
+  cursor: pointer;
+  color: black !important;
+}
+
+[role=treeitem] {
+  width: auto !important;
+}
+
+._highlight_65dbg_91 {
+  padding: 0.2em 0;
+  border-radius: 0.2em;
+  position: relative;
+  zIndex: 10;
+}
+
+._clickable_65dbg_98 {
+  cursor: pointer;
+}
+
+._feedback-text-wrapper_65dbg_102 {
+  position: relative;
+  z-index: 0;
+  overflow: visible;
+  line-height: var(--text-line-height);
+}
+
+._type-container_65dbg_109 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 1em;
+}
+
+._add-type_65dbg_116 {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0.5em;
+  align-items: center;
+}
+._add-type_65dbg_116 p {
+  margin: 0;
+}
+
+._overlay-container_65dbg_127 {
+  height: 80vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+._overlay-container_65dbg_127 ._add-type-overlay_65dbg_134 {
+  background-color: var(--tertiary-background);
+  padding: 0.5em 1em;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  border-radius: 0.2em;
+}
+._overlay-container_65dbg_127 ._add-type-overlay_65dbg_134 ._title_65dbg_142 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+._overlay-container_65dbg_127 ._add-type-overlay_65dbg_134 h2 {
+  margin: 0;
+}
+._overlay-container_65dbg_127 ._add-type-overlay_65dbg_134 ._form-group_65dbg_150 {
+  display: flex;
+  gap: 3em;
+}
+._overlay-container_65dbg_127 ._add-type-overlay_65dbg_134 ._form-group_65dbg_150 ._text-inputs_65dbg_154 {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+._icons_65dbg_160 {
+  display: flex;
+  gap: 0.25em;
+}
+
+._node-label_65dbg_165 {
+  fill: var(--text-emphasized-color);
+  fontSize: 10px;
+  pointerEvents: none;
+}
+
+._match-item_65dbg_171 {
+  color: var(--text-emphasized-color);
+  padding: 0.1em 0.2em;
+  border-radius: 0.2em;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+._match-item_65dbg_171 ._match-label_65dbg_178 {
+  margin: 0;
+  color: var(--text-color);
+}
+
+._match-container_65dbg_183 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+._match-container_65dbg_183 ._close-btn_65dbg_188 {
+  cursor: pointer;
+}
+
+._match-link_65dbg_192 {
+  padding: 0.5em;
+}._item-container_fcffo_1 {
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+._item-container_fcffo_1._selected_fcffo_7 {
+  background-color: var(--panel-background-color);
+}
+
+._swatch_fcffo_11 {
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+}.bp6-multi-select{
+  min-width:150px;
+}
+
+.bp6-multi-select-popover .bp6-popover-content{
+  padding:4px;
+}
+.bp6-multi-select-popover .bp6-multi-select-popover-default-width{
+  max-width:350px;
+}
+.bp6-multi-select-popover .bp6-multi-select-popover-tag-input-margin{
+  margin-bottom:1px;
+}
+.bp6-multi-select-popover .bp6-menu{
+  margin-left:-4px;
+  margin-right:-4px;
+  max-height:300px;
+  max-width:400px;
+  overflow:auto;
+}
+.bp6-multi-select-popover.bp6-popover-match-target-width{
+  width:100%;
+}
+.bp6-multi-select-popover.bp6-popover-match-target-width .bp6-menu{
+  max-width:none;
+  min-width:0;
+}
+.bp6-omnibar{
+  filter:blur(0);
+  opacity:1;
+}
+.bp6-omnibar.bp6-overlay-enter, .bp6-omnibar.bp6-overlay-appear{
+  filter:blur(20px);
+  opacity:0;
+}
+.bp6-omnibar.bp6-overlay-enter-active, .bp6-omnibar.bp6-overlay-appear-active{
+  filter:blur(0);
+  opacity:1;
+  transition-delay:0;
+  transition-duration:200ms;
+  transition-property:filter, opacity;
+  transition-timing-function:cubic-bezier(0.4, 1, 0.75, 0.9);
+}
+.bp6-omnibar.bp6-overlay-exit{
+  filter:blur(0);
+  opacity:1;
+}
+.bp6-omnibar.bp6-overlay-exit-active{
+  filter:blur(20px);
+  opacity:0;
+  transition-delay:0;
+  transition-duration:200ms;
+  transition-property:filter, opacity;
+  transition-timing-function:cubic-bezier(0.4, 1, 0.75, 0.9);
+}
+.bp6-omnibar{
+  background-color:#ffffff;
+  border-radius:4px;
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 4px 8px rgba(17, 20, 24, 0.2), 0 18px 46px 6px rgba(17, 20, 24, 0.2);
+  left:calc(50% - 250px);
+  top:20vh;
+  width:500px;
+  z-index:21;
+}
+.bp6-omnibar .bp6-input{
+  background-color:transparent;
+  border-radius:0;
+}
+.bp6-omnibar .bp6-input, .bp6-omnibar .bp6-input:focus{
+  box-shadow:none;
+}
+.bp6-omnibar .bp6-menu{
+  background-color:transparent;
+  border-radius:0;
+  box-shadow:inset 0 1px 0 rgba(17, 20, 24, 0.15);
+  max-height:calc(60vh - 40px);
+  overflow:auto;
+}
+.bp6-omnibar .bp6-menu:empty{
+  display:none;
+}
+.bp6-dark .bp6-omnibar, .bp6-omnibar.bp6-dark{
+  background-color:#2f343c;
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 8px rgba(17, 20, 24, 0.4), 0 18px 46px 6px rgba(17, 20, 24, 0.4);
+}
+
+.bp6-omnibar-overlay .bp6-overlay-backdrop{
+  background-color:rgba(17, 20, 24, 0.2);
+}
+.bp6-select-popover .bp6-popover-content{
+  padding:4px;
+}
+.bp6-select-popover .bp6-input-group{
+  margin-bottom:0;
+}
+.bp6-select-popover .bp6-menu{
+  margin-left:-4px;
+  margin-right:-4px;
+  max-height:300px;
+  max-width:400px;
+  overflow:auto;
+  padding:0 4px;
+}
+.bp6-select-popover .bp6-menu:not(:first-child){
+  padding-top:4px;
+}
+.bp6-select-popover.bp6-popover-match-target-width{
+  width:100%;
+}
+.bp6-select-popover.bp6-popover-match-target-width .bp6-menu{
+  max-width:none;
+  min-width:0;
+}
+.bp6-suggest-popover .bp6-menu{
+  max-height:300px;
+  max-width:400px;
+  overflow:auto;
+}
+.bp6-suggest-popover.bp6-popover-match-target-width{
+  width:100%;
+}
+.bp6-suggest-popover.bp6-popover-match-target-width .bp6-menu{
+  max-width:none;
+  min-width:0;
+}

package/dist/index.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./extractions/index.cjs");
+const index$1 = require("./feedback/index.cjs");
+const editState = require("./feedback/edit-state.cjs");
+exports.EntityTag = index.EntityTag;
+exports.ExtractionContext = index.ExtractionContext;
+exports.ModelInfo = index.ModelInfo;
+exports.buildHighlights = index.buildHighlights;
+exports.enhanceData = index.enhanceData;
+exports.getTagStyle = index.getTagStyle;
+exports.FeedbackComponent = index$1.FeedbackComponent;
+exports.treeToGraph = editState.treeToGraph;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './extractions';
+export * from './feedback';

package/dist/index.js

@@ -0,0 +1,14 @@
+import { EntityTag, ExtractionContext, ModelInfo, buildHighlights, enhanceData, getTagStyle } from "./extractions/index.js";
+import { FeedbackComponent } from "./feedback/index.js";
+import { treeToGraph } from "./feedback/edit-state.js";
+export {
+  EntityTag,
+  ExtractionContext,
+  FeedbackComponent,
+  ModelInfo,
+  buildHighlights,
+  enhanceData,
+  getTagStyle,
+  treeToGraph
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/package.json

@@ -1,46 +1,54 @@
 {
   "name": "@macrostrat/feedback-components",
-  "version": "1.1.9",
+  "version": "2.0.0",
   "description": "",
-  "source": "src/index.ts",
-  "type": "module",
-  "main": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
-  "node": "dist/node/index.js",
-  "exports": {
-    ".": {
-      "source": "./src/index.ts",
-      "import": "./dist/esm/index.js",
-      "types": "./dist/esm/index.d.ts",
-      "node": "./dist/node/index.js"
-    }
-  },
-  "targets": {
-    "node": {
-      "engines": {
-        "node": ">=14"
-      }
-    }
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/UW-Macrostrat/web-components.git",
+    "directory": "packages/feedback-components"
   },
+  "license": "MIT",
+  "author": "Daven Quinn",
+  "type": "module",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "node": "dist/index.cjs",
+  "types": "dist/index.d.ts",
+  "style": "dist/feedback-components.css",
   "files": [
     "src",
     "dist"
   ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts",
+      "style": "./dist/feedback-components.css"
+    },
+    "./package.json": "./package.json",
+    "./style.css": "./dist/feedback-components.css",
+    "./dist/feedback-components.css": "./dist/feedback-components.css"
+  },
   "scripts": {
-    "build": "rm -rf dist && parcel build"
+    "build": "bundle-library ."
+  },
+  "peerDependencies": {
+    "react": "^18.0.0||^19.0.0",
+    "react-dom": "^18.0.0||^19.0.0"
   },
-  "author": "Daven Quinn",
-  "license": "ISC",
   "dependencies": {
-    "@babel/preset-react": "^7.18.6",
-    "@blueprintjs/core": "^5.10.2",
-    "@blueprintjs/select": "^5.3.10",
-    "@macrostrat/color-utils": "^1.1.1",
-    "@macrostrat/data-components": "^0.2.0",
-    "@macrostrat/data-sheet": "^2.1.1",
+    "@blueprintjs/core": "^6.6.1",
+    "@blueprintjs/select": "^6.0.13",
+    "@macrostrat/color-utils": "^1.2.0",
+    "@macrostrat/data-components": "^1.0.0",
+    "@macrostrat/data-sheet": "^3.0.0",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/ui-components": "^4.4.6",
-    "@xyflow/react": "^12.3.6",
+    "@macrostrat/ui-components": "^5.0.0",
     "classnames": "^2.5.1",
     "d3-force": "^3.0.0",
     "immutability-helper": "^3.1.1",
@@ -48,16 +56,10 @@
     "react-text-annotate-blend": "^1.2.0",
     "use-element-dimensions": "^2.1.3"
   },
-  "peerDependencies": {
-    "react": "^17||^18||^19",
-    "react-dom": "^17||^18||^19"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/UW-Macrostrat/web-components.git",
-    "directory": "packages/feedback-components"
-  },
   "devDependencies": {
-    "parcel": "^2.15.4"
+    "@macrostrat/web-components-bundler": "1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/extractions/index.ts

@@ -141,7 +141,7 @@ export function ExtractionContext({
 
 export function ModelInfo({ data }) {
   if (!data) return null;
-  return h("p.model-name", ["Model: ", h("code.bp5-code", data.name)]);
+  return h("p.model-name", ["Model: ", h("code.bp6-code", data.name)]);
 }
 
 export type MatchComponent = (props: { data: any }) => any;
@@ -182,7 +182,7 @@ export function EntityTag({
     h("span.entity-name", name),
     " ",
     h(
-      "code.entity-type.bp5-code",
+      "code.entity-type.bp6-code",
       {
         onClick(evt) {
           if (active && onClickType != null) {

package/src/feedback/text-visualizer.ts

@@ -8,7 +8,6 @@ import { Highlight } from "../extractions/types";
 import { useEffect, useRef } from "react";
 import { Popover } from "@blueprintjs/core";
 import { MatchTag } from "./matches";
-import { data } from "packages/feedback-components/stories/test-data";
 
 const h = hyper.styled(styles);
 

package/src/feedback/types.ts

@@ -1,11 +1,11 @@
-import { EntityExt } from "../extractions/types";
+import type { EntityExt } from "../extractions";
 
 export interface InternalEntity extends EntityExt {
   term_type: string;
   txt_range: number[][];
   children: InternalEntity[];
   orig_id: number;
-  id: string;
+  id: number;
 }
 
 export interface TextData {