Commit 6b42b6a9 authored by Dominik Schwabe's avatar Dominik Schwabe
Browse files

moved summary length to options

parent 167132ec
......@@ -123,12 +123,17 @@ const Navbar = () => (
</>
);
const ColorschemeSetting = ({colorMap, setColorMap}) => (
const ColorschemeSetting = ({ colorMap, setColorMap }) => (
<div className="uk-margin">
<h4>Colorscheme</h4>
<div className="uk-flex uk-flex-wrap" style={{gap: "10px", width: "400px"}}>
<div className="uk-flex uk-flex-wrap" style={{ gap: "10px", width: "400px" }}>
{colorschemes.map((colorscheme) => (
<Button key={colorscheme} size="small" onClick={() => setColorMap(colorscheme)} variant={colorscheme === colorMap.colorscheme ? "primary" : "default"}>
<Button
key={colorscheme}
size="small"
onClick={() => setColorMap(colorscheme)}
variant={colorscheme === colorMap.colorscheme ? "primary" : "default"}
>
{colorscheme}
</Button>
))}
......@@ -143,7 +148,9 @@ const NavbarOptions = () => {
allowSelfSimilarities,
toggleAllowSelfSimilarities,
colorMap,
setColorMap
setColorMap,
summaryLength,
setSummaryLength,
} = useContext(SettingsContext);
return (
<div className="uk-flex uk-flex-center" style={{ marginLeft: "30px" }}>
......@@ -183,6 +190,38 @@ const NavbarOptions = () => {
</div>
</div>
</div>
<h3>Summarization</h3>
<div className="uk-flex">
<div style={{ width: "20px" }} />
<div className="uk-flex uk-flex-row" style={{ alignItems: "center" }}>
<h4 style={{margin: 0}}>Summary Length</h4>
<input
type="range"
min="10"
max="50"
step="5"
defaultValue={summaryLength}
style={{
flex: "1 0",
minWidth: "100px",
marginLeft: "15px",
marginRight: "15px",
}}
onChange={(e) => setSummaryLength(e.currentTarget.value)}
/>
<span
className="uk-flex uk-label"
style={{
alignItems: "center",
justifyContent: "right",
width: "30px",
height: "30px",
}}
>
{`${summaryLength}%`}
</span>
</div>
</div>
</div>
</div>
);
......
......@@ -10,6 +10,7 @@ import React, {
import { CSSTransition } from "react-transition-group";
import { feedbackRequest, summarizeRequest } from "../api";
import { SettingsContext } from "../contexts/SettingsContext";
import { SummarizersContext } from "../contexts/SummarizersContext";
import { useMarkups } from "../hooks/markup";
import { displayError, displayMessage } from "../utils/message";
......@@ -18,8 +19,8 @@ import { Model } from "./Model";
import { Badge, DismissableBadge } from "./utils/Badge";
import { Button } from "./utils/Button";
import { Checkboxes } from "./utils/Checkboxes";
import { Bars, EyeClosed, EyeOpen, ThumbsDown, ThumbsUp } from "./utils/Icons";
import { LiveSearch, useFilter } from "./utils/FuzzySearch";
import { Bars, EyeClosed, EyeOpen, ThumbsDown, ThumbsUp } from "./utils/Icons";
import { CenterLoading } from "./utils/Loading";
import { Markup, useMarkupScroll } from "./utils/Markup";
......@@ -89,7 +90,7 @@ In 2009, following an Internet campaign, British Prime Minister Gordon Brown mad
const InputDocument = ({ summarize, isComputing }) => {
const [documentText, setDocumentText] = useState("");
const { summarizers, summarizerTypes, settings, toggleSetting } = useContext(SummarizersContext);
const [percentage, setPercentage] = useState("15");
const { summaryLength, setSummaryLength } = useContext(SettingsContext);
const summarizerKeys = useMemo(() => Object.keys(summarizers).sort(), [summarizers]);
const { query, setQuery, filteredKeys } = useFilter(summarizerKeys);
const [selectedSummarizer, setSelectedSummarizer] = useState(null);
......@@ -106,7 +107,8 @@ const InputDocument = ({ summarize, isComputing }) => {
const insertSampleText = () => {
setDocumentText(sampleText);
if (settings["anonymous-textrank"] !== undefined && !settings["anonymous-textrank"]) toggleSetting("anonymous-textrank");
if (settings["anonymous-textrank"] !== undefined && !settings["anonymous-textrank"])
toggleSetting("anonymous-textrank");
};
return (
......@@ -157,68 +159,35 @@ const InputDocument = ({ summarize, isComputing }) => {
</div>
<div className="margin-between-5" style={{ marginLeft: "20px", marginBottom: "10px" }}>
{chosenModels.map((model) => (
<DismissableBadge onClick={() => unselectSummarizer(model)} key={model}>
<a
href="/#"
className="nostyle"
onClick={(e) => {
e.preventDefault();
setSelectedSummarizer(model);
}}
>
{summarizers[model].name}
</a>
</DismissableBadge>
))}
<DismissableBadge onClick={() => unselectSummarizer(model)} key={model}>
<a
href="/#"
className="nostyle"
onClick={(e) => {
e.preventDefault();
setSelectedSummarizer(model);
}}
>
{summarizers[model].name}
</a>
</DismissableBadge>
))}
</div>
{selectedSummarizer && (
<PluginCard plugin={summarizers[selectedSummarizer]} inline={false} />
)}
<div>
<div
className="uk-flex uk-flex-row"
style={{ marginTop: "10px", marginBottom: "40px" }}
>
<span className="colored-header">Summary Length</span>
<input
type="range"
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",
}}
<div className="uk-flex uk-flex-center">
{isComputing ? (
<Loading />
) : (
<button
className="uk-button uk-button-primary"
disabled={!documentText || !chosenModels.length}
onClick={() => summarize(documentText, chosenModels, summaryLength)}
>
{`${percentage}%`}
</span>
</div>
<div className="uk-flex uk-flex-center">
{isComputing ? (
<Loading />
) : (
<button
className="uk-button uk-button-primary"
disabled={!documentText || !chosenModels.length}
onClick={() => summarize(documentText, chosenModels, percentage)}
>
Summarize
</button>
)}
</div>
Summarize
</button>
)}
</div>
</div>
</div>
......@@ -287,19 +256,16 @@ const Document = ({ title, markup, markupState, scrollState, showMarkup }) => (
);
const SummaryTabView = ({ title, showOverlap, summaries, markups, documentLength }) => {
const [summaryIndex, _setSummaryIndex] = useState(0);
const { summarizers } = useContext(SummarizersContext);
const markupState = useState(null);
const scrollState = useMarkupScroll();
const resetScroll = scrollState[2];
const setSummaryIndex = useCallback(
(state) => {
_setSummaryIndex(state);
resetScroll();
},
[_setSummaryIndex, resetScroll]
);
const [summaryIndex, setSummaryIndex] = useReducer((_, index) => {
resetScroll();
return index;
}, 0);
if (!markups.length) return <div>some error occured</div>;
return (
<div className="uk-flex">
<div style={{ flexBasis: "60%" }}>
......@@ -447,10 +413,7 @@ const SummaryView = ({ title, summaries, documentLength }) => {
}, [summaries]);
return (
<div
ref={scrollRef}
style={{ scrollMarginTop: "100px" }}
>
<div ref={scrollRef} style={{ scrollMarginTop: "100px" }}>
<div className="uk-flex">
<div>
{showTab ? (
......@@ -494,9 +457,9 @@ const Summarize = () => {
const [documentLength, setDocumentLength] = useState(0);
const { summarizers, loading, reload } = useContext(SummarizersContext);
const summarize = async (rawText, models, percentage) => {
const summarize = async (rawText, models, summaryLength) => {
const requestText = rawText.trim();
const ratio = parseInt(percentage, 10) / 100;
const ratio = parseInt(summaryLength, 10) / 100;
if (!models.length) {
displayMessage("No summarizer selected");
......@@ -535,12 +498,7 @@ const Summarize = () => {
};
if (loading) return <CenterLoading />;
if (!summarizers)
return (
<Button onClick={reload}>
Retry
</Button>
);
if (!summarizers) return <Button onClick={reload}>Retry</Button>;
return (
<>
<InputDocument summarize={summarize} isComputing={computing} />
......
......@@ -8,6 +8,10 @@ const storeColorscheme = (colorscheme) => window.localStorage.setItem("colorsche
const loadMinOverlap = () => parseInt(window.localStorage.getItem("min_overlap") || "3", 10);
const storeMinOverlap = (overlap) => window.localStorage.setItem("min_overlap", overlap);
const loadSummaryLength = () => window.localStorage.getItem("summary_length") || "15";
const storeSummaryLength = (summaryLength) =>
window.localStorage.setItem("summary_length", summaryLength);
const loadAllowSelfSimilarities = () =>
window.localStorage.getItem("allow_self_similarities") === "true";
const storeAllowSelfSimilarities = (allowSelfSimilarities) =>
......@@ -17,35 +21,41 @@ const SettingsContext = React.createContext();
const SettingsProvider = ({ children }) => {
const [allowSelfSimilarities, setAllowSelfSimilarities] = useState(loadAllowSelfSimilarities);
const [minOverlap, _setMinOverlap] = useState(loadMinOverlap);
const [colorMap, setColorMap] = useReducer(
(oldColorMap, colorscheme) => {
try {
const newColorMap = new ColorMap(colorscheme);
storeColorscheme(colorscheme)
return newColorMap
} catch (err) {
return oldColorMap
}
},
new ColorMap(loadColorscheme(), true)
);
const [minOverlap, setMinOverlap] = useReducer((_, overlap) => {
const newOverlap = typeof overlap === "string" ? parseInt(overlap, 10) : overlap;
storeMinOverlap(newOverlap);
return newOverlap;
}, loadMinOverlap());
const [summaryLength, setSummaryLength] = useReducer((_, newSummaryLength) => {
storeSummaryLength(newSummaryLength);
return newSummaryLength;
}, loadSummaryLength());
const [colorMap, setColorMap] = useReducer((oldColorMap, colorscheme) => {
try {
const newColorMap = new ColorMap(colorscheme);
storeColorscheme(colorscheme);
return newColorMap;
} catch (err) {
return oldColorMap;
}
}, new ColorMap(loadColorscheme(), true));
const toggleAllowSelfSimilarities = useCallback(() => {
const newValue = !allowSelfSimilarities;
setAllowSelfSimilarities(newValue);
storeAllowSelfSimilarities(newValue);
}, [allowSelfSimilarities, setAllowSelfSimilarities]);
const setMinOverlap = useCallback(
(overlap) => {
const newOverlap = typeof overlap === "string" ? parseInt(overlap, 10) : overlap;
_setMinOverlap(newOverlap);
storeMinOverlap(newOverlap);
},
[_setMinOverlap]
);
return (
<SettingsContext.Provider
value={{ minOverlap, setMinOverlap, allowSelfSimilarities, toggleAllowSelfSimilarities, colorMap, setColorMap }}
value={{
minOverlap,
setMinOverlap,
allowSelfSimilarities,
toggleAllowSelfSimilarities,
colorMap,
setColorMap,
summaryLength,
setSummaryLength,
}}
>
{children}
</SettingsContext.Provider>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment