Merge branch 'feature/ivette/visible-functions-filter' into 'master'

[ivette] Visible functions filter

See merge request frama-c/frama-c!3621

ivette/src/dome/renderer/frame/sidebars.tsx

@@ -34,6 +34,8 @@ import { useFlipSettings } from 'dome';
 import { Badge } from 'dome/controls/icons';
 import { Label } from 'dome/controls/labels';
 import { classes } from 'dome/misc/utils';
+import { Hbox, Hfill } from 'dome/layout/boxes';
+import { IconButton, IconButtonProps } from 'dome/controls/buttons';
 
 import './style.css';
 
@@ -70,12 +72,12 @@ export function SideBar(props: SideBarProps): JSX.Element {
 export type BadgeElt = undefined | null | string | number | React.ReactNode;
 export type Badges = BadgeElt | BadgeElt[];
 
-const makeBadgeElt = (elt: BadgeElt): React.ReactNode => {
+const makeBadgeElt = (elt: BadgeElt, index: number): React.ReactNode => {
   if (elt === undefined || elt === null) return null;
   switch (typeof (elt)) {
     case 'number':
     case 'string':
-      return <Badge value={elt} />;
+      return <Badge value={elt} key={`item#${index}`} />;
     default:
       return elt;
   }
@@ -84,27 +86,9 @@ const makeBadgeElt = (elt: BadgeElt): React.ReactNode => {
 const makeBadge = (elt: Badges): React.ReactNode => {
   if (Array.isArray(elt))
     return elt.map(makeBadgeElt);
-  return makeBadgeElt(elt);
+  return makeBadgeElt(elt, 0);
 };
 
-// --------------------------------------------------------------------------
-// --- SideBar Section Hide/Show Button
-// --------------------------------------------------------------------------
-
-interface HideShowProps {
-  onClick: () => void;
-  visible: boolean;
-}
-
-const HideShow = (props: HideShowProps): JSX.Element => (
-  <label
-    className="dome-xSideBarSection-hideshow dome-text-label"
-    onClick={props.onClick}
-  >
-    {props.visible ? 'Hide' : 'Show'}
-  </label>
-);
-
 // --------------------------------------------------------------------------
 // --- SideBar Section
 // --------------------------------------------------------------------------
@@ -126,10 +110,12 @@ export interface SectionProps {
   disabled?: boolean;
   /** Badge summary (only visible when folded). */
   summary?: Badges;
-  /** Right-click callback. */
-  onContextMenu?: () => void;
+  /** Additional controls, (only visible when unfolded). */
+  rightButtonProps?: IconButtonProps;
   /** Section contents. */
   children?: React.ReactNode;
+  /** Additionnal CSS class. */
+  className?: string;
 }
 
 /**
@@ -143,32 +129,34 @@ export interface SectionProps {
    Sections with no items are not displayed.
 */
 export function Section(props: SectionProps): JSX.Element | null {
-
-  const [state, flipState] = useFlipSettings(
-    props.settings,
-    props.defaultUnfold,
-  );
+  const { settings, defaultUnfold, unfold } = props;
+  const [state, flipState] = useFlipSettings(settings, defaultUnfold);
+  const icon = state ? 'TRIANGLE.DOWN' : 'TRIANGLE.RIGHT';
 
   const { enabled = true, disabled = false, children } = props;
-  if (disabled || !enabled || React.Children.count(children) === 0)
-    return null;
-  const { unfold } = props;
-  const foldable = unfold === undefined;
+  if (disabled || !enabled || React.Children.count(children) === 0) return null;
+
   const visible = unfold ?? state;
   const maxHeight = visible ? 'max-content' : 0;
+  const { rightButtonProps: iconProps } = props;
+  const className = `dome-xSideBarSection-filterButton ${iconProps?.className}`;
+  const rightButton =
+    iconProps ? <IconButton {...iconProps} className={className}/> : undefined;
 
   return (
-    <div className="dome-xSideBarSection">
-      <div
-        className="dome-xSideBarSection-title dome-color-frame"
-        title={props.title}
-        onContextMenu={props.onContextMenu}
-      >
-        <Label label={props.label} />
-        {!visible && makeBadge(props.summary)}
-        {foldable && <HideShow visible={visible} onClick={flipState} />}
-      </div>
-      <div className="dome-xSideBarSection-content" style={{ maxHeight }}>
+    <div className={`dome-xSideBarSection ${props.className}`}>
+      <Hbox>
+        <Label
+          className='dome-xSideBarSection-title dome-color-frame'
+          title={props.title}
+          label={props.label}
+          icon={icon}
+          onClick={flipState}
+        />
+        <Hfill />
+        {visible ? rightButton : makeBadge(props.summary)}
+      </Hbox>
+      <div className='dome-xSideBarSection-content' style={{ maxHeight }}>
         {children}
       </div>
     </div>

ivette/src/dome/renderer/frame/style.css

@@ -105,12 +105,13 @@
 .dome-xSideBarSection {
     display: block ;
     padding: 0px ;
+    padding-top: 3px;
 }
 
 .dome-xSideBarSection-title {
     position: sticky ;
     top: 0px ;
-    padding-top: 3px ;
+    padding-top: 0px;
     padding-bottom: 0px ;
     padding-left: 3px ;
     padding-right: 2px ;
@@ -130,6 +131,11 @@
     flex: 0 0 ;
 }
 
+.dome-xSideBarSection-filterButton {
+  margin: 0px;
+  padding: 0px;
+}
+
 .dome-xSideBarSection-hideshow {
     flex: 0 0 ;
     margin: 1px ;
@@ -149,6 +155,23 @@
     transition: max-height 250ms ease-in-out ;
 }
 
+.dome-xSideBarSection-content > .dome-xBoxButton {
+  margin-left: 20px;
+  margin-right: 10px;
+  margin-top: 7px;
+  color: var(--info-text);
+  fill: var(--info-text);
+  display: flex;
+}
+
+.dome-xSideBarSection-info {
+  color: var(--info-text-discrete);
+  font-style: italic;
+  padding-left: 20px;
+  padding-right: 10px;
+  display: block;
+}
+
 /* -------------------------------------------------------------------------- */
 /* --- SideBar Items                                                      --- */
 /* -------------------------------------------------------------------------- */

ivette/src/frama-c/kernel/Globals.tsx

@@ -29,6 +29,7 @@ import * as Dome from 'dome';
 import { classes } from 'dome/misc/utils';
 import { alpha } from 'dome/data/compare';
 import { Section, Item } from 'dome/frame/sidebars';
+import { Button } from 'dome/controls/buttons';
 import * as Ivette from 'ivette';
 
 import * as States from 'frama-c/states';
@@ -180,21 +181,48 @@ export default function Globals(): JSX.Element {
   const nTotal = fcts.length;
   const nFilter = filtered.length;
   const title = `Functions ${nFilter} / ${nTotal}`;
+
+  const filterButtonProps = {
+    icon: 'TUNINGS',
+    title: `Functions filtering options (${nFilter} / ${nTotal})`,
+    onClick: onContextMenu,
+  };
+
+  const filteredFunctions =
+    filtered.map((fct) => (
+      <FctItem
+        key={fct.name}
+        fct={fct}
+        current={current}
+        onSelection={onSelection}
+      />
+    ));
+
+  const noFunction =
+    <div className='dome-xSideBarSection-content'>
+      <label className='dome-xSideBarSection-info'>
+        {'There is no function to display.'}
+      </label>
+    </div>;
+
+  const allFiltered =
+    <div className='dome-xSideBarSection-content'>
+      <label className='dome-xSideBarSection-info'>
+        {'All functions are filtered. Try adjusting function filters.'}
+      </label>
+      <Button {...filterButtonProps} label='Functions filters' />
+    </div>;
+
   return (
     <Section
       label="Functions"
       title={title}
-      onContextMenu={onContextMenu}
       defaultUnfold
+      rightButtonProps={filterButtonProps}
+      summary={[nFilter]}
+      className='globals-function-section'
     >
-      {filtered.map((fct) => (
-        <FctItem
-          key={fct.name}
-          fct={fct}
-          current={current}
-          onSelection={onSelection}
-        />
-      ))}
+      {nFilter > 0 ? filteredFunctions : nTotal > 0 ? allFiltered : noFunction}
     </Section>
   );
 

ivette/src/frama-c/kernel/style.css

@@ -49,6 +49,10 @@
     color: #aaa;
 }
 
+.globals-function-section {
+  padding-right: 3px;
+}
+
 /* -------------------------------------------------------------------------- */
 /* --- Globals                                                            --- */
 /* -------------------------------------------------------------------------- */