Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(UI): Activity feed #829

Closed
wants to merge 488 commits into from
Closed

feat(UI): Activity feed #829

wants to merge 488 commits into from

Conversation

rouk1
Copy link
Contributor

@rouk1 rouk1 commented Nov 28, 2024

Part of #767.

thomass-dev and others added 30 commits September 24, 2024 15:49
Co-authored-by: Auguste Baum <52001167+augustebaum@users.noreply.github.com>
- Change `.py` file format to `py:percent` (VS Code)
- Add matplotlib example

---------

Co-authored-by: Sylvain Combettes <48064216+sylvaincom@users.noreply.github.com>
A new UI component is introduced: a tree accordion 🪗 

It can have as many nested level as needed and is collapsible.

Transforming a list of keys to tree structure is now done in the report
store. It's implemented in the `keysAsTree` function.

1. The function starts by initializing an empty array tree to hold the
root nodes of the tree structure.
2. It gets all the keys from the items object (or an empty object if
items is null).
3. The function then iterates over each key:
  a. It splits the key into segments, filtering out any empty segments.
  b. It identifies the root segment (first part of the path).
c. It checks if a node for this root segment already exists in the tree.
If not, it creates a new node and adds it to the tree.
  d. It then iterates through the remaining segments of the key:
     - For each segment, it builds the full path up to that point.
     - It checks if a child node with this path already exists.
- If not, it creates a new child node and adds it to the current node's
children.
     - It then moves to this child node for the next iteration.
4. After building the basic structure, it defines an addSelf function:
  - This function recursively goes through the tree.
- If a node's name matches a key in the original list and it has
children, it adds a "(self)" node as the first child.
- This handles cases where a path is both a key itself and has child
keys.
5. Finally, it applies the addSelf function to each root node in the
tree.
6. The function returns the completed tree structure.


Usage:

```vue
<script setup lang="ts">
import TreeAccordion, { type TreeAccordionNode } from "@/components/TreeAccordion.vue";

const fileTreeNodes: TreeAccordionNode[] = [
  {
    name: "fraud",
    children: [{ name: "fraud/accuracy" }, { name: "fraud/accuracy3" }],
  },
  {
    name: "fraud2",
    children: [{ name: "fraud2/accuracy" }, { name: "fraud2/accuracy3" }],
  },
  {
    name: "nested",
    children: [
      {
        name: "nested/fraud2/accuracy",
        children: [
          { name: "nested/fraud2/accuracy/self" },
          { name: "nested/fraud2/accuracy/self2" },
          { name: "nested/fraud2/accuracy/self3" },
        ],
      },
      { name: "nested/fraud2/accuracy3", children: [] },
    ],
  },
];
</script>

<template>
  <TreeAccordion :nodes="fileTreeNodes" />
</template
```


https://github.com/user-attachments/assets/b5d83778-1c40-429d-beec-1f20d6814dd9

Fixes #335
guideline:
https://packaging.python.org/en/latest/guides/writing-pyproject-toml/#about-your-project

---------

