diff --git a/client/goal-view-ui/src/App.tsx b/client/goal-view-ui/src/App.tsx index 82e4e1c0..d99fce02 100644 --- a/client/goal-view-ui/src/App.tsx +++ b/client/goal-view-ui/src/App.tsx @@ -1,7 +1,7 @@ import React, {useState, useCallback, useEffect} from 'react'; import "./App.css"; -import ProofViewPage from './components/templates/ProovViewPage'; +import ProofViewPage from './components/templates/ProofViewPage'; import {Goal, ProofViewGoals, ProofViewGoalsKey, ProofViewMessage} from './types'; import { vscode } from "./utilities/vscode"; @@ -29,17 +29,17 @@ const app = () => { setGoals(allGoals === null ? allGoals : { - main: allGoals.goals.map((goal: Goal) => { - return {...goal, isOpen: true}; + main: allGoals.goals.map((goal: Goal, index: number) => { + return {...goal, isOpen: true, isContextHidden: index !== 0}; }), - shelved: allGoals.shelvedGoals.map((goal: Goal) => { - return {...goal, isOpen: true}; + shelved: allGoals.shelvedGoals.map((goal: Goal, index: number) => { + return {...goal, isOpen: true, isContextHidden: index !== 0}; }), - givenUp: allGoals.givenUpGoals.map((goal: Goal) => { - return {...goal, isOpen: true}; + givenUp: allGoals.givenUpGoals.map((goal: Goal, index: number) => { + return {...goal, isOpen: true, isContextHidden: index !== 0}; }), - unfocused: allGoals.unfocusedGoals.map((goal: Goal) => { - return {...goal, isOpen: false}; + unfocused: allGoals.unfocusedGoals.map((goal: Goal, index: number) => { + return {...goal, isOpen: false, isContextHidden: index !== 0}; }) } ); @@ -72,6 +72,19 @@ const app = () => { }); }; + const toggleContext = (id: string, key: ProofViewGoalsKey) => { + const newGoals = goals![key].map(goal => { + if(goal.id === id){ + return {...goal, isContextHidden: !goal.isContextHidden}; + } + return goal; + }); + setGoals({ + ...goals!, + [key]: newGoals + }); + }; + const settingsClickHandler = () => { vscode.postMessage({ command: "openGoalSettings", @@ -89,6 +102,7 @@ const app = () => { settingsClickHandler={settingsClickHandler} helpMessage={helpMessage} helpMessageHandler={(message: string) => setHelpMessage(message)} + toggleContextHandler={toggleContext} /> ); diff --git a/client/goal-view-ui/src/components/atoms/Accordion.tsx b/client/goal-view-ui/src/components/atoms/Accordion.tsx index 9020a2f8..9d92d3ad 100644 --- a/client/goal-view-ui/src/components/atoms/Accordion.tsx +++ b/client/goal-view-ui/src/components/atoms/Accordion.tsx @@ -8,11 +8,13 @@ type AccordionProps = { collapsed: boolean; title: string; collapseHandler?: (params: any) => void; + seconaryActionHandler?: (params: any) => void; + seconaryActionIcon?: JSX.Element; }; const accordion: FunctionComponent = (props) => { - const {title, collapseHandler} = props; + const {title, collapseHandler, seconaryActionHandler, seconaryActionIcon} = props; const [collapsed, setCollapsed] = useState(props.collapsed); useEffect(() => { setCollapsed(props.collapsed); @@ -25,15 +27,23 @@ const accordion: FunctionComponent = (props) => { const toggleCollapse = collapseHandler ? collapseHandler : () => setCollapsed(!collapsed); + const secondaryActionButton = (seconaryActionHandler !== undefined && seconaryActionIcon !== undefined) ? {seconaryActionIcon} : null; + const secondaryAction = collapsed ? null : secondaryActionButton; + const actionRow = +
+ {secondaryAction} + + + +
; + return (
{/* The header with title and button */}
{title} - - - + {actionRow}
{/* The panel that collapses */} diff --git a/client/goal-view-ui/src/components/molecules/CollapsibleGoalBlock.tsx b/client/goal-view-ui/src/components/molecules/CollapsibleGoalBlock.tsx index 63f2110e..2482b7b1 100644 --- a/client/goal-view-ui/src/components/molecules/CollapsibleGoalBlock.tsx +++ b/client/goal-view-ui/src/components/molecules/CollapsibleGoalBlock.tsx @@ -1,12 +1,15 @@ import React, {FunctionComponent} from 'react'; +import { VscEye, VscEyeClosed } from 'react-icons/vsc'; + import GoalBlock from './GoalBlock'; import Accordion from '../atoms/Accordion'; import { CollapsibleGoal } from '../../types'; type CollapsibleGoalBlockProps = { goal: CollapsibleGoal, - collapseHandler: (id: string) => void, + collapseHandler: (id: string) => void, + toggleContextHandler: (id:string) => void, goalIndex: number, goalIndicator: string, maxDepth: number, @@ -15,11 +18,18 @@ type CollapsibleGoalBlockProps = { const collapsibleGoalBlock: FunctionComponent = (props) => { - const {goal, goalIndex, goalIndicator, collapseHandler, maxDepth, helpMessageHandler} = props; + const {goal, goalIndex, goalIndicator, collapseHandler, toggleContextHandler, maxDepth, helpMessageHandler} = props; + + const secondaryActionIcon = goal.isContextHidden ? : ; + const secondaryActionHandler = toggleContextHandler !== undefined ? () => toggleContextHandler(goal.id) : undefined; return ( - collapseHandler(goal.id)}> - + collapseHandler(goal.id)} + seconaryActionHandler={secondaryActionHandler} + seconaryActionIcon={secondaryActionIcon} + > + ); diff --git a/client/goal-view-ui/src/components/molecules/GoalBlock.tsx b/client/goal-view-ui/src/components/molecules/GoalBlock.tsx index 9519c6c2..7d1fb9fa 100644 --- a/client/goal-view-ui/src/components/molecules/GoalBlock.tsx +++ b/client/goal-view-ui/src/components/molecules/GoalBlock.tsx @@ -1,6 +1,4 @@ import React, {FunctionComponent} from 'react'; -import {VSCodeButton} from '@vscode/webview-ui-toolkit/react'; -import {VscChevronDown} from 'react-icons/vsc'; import HypothesesBlock from './HypothesesBlock'; import GoalComponent from '../atoms/Goal'; @@ -13,18 +11,23 @@ type GoalBlockProps = { goal: Goal goalIndicator?: string, maxDepth: number, - helpMessageHandler: (message: string) => void + helpMessageHandler: (message: string) => void, + displayHyps: boolean }; const goalBlock: FunctionComponent = (props) => { - const {goal, goalIndicator, maxDepth, helpMessageHandler} = props; + const {goal, goalIndicator, maxDepth, displayHyps, helpMessageHandler} = props; const indicator = goalIndicator ? ({goalIndicator}) : null; + const hyps = displayHyps ? : null; return (
- -
{indicator}
+ {hyps} +
+ {indicator} + +
); diff --git a/client/goal-view-ui/src/components/organisms/GoalCollapsibles.tsx b/client/goal-view-ui/src/components/organisms/GoalCollapsibles.tsx index 75034f56..be08bfb8 100644 --- a/client/goal-view-ui/src/components/organisms/GoalCollapsibles.tsx +++ b/client/goal-view-ui/src/components/organisms/GoalCollapsibles.tsx @@ -8,13 +8,14 @@ import classes from './GoalCollapsibles.module.css'; type GoalSectionProps = { goals: CollapsibleGoal[], collapseGoalHandler: (id: string) => void, + toggleContextHandler: (id: string) => void, maxDepth: number, helpMessageHandler: (message: string) => void }; const goalSection: FunctionComponent = (props) => { - const {goals, collapseGoalHandler, maxDepth, helpMessageHandler} = props; + const {goals, collapseGoalHandler, toggleContextHandler, maxDepth, helpMessageHandler} = props; const firstGoalRef = useRef(null); useEffect(() => { @@ -36,14 +37,26 @@ const goalSection: FunctionComponent = (props) => { if(index === 0) { return ( <> - +
); } return ( - + ); }); diff --git a/client/goal-view-ui/src/components/organisms/GoalSection.tsx b/client/goal-view-ui/src/components/organisms/GoalSection.tsx index 2598cd63..fec57f6a 100644 --- a/client/goal-view-ui/src/components/organisms/GoalSection.tsx +++ b/client/goal-view-ui/src/components/organisms/GoalSection.tsx @@ -9,7 +9,8 @@ import classes from './GoalSection.module.css'; type GoalSectionProps = { goals: CollapsibleGoal[], - collapseGoalHandler: (id: string) => void, + collapseGoalHandler: (id: string) => void, + toggleContextHandler: (id: string) => void, displaySetting: string; emptyMessage: string; emptyIcon?: JSX.Element; @@ -20,7 +21,7 @@ type GoalSectionProps = { const goalSection: FunctionComponent = (props) => { - const {goals, collapseGoalHandler, displaySetting, unfocusedGoals, emptyMessage, emptyIcon, maxDepth, helpMessageHandler} = props; + const {goals, collapseGoalHandler, toggleContextHandler, displaySetting, unfocusedGoals, emptyMessage, emptyIcon, maxDepth, helpMessageHandler} = props; const emptyMessageRef = useRef(null); useEffect(() => { @@ -46,7 +47,10 @@ const goalSection: FunctionComponent = (props) => { Next unfocused goals (focus with bullet):
- +
: <> @@ -54,7 +58,11 @@ const goalSection: FunctionComponent = (props) => { : displaySetting === 'Tabs' ? - : ; + : ; return section; }; diff --git a/client/goal-view-ui/src/components/organisms/GoalTabs.tsx b/client/goal-view-ui/src/components/organisms/GoalTabs.tsx index 924fc046..1c8371b9 100644 --- a/client/goal-view-ui/src/components/organisms/GoalTabs.tsx +++ b/client/goal-view-ui/src/components/organisms/GoalTabs.tsx @@ -51,7 +51,7 @@ const goalSection: FunctionComponent = (props) => { const viewId = "view-" + index; return ( - +
goalRefs.current[index] = el}/> ); diff --git a/client/goal-view-ui/src/components/templates/ProovViewPage.tsx b/client/goal-view-ui/src/components/templates/ProofViewPage.tsx similarity index 85% rename from client/goal-view-ui/src/components/templates/ProovViewPage.tsx rename to client/goal-view-ui/src/components/templates/ProofViewPage.tsx index 46e6ce24..d93717dc 100644 --- a/client/goal-view-ui/src/components/templates/ProovViewPage.tsx +++ b/client/goal-view-ui/src/components/templates/ProofViewPage.tsx @@ -20,9 +20,10 @@ import classes from './GoalPage.module.css'; import { VscPass, VscWarning } from 'react-icons/vsc'; type ProofViewPageProps = { - goals: ProofViewGoals, - messages: ProofViewMessage[], - collapseGoalHandler: (id: string, key: ProofViewGoalsKey) => void, + goals: ProofViewGoals; + messages: ProofViewMessage[]; + collapseGoalHandler: (id: string, key: ProofViewGoalsKey) => void; + toggleContextHandler: (id: string, key: ProofViewGoalsKey) => void; displaySetting: string; maxDepth: number; settingsClickHandler: () => void; @@ -32,7 +33,11 @@ type ProofViewPageProps = { const proofViewPage: FunctionComponent = (props) => { - const {goals, messages, displaySetting, collapseGoalHandler, maxDepth, settingsClickHandler, helpMessage, helpMessageHandler} = props; + const {goals, messages, displaySetting, + collapseGoalHandler, maxDepth, settingsClickHandler, + helpMessage, helpMessageHandler, + toggleContextHandler, + } = props; const renderGoals = () => { const goalBadge = {goals!.main.length}; @@ -52,6 +57,7 @@ const proofViewPage: FunctionComponent = (props) => { goals={goals!.main} unfocusedGoals={goals!.unfocused} collapseGoalHandler={(id) => collapseGoalHandler(id, goals!.main.length ? ProofViewGoalsKey.main : ProofViewGoalsKey.unfocused)} + toggleContextHandler={(id) => toggleContextHandler(id, goals!.main.length ? ProofViewGoalsKey.main : ProofViewGoalsKey.unfocused)} displaySetting={displaySetting} emptyMessage={ goals!.shelved.length ? "There are shelved goals. Try using `Unshelve.`" : @@ -69,8 +75,9 @@ const proofViewPage: FunctionComponent = (props) => { collapseGoalHandler(id, ProofViewGoalsKey.shelved)} + goals={goals!.shelved} + collapseGoalHandler={(id) => collapseGoalHandler(id, ProofViewGoalsKey.shelved)} + toggleContextHandler={(id) => toggleContextHandler(id, ProofViewGoalsKey.shelved)} displaySetting={displaySetting} emptyMessage='There are no shelved goals' maxDepth={maxDepth} @@ -80,8 +87,9 @@ const proofViewPage: FunctionComponent = (props) => { collapseGoalHandler(id, ProofViewGoalsKey.givenUp)} + goals={goals!.givenUp} + collapseGoalHandler={(id) => collapseGoalHandler(id, ProofViewGoalsKey.givenUp)} + toggleContextHandler={(id) => toggleContextHandler(id, ProofViewGoalsKey.givenUp)} displaySetting={displaySetting} emptyMessage='There are no given up goals' maxDepth={maxDepth} diff --git a/client/goal-view-ui/src/types.ts b/client/goal-view-ui/src/types.ts index 866af31d..efeb0ba1 100644 --- a/client/goal-view-ui/src/types.ts +++ b/client/goal-view-ui/src/types.ts @@ -10,6 +10,7 @@ export interface Goal { export interface CollapsibleGoal extends Goal { isOpen: boolean; + isContextHidden: boolean; }; export type ProofViewGoalsType = {