Data

Tools

Indexes

Applications

Experiments

Open Source Science

ml-lifecycle-visualization

Machine learning lifecycle visualization providing a checklist for steps necessary in a machine learning project

https://github.com/zbmed-semtec/ml-lifecycle-visualization

Science Score: 54.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ✓
    CITATION.cff file
    Found CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ○
    .zenodo.json file
  • ✓
    DOI references
    Found 3 DOI reference(s) in README
  • ✓
    Academic publication links
    Links to: zenodo.org
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (10.3%) to scientific vocabulary

Keywords from Contributors

doc2doc-relevance document-similarity ontoclue phase-one word-embeddings word-movers-distance bioschemas schemaorg smp vocabulary
Last synced: 6 months ago · JSON representation ·

Repository

Machine learning lifecycle visualization providing a checklist for steps necessary in a machine learning project

Basic Info
  • Host: GitHub
  • Owner: zbmed-semtec
  • License: gpl-3.0
  • Language: Vue
  • Default Branch: main
  • Homepage:
  • Size: 33.4 MB
Statistics
  • Stars: 0
  • Watchers: 3
  • Forks: 0
  • Open Issues: 0
  • Releases: 1
Created over 2 years ago · Last pushed 10 months ago
Metadata Files
Readme License Citation

README.md

ML Lifecycle Visualization

A reusable web component that visualizes the machine learning lifecycle. This component can be used in any web application, regardless of framework (React, Angular, Vue, or plain HTML).

Installation

bash npm install ml-lifecycle-visualization

Usage

In Plain HTML

html <!DOCTYPE html> <html> <head> <title>ML Lifecycle Visualization Example</title> <!-- Import Vue as a dependency --> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <!-- Import the component --> <script src="https://unpkg.com/ml-lifecycle-visualization/dist/ml-lifecycle-visualization.umd.js"></script> </head> <body> <!-- Use the component --> <ml-lifecycle-visualization></ml-lifecycle-visualization> </body> </html>

In React

```jsx import React, { useEffect } from 'react'; import { initMLLifecycleComponent } from 'ml-lifecycle-visualization';

function MLLifecycleWrapper() { useEffect(() => { // Initialize the component initMLLifecycleComponent(); }, []);

return ; }

export default MLLifecycleWrapper; ```

In Vue

```vue

```

In Angular

```typescript // Component import { Component, OnInit } from '@angular/core'; import { initMLLifecycleComponent } from 'ml-lifecycle-visualization';

@Component({ selector: 'app-ml-lifecycle', template: '', }) export class MLLifecycleComponent implements OnInit { ngOnInit() { initMLLifecycleComponent(); } }

// Module - you need to add CUSTOMELEMENTSSCHEMA import { NgModule, CUSTOMELEMENTSSCHEMA } from '@angular/core';

@NgModule({ declarations: [MLLifecycleComponent], schemas: [CUSTOMELEMENTSSCHEMA] // Required for custom elements }) export class AppModule { } ```

Development

```bash

Install dependencies

npm install

Run development server

npm run dev

Build for production

npm run build ```

License

MIT

ML-lifecycle-visualization

DOI Release

Machine learning lifecycle visualization providing a checklist for steps necessary in a machine learning project.\

Editing data

The content of the graph and table are managed in a Google Sheets document. To edit the data, simply head to the mentioned Google Sheets Document.

The document is split into three sheets.

Lifecycle info

This is the general lifecycle info for each step, edited data will be present in the table component of its assigned NodeID.

Nodes

This sheet contains general information on the step nodes, each node must have a description and optionally have outcomes and additional notes. Edited data will appear in the step node modals.

Edges

The edge sheet, stores data on the transitions between two steps: start-step, end-step, description, it is important to note here that editing the edge data does not edit the graph structure, it merely edits the next steps as shown on the start-step's modal.

Editing the graph

In case you would like to edit the graph such as adding or removing new nodes, repositioning entires or editing connections between nodes, head to the second page of the graph editor document. There you can edit the graph by adding, moving or removing nodes and edges, not the content itself. Note that the web-app does yet not support displaying edge data on the graph itself, so refrain from adding text associated to the edges, as seen on page 1 of the graph.

Once you have completed the edit, export the graph as an SVG file under File > Export > SVG..., save it as ML_lifecycle.svg and replace the existing exist in the project's directory: ML-lifecycle-visualization > src > assets > ML_lifecycle.svg.

In case your edit resulted in the deletion or addition of a node or edge, make sure to follow the steps mentioned in Editing data, to update the graph's information accordingly.

