From 95705f2ee08c87b257b4c081d1e6ab13b9256248 Mon Sep 17 00:00:00 2001
From: rlazarini <remi.lazarini@cea.fr>
Date: Wed, 22 Jan 2025 09:47:22 +0100
Subject: [PATCH] [Ivette] doc callgraph, correction
---
.../src/dome/renderer/controls/displays.tsx | 2 +-
.../plugins/callgraph/components/titlebar.tsx | 155 +++++++++++++++---
.../plugins/callgraph/components/toolbar.tsx | 110 +------------
3 files changed, 138 insertions(+), 129 deletions(-)
diff --git a/ivette/src/dome/renderer/controls/displays.tsx b/ivette/src/dome/renderer/controls/displays.tsx
index 6967f5298ae..7e10cc7e444 100644
--- a/ivette/src/dome/renderer/controls/displays.tsx
+++ b/ivette/src/dome/renderer/controls/displays.tsx
@@ -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);
}
diff --git a/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx b/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx
index f20498b8b74..6e6c40f6281 100644
--- a/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx
+++ b/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx
@@ -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
+ }
+ </>
+ );
+}
diff --git a/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx b/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx
index 9f495ab78da..59ea6ae387e 100644
--- a/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx
+++ b/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx
@@ -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 */
--
GitLab