Line height configurable by css var

Author: davidsklar99

packages/feedback-components/src/feedback/feedback.module.sass

@@ -1,3 +1,6 @@
+:root
+  --text-line-height: 3em
+
 .feedback-component
   position: relative
   width: 800px
@@ -75,6 +78,7 @@ mark
   position: relative
   z-index: 0
   overflow: visible
+  line-height: var(--text-line-height)
 
 .type-container
   display: flex

packages/feedback-components/src/feedback/index.ts

@@ -59,7 +59,6 @@ export function FeedbackComponent({
   entityTypes,
   matchComponent,
   onSave,
-  lineHeight = 3,
   allowOverlap,
 }) {
   // Get the input arguments
@@ -91,7 +90,6 @@ export function FeedbackComponent({
         // @ts-ignore
         nodes: tree,
         selectedNodes,
-        lineHeight: `${lineHeight}em`,
         allowOverlap,
       }),
     ),

packages/feedback-components/src/feedback/text-visualizer.ts

@@ -73,7 +73,7 @@ function isHighlighted(tag: Highlight, selectedNodes: number[]) {
 
 export function FeedbackText(props: FeedbackTextProps) {
   // Convert input to tags
-  const { text, selectedNodes, nodes, dispatch, lineHeight, allowOverlap } =
+  const { text, selectedNodes, nodes, dispatch, allowOverlap } =
     props;
   const allTags: AnnotateBlendTag[] = buildTags(
     buildHighlights(nodes, null),
@@ -96,7 +96,6 @@ export function FeedbackText(props: FeedbackTextProps) {
     h(HighlightedText, {
       text,
       allTags,
-      lineHeight,
       allowOverlap,
       dispatch,
       selectedNodes,
@@ -294,7 +293,6 @@ export function HighlightedText(props: {
   const {
     text,
     allTags = [],
-    lineHeight,
     dispatch,
     selectedNodes,
     allowOverlap,
@@ -319,7 +317,7 @@ export function HighlightedText(props: {
 
   return h(
     "span",
-    { style: { lineHeight }, ref: spanRef },
+    { ref: spanRef },
     tree.children.map((child: any, i: number) =>
       renderNode(child, dispatch, selectedNodes, false),
     ),

packages/feedback-components/stories/feedback.stories.ts

@@ -4,7 +4,7 @@ import { FeedbackComponent } from "../src";
 import { data, entityTypes, data2, data3, entityTypes2 } from "./test-data";
 import h from "@macrostrat/hyper";
 
-function FeedbackInterface({ data, types, lineHeight, allowOverlap }) {
+function FeedbackInterface({ data, types, allowOverlap }) {
   const { entities = [], paragraph_text, model, model_run, source_text } = data;
 
   return h(FeedbackComponent, {
@@ -14,7 +14,6 @@ function FeedbackInterface({ data, types, lineHeight, allowOverlap }) {
     entityTypes: createMap(types),
     sourceTextID: source_text,
     runID: model_run,
-    lineHeight,
     allowOverlap,
   });
 }
@@ -39,7 +38,6 @@ export const NoAllowOverlap: StoryObj<{}> = {
   args: {
     data,
     types: entityTypes,
-    lineHeight: 2,
     allowOverlap: false,
   },
 };
@@ -48,7 +46,6 @@ export const TestData2: StoryObj<{}> = {
   args: {
     data: data2,
     types: entityTypes2,
-    lineHeight: 2,
     allowOverlap: false,
   },
 };
@@ -57,7 +54,6 @@ export const TestData3: StoryObj<{}> = {
   args: {
     data: data3,
     types: entityTypes2,
-    lineHeight: 2,
     allowOverlap: true,
   },
 };