lifted markup state up

frontend/src/components/Summarize.js

@@ -97,9 +97,8 @@ class EventEmitter {
       if (listeners) this.events[event] = listeners.filter((l) => l !== listener)
   }
 
-  emit = (event) => {
+  emit = async (event) => {
       const listeners = this.events[event]
-      console.log(`emitting ${event}`)
       if (listeners) listeners.forEach(listener => listener())
   }
 }
@@ -108,32 +107,30 @@ class EventEmitter {
 
 const useMarkup = (text, sum) => {
   const [textMarkup, summaryMarkup] = useMemo(() => genMarkupV2(text, sum), [text, sum]);
-  const listener = useMemo(() => new EventEmitter(), [text, sum])
-  return [textMarkup, summaryMarkup, listener]
+  const [currMarkup, setCurrMarkup] = useState(null)
+  return [textMarkup, summaryMarkup, { currMarkup, setCurrMarkup } ]
 }
 
-const TaggedMarkup = ({content, tag, hash, listener, showMarkup}) => {
-    const [bgcolor, fgcolor] = colorMarkup(hash)
-    const [hovered, setHovered] = useState(false)
+const innerHoverStyle = {background: "yellow", color: "black", display: "relative"}
+const baseMarkupStyle = {padding: "5px", borderRadius: "10px"}
+const outerHoverStyle = {...baseMarkupStyle, ...innerHoverStyle}
+const TaggedMarkup = ({markup, markupState, showMarkup}) => {
+    const { currMarkup, setCurrMarkup } = markupState
+    const [content, tag, bgcolor, fgcolor] = markup;
     let style = {}
-    if (hovered) style = {background: "yellow", color: "black", display: "relative", padding: "2px", margin: "3px", borderRadius: "10px"}
-    else if (showMarkup) style = {backgroundColor: bgcolor, color: fgcolor, padding: "5px", borderRadius: "10px"}
-    useEffect(() => {
-      listener.on(`${tag}_over`, () => setHovered(true))
-      listener.on(`${tag}_out`, () => setHovered(false))
-    }, [listener])
-    const onMouseOver = showMarkup ? () => listener.emit(`${tag}_over`) : null
-    const onMouseOut = showMarkup ? () => listener.emit(`${tag}_out`) : null
-    return <span onMouseOver={onMouseOver} onFocus={onMouseOver} onBlur={onMouseOut} onMouseOut={onMouseOut} style={style}>
-      <TestMarkup markups={content} listener={listener} showMarkup={false}/>
+    if (tag === currMarkup) style = showMarkup ? outerHoverStyle : innerHoverStyle
+    else if (showMarkup) style = {...baseMarkupStyle, background: bgcolor, color: fgcolor}
+    const onMouseEnter = showMarkup ? () => setCurrMarkup(tag) : null
+    const onMouseLeave = showMarkup ? () => setCurrMarkup(null) : null
+    return <span onMouseEnter={onMouseEnter} onFocus={onMouseEnter} onBlur={onMouseLeave} onMouseLeave={onMouseLeave} style={style}>
+      <TestMarkup markups={content} markupState={markupState} showMarkup={false}/>
     </span>
 }
 
-const TestMarkup = ({ markups, listener, showMarkup = true }) => <>
+const TestMarkup = ({ markups, markupState, showMarkup = true }) => <>
     {markups.map((child, i) => {
-      if (typeof child === "string") return <span key={i}>{child}</span>
-      const [content, tag, hash] = child;
-      return <TaggedMarkup key={i} content={content} listener={listener} tag={tag} hash={hash} showMarkup={showMarkup} />
+      if (typeof child === "string") return <span key={i} style={{}}>{child}</span>
+      return <TaggedMarkup key={i} markup={child} markupState={markupState} showMarkup={showMarkup} />
     })}
   </>
 
@@ -141,7 +138,7 @@ const InputDocument = ({ summarize, isComputing }) => {
   const [documentText, setDocumentText] = useState("");
   const { summarizers, summarizerTypes, settings, toggleSetting } = useContext(SummarizersContext);
   const [percentage, setPercentage] = useState("15");
-  const [r, s, listener] = useMarkup(sampleText, summary)
+  const [r, s, markupState] = useMarkup(sampleText, summary)
   const [t, setT] = useState(false)
 
   const anyModelSet = () => Object.values(settings).some((isSet) => isSet);
@@ -155,10 +152,10 @@ const InputDocument = ({ summarize, isComputing }) => {
     <div className="uk-container uk-container-expand uk-margin-medium-top@s uk-margin-large-top@l">
       <div className="uk-flex">
         <div style={{lineHeight: "2.1em"}}>
-          <TestMarkup markups={r} listener={listener} showMarkup />
+          <TestMarkup markups={r} markupState={markupState} showMarkup />
         </div>
         <div style={{lineHeight: "2.1em"}}>
-          <TestMarkup markups={s} listener={listener} showMarkup />
+          <TestMarkup markups={s} markupState={markupState} showMarkup />
         </div>
       </div>
       <Button onClick={() => setT(e => !e)}>{t.toString()}</Button>
@@ -218,31 +215,31 @@ const InputDocument = ({ summarize, isComputing }) => {
             {/* End model checkbox lists */}
 
             {/*  Start summary options container */}
-            <div className="uk-margin-small-top">
-              <div className="uk-flex uk-flex-column uk-width-1-1 uk-margin">
-                <div style={{ flex: "1" }}>
-                  <h4 className="colored-header" style={{ display: "inline-flex" }}>
-                    Summary Length
-                  </h4>
-                  <span
-                    className="uk-flex uk-flex-center uk-flex-middle uk-label"
-                    style={{
-                      width: "35px",
-                      height: "30px",
-                      marginLeft: "10px",
-                      float: "right",
-                    }}
-                  >
-                    {`${percentage}%`}
-                  </span>
-                </div>
+            <div>
+              <div className="uk-flex uk-flex-row" style={{marginTop: "10px", marginBottom: "40px"}}>
+                <span className="colored-header">
+                  Summary Length
+                </span>
                 <input
                   type="range"
-                  min="5"
-                  max="25"
+                  min="10"
+                  max="50"
+                  step="5"
                   defaultValue={percentage}
+                  style={{flex: "1 0", minWidth: "100px", marginLeft: "15px", marginRight: "15px"}}
                   onChange={(e) => setPercentage(e.currentTarget.value)}
                 />
+                <span
+                  className="uk-flex uk-label"
+                  style={{
+                    alignItems: "center",
+                    justifyContent: "right",
+                    width: "30px",
+                    height: "30px",
+                  }}
+                >
+                  {`${percentage}%`}
+                </span>
               </div>
               <div className="uk-flex uk-flex-center">
                 {isComputing ? (

frontend/src/css/App.css

@@ -133,7 +133,8 @@ input {
 }
 .colored-header {
   color: #376c47;
-  font-weight: 500;
+  font-size: 14pt;
+  font-weight: bold;
 }
 .underline-border {
   border-bottom: 3px solid #b02f2c;

frontend/src/css/Range.css

@@ -18,8 +18,8 @@ input[type="range"]::-webkit-slider-runnable-track {
 }
 input[type="range"]::-webkit-slider-thumb {
   margin-top: -13px !important;
-  width: 20px;
-  height: 20px;
+  width: 30px;
+  height: 30px;
   background: #b02f2c;
   border: 2px solid #b02f2c;
   border-radius: 25px;
@@ -38,8 +38,8 @@ input[type="range"]::-moz-range-track {
   cursor: pointer;
 }
 input[type="range"]::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
+  width: 30px;
+  height: 30px;
   background: #b02f2c;
   border: 2px solid #b02f2c;
   border-radius: 25px;
@@ -65,8 +65,8 @@ input[type="range"]::-ms-fill-upper {
   border-radius: 2.6px;
 }
 input[type="range"]::-ms-thumb {
-  width: 20px;
-  height: 20px;
+  width: 30px;
+  height: 30px;
   background: #b02f2c;
   border: 2px solid #b02f2c;
   border-radius: 25px;

frontend/src/utils/fragcolorsV2.js

@@ -171,8 +171,8 @@ const translate = (coll_markups, wstokens) => {
     const sub_tokens = wstokens.slice(first_token_pos, last_token_pos);
     const hash = hashCode(sub_tokens.filter((_, i) => i % 2 == 0).map(clean).join(""))
     // markup children or convert to string
-    if (children) result.push([translate(children, sub_tokens), tag, hash]);
-    else result.push([[sub_tokens.join("")], tag, hash]);
+    if (children) result.push([translate(children, sub_tokens), tag, ...colorMarkup(hash)]);
+    else result.push([[sub_tokens.join("")], tag, ...colorMarkup(hash)]);
     last_end = last_token_pos;
   });
   // extract umarked end