Skip to content
Snippets Groups Projects
Commit 95705f2e authored by Remi Lazarini's avatar Remi Lazarini Committed by David Bühler
Browse files

[Ivette] doc callgraph, correction

parent 5f1d4cf9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
ivette/src/dome/renderer/controls/displays.tsx
+ 1
− 1
View file @ 95705f2e
......@@ -68,7 +68,7 @@ export const LEDStatusList = [
export type LEDstatus = typeof LEDStatusList[number] | undefined;
export function jLEDstatus(js : string) : LEDstatus | undefined {
export function jLEDstatus(js : string) : LEDstatus {
return LEDStatusList.find(elt => elt === js);
}
......
ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx
+ 136
− 19
View file @ 95705f2e
......@@ -26,30 +26,20 @@ import * as Ivette from 'ivette';
import * as Dome from 'dome';
import { IconButton } from 'dome/controls/buttons';
import { Button, Inset } from 'dome/frame/toolbars';
import { Button, ButtonGroup, Inset } from 'dome/frame/toolbars';
import { HelpIcon } from 'dome/help';
import * as Themes from 'dome/themes';
import { ledTag, iconTag, Pattern } from 'dome/text/markdown';
import docCallgraph from '../callgraph.md?raw';
import { DocShowNodesButton } from './toolbar';
import { ledTag, iconTag } from 'dome/text/markdown';
export const TSButtonTag = {
pattern: /\[button-displaymode\]/g,
replace: (key: number, match?: RegExpExecArray) => {
return match ? <span key={key}>{DocShowNodesButton()}</span> : null;
}
};
export const selectBtnTag = {
pattern: /\[button-select\]/g,
replace: (key: number, match?: RegExpExecArray) => {
return match ? <Button key={key} label="Select" title={`Nodes selection`}/>
: null;
}
};
import { ModeDisplay } from '../definitions';
import {
IThreeStateButton, ThreeStateButton, TThreesButtonState
} from './threeStateButton';
/* -------------------------------------------------------------------------- */
/* --- Callgraph titlebar component --- */
/* -------------------------------------------------------------------------- */
interface CallgraphTitleBarProps {
/** Context menu to filtering nodes */
contextMenuItems: Dome.PopupMenuItem[],
......@@ -88,9 +78,136 @@ export function CallgraphTitleBar(props: CallgraphTitleBarProps): JSX.Element {
<HelpIcon
label='Callgraph'
scrollTo={'callgraph'}
patterns={[iconTag, ledTag, selectBtnTag, TSButtonTag]}
patterns={[iconTag, ledTag, selectButtonTag, TSButtonTag]}
>{ docCallgraph }</HelpIcon>
<Inset />
</Ivette.TitleBar>
);
}
/* -------------------------------------------------------------------------- */
/* --- Callgraph documentation --- */
/* -------------------------------------------------------------------------- */
/** Pattern used for callraph documentation */
const TSButtonTag: Pattern = {
pattern: /\[button-displaymode\]/g,
replace: (key: number, match?: RegExpExecArray) => {
return match ? <span key={key}>{DocShowNodesButton()}</span> : null;
}
};
/** Pattern used for callraph documentation */
const selectButtonTag: Pattern = {
pattern: /\[button-select\]/g,
replace: (key: number, match?: RegExpExecArray) => {
return match ? <Button key={key} label="Select" title={`Nodes selection`}/>
: null;
}
};
interface ShowNodesButtonProps {
displayModeState: [ModeDisplay, (newValue: ModeDisplay) => void],
selectedParentsState: TThreesButtonState,
selectedChildrenState: TThreesButtonState,
}
function ShowNodesButton(props: ShowNodesButtonProps): JSX.Element {
const {
displayModeState, selectedParentsState, selectedChildrenState
} = props;
const [ displayMode, setDisplayMode] = displayModeState;
return (
<ButtonGroup>
<Button
label='all'
title='show all nodes'
selected={displayMode === 'all'}
onClick={() => setDisplayMode("all")}
/>
<Button
label='linked'
title='only show nodes linked to the selected ones'
selected={displayMode === 'linked'}
onClick={() => setDisplayMode("linked")}
/>
<Button
label='selected'
title='only show selected nodes, their parents and their childrens'
selected={displayMode === 'selected'}
onClick={() => setDisplayMode("selected")}
/>
{ displayMode === "selected" ? (
<>
<ThreeStateButton
label={"Parents"}
title={"Choose how many parents you want to see."}
buttonState={selectedParentsState}
/>
<ThreeStateButton
label={"Children"}
title={"Choose how many children you want to see."}
buttonState={selectedChildrenState}
/>
</>
) : <></>
}
</ButtonGroup>
);
}
export function DocShowNodesButton(): JSX.Element {
const displayModeState = React.useState<ModeDisplay>("all");
const selectedParentsState = React.useState<IThreeStateButton>(
{ active: false, max: false, value: 1 });
const selectedChildrenState = React.useState<IThreeStateButton>(
{ active: true, max: true, value: 1 });
const [ displayMode, ] = displayModeState;
const [ parent, ] = selectedParentsState;
const [ children, ] = selectedChildrenState;
const style = Themes.useStyle();
const infosStyle = { color: style.getPropertyValue('--text-highlighted') };
function getDocSelected(
parent: IThreeStateButton,
children: IThreeStateButton
):JSX.Element {
function getDocTSB(name: string, tsb: IThreeStateButton):string {
return !tsb.active ? '' :
tsb.max ? ` all ${name}` :
tsb.value > 0 ?
(tsb.value+' level'+(tsb.value > 1 ? 's':'')+` of ${name}`):
"";
}
const p = getDocTSB('parents', parent);
const c = getDocTSB('children', children);
return (
<div style={infosStyle}>
Selected nodes displayed { (p || c) && " with " }
{ p }{ p && c && " and " }{ c }
{ !p && !c && " only " }.
</div>
);
}
const docAll = <div style={infosStyle}>All nodes displayed.</div>;
const docLinked = <div style={infosStyle}>Hide unlinked nodes.</div>;
const docSelected = getDocSelected(parent, children);
return (
<>
<ShowNodesButton
displayModeState={displayModeState}
selectedParentsState={selectedParentsState}
selectedChildrenState={selectedChildrenState}
/>
{ displayMode === 'all' ? docAll :
displayMode === 'linked' ? docLinked :
docSelected
}
</>
);
}
ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx
+ 1
− 109
View file @ 95705f2e
......@@ -27,124 +27,16 @@ import * as Dome from 'dome';
import { State } from 'dome/data/states';
import { Spinner } from 'dome/controls/buttons';
import { ToolBar, ButtonGroup, Button, Filler } from 'dome/frame/toolbars';
import * as Themes from 'dome/themes';
import {
ModeDisplay, SelectedNodesData
} from "frama-c/plugins/callgraph/definitions";
import {
IThreeStateButton, ThreeStateButton, TThreesButtonState
} from "./threeStateButton";
import { IThreeStateButton, ThreeStateButton } from "./threeStateButton";
/* -------------------------------------------------------------------------- */
/* --- Callgraph Toolsbar component --- */
/* -------------------------------------------------------------------------- */
interface ShowNodesButtonProps {
displayModeState: [ModeDisplay, (newValue: ModeDisplay) => void],
selectedParentsState: TThreesButtonState,
selectedChildrenState: TThreesButtonState,
}
function ShowNodesButton(props: ShowNodesButtonProps): JSX.Element {
const {
displayModeState, selectedParentsState, selectedChildrenState
} = props;
const [ displayMode, setDisplayMode] = displayModeState;
return (
<ButtonGroup>
<Button
label='all'
title='show all nodes'
selected={displayMode === 'all'}
onClick={() => setDisplayMode("all")}
/>
<Button
label='linked'
title='only show nodes linked to the selected ones'
selected={displayMode === 'linked'}
onClick={() => setDisplayMode("linked")}
/>
<Button
label='selected'
title='only show selected nodes, their parents and their childrens'
selected={displayMode === 'selected'}
onClick={() => setDisplayMode("selected")}
/>
{ displayMode === "selected" ? (
<>
<ThreeStateButton
label={"Parents"}
title={"Choose how many parents you want to see."}
buttonState={selectedParentsState}
/>
<ThreeStateButton
label={"Children"}
title={"Choose how many children you want to see."}
buttonState={selectedChildrenState}
/>
</>
) : <></>
}
</ButtonGroup>
);
}
export function DocShowNodesButton(): JSX.Element {
const displayModeState = React.useState<ModeDisplay>("all");
const selectedParentsState = React.useState<IThreeStateButton>(
{ active: false, max: false, value: 1 });
const selectedChildrenState = React.useState<IThreeStateButton>(
{ active: true, max: true, value: 1 });
const [ displayMode, ] = displayModeState;
const [ parent, ] = selectedParentsState;
const [ children, ] = selectedChildrenState;
const style = Themes.useStyle();
const infosStyle = { color: style.getPropertyValue('--text-highlighted') };
function getDocSelected(
parent: IThreeStateButton,
children: IThreeStateButton
):JSX.Element {
function getDocTSB(name: string, tsb: IThreeStateButton):string {
return !tsb.active ? '' :
tsb.max ? ` all ${name}` :
tsb.value > 0 ?
(tsb.value+' level'+(tsb.value > 1 ? 's':'')+` of ${name}`):
"";
}
const p = getDocTSB('parents', parent);
const c = getDocTSB('children', children);
return (
<div style={infosStyle}>
Selected nodes displayed { (p || c) && " with " }
{ p }{ p && c && " and " }{ c }
{ !p && !c && " only " }.
</div>
);
}
const docAll = <div style={infosStyle}>All nodes displayed.</div>;
const docLinked = <div style={infosStyle}>Hide unlinked nodes.</div>;
const docSelected = getDocSelected(parent, children);
return (
<>
<ShowNodesButton
displayModeState={displayModeState}
selectedParentsState={selectedParentsState}
selectedChildrenState={selectedChildrenState}
/>
{ displayMode === 'all' ? docAll :
displayMode === 'linked' ? docLinked :
docSelected
}
</>
);
}
interface CallgraphToolsBarProps {
/* eslint-disable max-len */
......
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