[Ivette] doc callgraph, correction

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);
 }
 

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
+      }
+    </>
+  );
+}

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 */