Co-authored-by: Auguste Baum <52001167+augustebaum@users.noreply.github.com>
…ns (#425) (#426)

Co-authored-by: Matthieu Jouis <matthieu@probabl.ai>
Co-authored-by: Matthieu Jouis <matthieu@probabl.ai>
- Remove reference of `Makefile` in workflow's instructions to build
front-end
- Use matrix to test back-end on all versions of python `>=3.11`
- Trigger CI tasks at job level instead of workflow level
- Use one and only entry-point to define if pipeline succeed
`ci-all-green`

---

Example: https://github.com/probabl-ai/skore/actions/runs/11146672648


![image](https://github.com/user-attachments/assets/294b9b89-0e86-43ae-a432-320d1ece016f)
## This PR allows user to create/duplicate/edit & delete views.

### Backend

All project endpoints are now below the same prefix.

- `GET /api/project/items` lists all items of a project.
- `POST /api/project/views/share/{key}` returns a static shareable HTML
file named `{view name}-{yyyy-MM-dd-HH-mm}.html`.
- `PUT /api/project/views/{key}` save a view in the project.
- `DELETE /api/project/views/{key}` delete a view from the project.

### Frontend

- A new `EditableList` component as been implemented to manage views. 
- A lot of renaming to get rid of the concept of "report".
- Plug everything to the new layout.
- Rework view card layout and add an action dropdown to it.
- Rework dropdowns using floating UI to make them fixed.


https://github.com/user-attachments/assets/3f94e483-ecea-4d5a-8433-50f9150fc6e6


Co-authored with @augustebaum.
Fixes #336, #407, #377, #332

---------

Co-authored-by: Auguste Baum <auguste@probabl.ai>
Co-authored-by: Auguste Baum <52001167+augustebaum@users.noreply.github.com>
```
.
├── CONTRIBUTING.md
├── LICENSE
├── Makefile
├── README.md
├── examples
│   ├── basic_usage.ipynb
│   ├── basic_usage.py
│   ├── README.txt
│   ├── skrub_demo.ipynb
│   └── skrub_demo.py
├── skore
│   ├── pyproject.toml
│   ├── requirements-test.txt
│   ├── requirements-tools.txt
│   ├── requirements.txt
│   ├── VERSION.txt
│   ├── src
│   └── tests
└── skore-ui
    ├── index.html
    ├── package.json
    ├── package-lock.json
    ├── README.md
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── tsconfig.vitest.json
    ├── vite.config.lib.ts
    ├── vite.config.ts
    ├── vitest.config.ts
    ├── vitest.setup.ts
    ├── node_modules
    ├── public
    ├── src
    └── tests
```
sylvaincom and others added 15 commits November 27, 2024 12:27
Co-authored-by: Thomas S. <thomas@probabl.ai>
Add more readable indents

---------

Co-authored-by: Matt J. <matthieu@probabl.ai>
A bot will now push(and edit) a single comment with coverage
information.
![Screenshot 2024-11-22 at 11 51
51](https://github.com/user-attachments/assets/f06383d3-4315-4f5d-ad38-909fa7fd8427)

To achieve that this PR:
- uses a market place action to generate the comment
- to optimize action's duration coverage as been disable in the matrixed
testing step
- to optimize action's and as frontend serving test was not pertinent it
has been removed
- coverage is only run once in another task (linux | python 3.12)
- frontend artifact related stuff have been removed

---------

Co-authored-by: Thomas S. <thomas@probabl.ai>
@rouk1 rouk1 linked an issue Nov 28, 2024 that may be closed by this pull request
6 tasks
@rouk1 rouk1 marked this pull request as draft November 28, 2024 14:10
Typescript cant be updated due to incompatibility with vue-tsc.
@rouk1 rouk1 mentioned this pull request Nov 28, 2024
6 tasks
Copy link
Contributor

github-actions bot commented Nov 28, 2024

Coverage Report for ./skore-ui

Status Category Percentage Covered / Total
🔵 Lines 81.34% 2211 / 2718
🔵 Statements 81.34% 2211 / 2718
🔵 Functions 45.6% 57 / 125
🔵 Branches 81.99% 214 / 261
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
skore-ui/src/App.vue 0% 0% 0% 0% 1-43
skore-ui/src/router.ts 100% 100% 0% 100%
skore-ui/src/components/AppToolbar.vue 0% 0% 0% 0% 1-13
skore-ui/src/components/DraggableList.vue 100% 100% 100% 100%
skore-ui/src/components/LoadingBars.vue 0% 0% 0% 0% 1-2
skore-ui/src/components/NavigationButton.vue 0% 0% 0% 0% 1-24
skore-ui/src/components/SectionHeader.vue 85% 50% 0% 85% 1, 21-22
skore-ui/src/components/icons/SkoreLogo.vue 100% 100% 100% 100%
skore-ui/src/views/ActivityFeedView.vue 100% 100% 100% 100%
skore-ui/src/views/ComponentsView.vue 84.65% 100% 0% 84.65% 38-48, 54-79, 166-195, 199-208, 221-225, 229-235
skore-ui/src/views/project/ProjectView.vue 80.31% 83.33% 0% 80.31% 31-55, 62, 93-94
Generated in workflow #1281 for commit d27ee88 by the Vitest Coverage Report Action

rouk1 and others added 5 commits November 28, 2024 15:43
All missing values from pandas dataframe will now be displayed with a
fallback string "missing value" in the UI.
![Screenshot 2024-11-26 at 16 37
48](https://github.com/user-attachments/assets/72dd0db3-c230-4ad9-9626-d0439727b2c6)

---------

Co-authored-by: Thomas S. <thomas@probabl.ai>
@thomass-dev
Copy link
Collaborator

PR automatically closed because we have rebased the main branch in order to clean the documentation commits.
Replaced by #848.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Activity feed
9 participants