Project Setup

Make sure to have Node.js version 18 installed on your machine, and set it as the default version in your terminal. We recommend using nvm if you have multiple versions of node installed, here is a tutorial.

sh npm install

Compile and Hot-Reload for Development

sh npm run dev

Type-Check, Compile and Minify for Production

sh npm run build

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension 1) Run Extensions: Show Built-in Extensions from VSCode's command palette 2) Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Owner

  • Name: zbmed-semtec
  • Login: zbmed-semtec
  • Kind: organization

Citation (CITATION.cff) 

cff-version: 1.2.0
message: "If you use this repository, please cite it as below."
title: "ML-lifecycle-visualization"
authors:
- family-names: "Luciani"
  given-names: "Aurélien"
  orcid: "https://orcid.org/0000-0003-3175-8394"
- family-names: "Geist"
  given-names: "Lukas"
  orcid: "https://orcid.org/0000-0002-2910-7982"
- family-names: "Quiñones"
  given-names: "Nelson"
  orcid: "https://orcid.org/0000-0002-5037-0443"
- family-names: "Solanki"
  given-names: "Dhwani"
  orcid: "https://orcid.org/0009-0004-1529-0095"
- family-names: "Ravinder"
  given-names: "Rohitha"
  orcid: "https://orcid.org/0009-0004-4484-6283"
- family-names: "Castro"
  given-names: "Leyla Jael"
  orcid: "https://orcid.org/0000-0003-3986-0510"
- family-names: "Rebholz-Schuhmann"
  given-names: "Dietrich"
  orcid: "https://orcid.org/0000-0002-1018-0370"
version: 0.0.1
license: GPL-3.0-or-later
copyright: "ZB MED"
url: "https://github.com/zbmed-semtec/ML-lifecycle-visualization"

GitHub Events

Total
  • Delete event: 1
  • Push event: 3
  • Public event: 1
  • Pull request event: 2
  • Create event: 2
Last Year
  • Delete event: 1
  • Push event: 3
  • Public event: 1
  • Pull request event: 2
  • Create event: 2

Committers

Last synced: 10 months ago

All Time
  • Total Commits: 88
  • Total Committers: 6
  • Avg Commits per committer: 14.667
  • Development Distribution Score (DDS): 0.58
Past Year
  • Commits: 16
  • Committers: 2
  • Avg Commits per committer: 8.0
  • Development Distribution Score (DDS): 0.063
Top Committers
Name Email Commits
Lukas l****1@h****e 37
bit2424 n****4@g****m 25
rohitharavinder r****2@g****m 11
Aurélien Luciani a****l 8
Dhwanisolanki12 d****8@g****m 6
ljgarcia l****a 1
Committer Domains (Top 20 + Academic)
hotmail.de: 1

Issues and Pull Requests

Last synced: 10 months ago

All Time
  • Total issues: 2
  • Total pull requests: 1
  • Average time to close issues: 4 days
  • Average time to close pull requests: 1 minute
  • Total issue authors: 2
  • Total pull request authors: 1
  • Average comments per issue: 1.0
  • Average comments per pull request: 0.0
  • Merged pull requests: 1
  • Bot issues: 0
  • Bot pull requests: 0
Past Year
  • Issues: 0
  • Pull requests: 1
  • Average time to close issues: N/A
  • Average time to close pull requests: 1 minute
  • Issue authors: 0
  • Pull request authors: 1
  • Average comments per issue: 0
  • Average comments per pull request: 0.0
  • Merged pull requests: 1
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
  • ljgarcia (1)
  • Two-Kay (1)
Pull Request Authors
  • ljgarcia (2)
Top Labels
Issue Labels
Pull Request Labels

Dependencies

package-lock.json npm
  • 111 dependencies
package.json npm
  • @tsconfig/node18 ^18.2.2 development
  • @types/bootstrap ^5.2.10 development
  • @types/color-convert ^2.0.3 development
  • @types/node ^18.18.5 development
  • @types/papaparse ^5.3.14 development
  • @vitejs/plugin-vue ^4.4.0 development
  • @vue/tsconfig ^0.4.0 development
  • npm-run-all2 ^6.1.1 development
  • typescript ~5.2.0 development
  • vite ^4.4.11 development
  • vue-tsc ^1.8.19 development
  • bootstrap ^5.3.2
  • color-convert ^2.0.1
  • papaparse ^5.4.1
  • vite-svg-loader ^5.1.0
  • vue ^3.3.4