kobra-dev/kobra

Kobra is a visual programming language (like Scratch) for Machine Learning

kobra's Issues

Set Theme is not reversible

You cannot switch from Dark theme to light theme. We need to check the theme in componentDidMount before switching.

Data Visualization

We should make it possible to visualize quantitative data in one of the boxes. the user should be able to select the two variables they want to graph. lmk if either of you are interested in working on this @Merlin04 @abstractultra

Add default values for all blocks

"Blockly shouldn't have a
concept of syntax errors" - someone on the Blockly Google Group

We can use shadow blocks to add default values to everything to get as close as possible to being able to guarantee that your code will run and not throw an error no matter what. This also helps with documentation, it shows the user what input types a block accepts.

Exception lookup

We should make a page in the app where you can look up exceptions to see what caused them. The exceptions printed in the console can be links to the page.

Switch to nextjs-auth0

https://github.com/auth0/nextjs-auth0

This works better with Next.js and seems like it is easier to use. I think it uses sessions on the server too

Get rid of netlify badge

It seems like we aren't actually using Netlify, so it should be removed

Consider switching to pxt-blockly

https://github.com/microsoft/pxt-blockly

pxt-blockly is the fork of Blockly used in PXT/MakeCode. Switching to it would provide us with a lot of PXT's features like a more modern UI and some new blocks, but wouldn't require adopting the entirety of PXT. I am not sure how easy this would be as we use Blockly through a react wrapper but it is something to look into.

Other custom blocks documentation

Documentation for these categories:

• DataFrames
• Plots

The number conversion for some datasets fails

See kobra-dev/datasets-api#15 for more details on what this bug entails.

Reduce duplication in _block.ts files

I'm finding that there's a lot of duplicate code in the _block.ts files, to make the one for RFRegression I just duplicated the RFClassifier one and changed the names. Any ideas on how we could reduce the amount of duplication?

Block: LinearRegression(X, y)

Block Name: LinearRegression
Block Category: SciKit Learn
Block input: X, y (which the regression in fitted to)
Block Function: fits a linear regression to the dataset

Fix inconsistent indentation width

Some files use 2 spaces to indent but others use 4. We should decide on one to use throughout the project and reformat all of the files.

Dispose workspace to avoid memory leak

https://groups.google.com/g/blockly/c/kO73J-XImMw
Currently we do not call dispose before loading the new workspace XML.

model.predict(X,y)

Block Name: predict
Block Category: sklearn
Block input: method of model object (what is returned by the LinearRegression function)
Block Function: generates a prediction for a new input based on a previously trained model

Remove the Material UI Icons

Since the beginning of the project, we have been using material UI for all of the components related to the editor,

Material UI is a great library that provides great components and has served us for a really long time and has helped us to be more consistent with our design system, For the sake of the performance of the app, material UI isn't that great.

We need to keep the app as low level as possible to improve the performance and load speed. I think we can try using native CSS instead of a huge library like Material UI which weighs.

• @material/core -> 329.1 KB
• @material/icons -> 2.2MB
• @material/lab -> 71.6KB

If we can remove material UI from the app we shall save more than 3MB of the bundle size, I know this is not what we are focused on right now but we should in the next months.

A good alternative that we can use is tailwindcss since its just low-level CSS abstracted into utility classes.

To make our design system we can use storybooks and this should keep us more consistent.

Disable Dark Mode

Given the dark mode bug that we are running into, we should disable dark mode and only have light mode, and debug this later

Block: pd.read_csv(dataset)

Block Name: pd.read_csv
Block Category: Pandas
Block input: dropdown of datasets we support
Block Function: reads in a csv, and converts it to a dataframe object

logr_create: Data must be a 2D array with at least one element

This code (generated by Blockly):

function listsRepeat(value, n) {
  var array = [];
  for (var i = 0; i < n; i++) {
    array[i] = value;
  }
  return array;
}


highlightBlock('d2tbR+HWxg}g`YwU$}Za');
logr_create((listsRepeat(0, 100)), (listsRepeat(1, 100)));

Produces this error in the console:

EXCEPTION
Block type: logr_create
TypeError: Data must be a 2D array with at least one element

Machine Learning blocks documentation

Add documentation:

• explaining what each ML algorithm/model is
• how to use the blocks in general
• any special parameters a model might have (like k value for KNN)

Modify libraries (DataFrame specifically) to not modify variables

Currently the way that some functions in libraries (like DataFrame.loc) work is that they modify this. When this happens the Blockly variable won't get updated unless we specifically tell it to. In addition, it isn't very clear to the user that the block is modifying the variable.

We need to modify these functions to return a new object (a copy of this) with the transformation/other thing applied to it.

Dataset Loading

Be able to load our datasets into Kobra

When input dimensions to ML blocks are incorrect throw a useful error

This generated code:

function listsRepeat(value, n) {
  var array = [];
  for (var i = 0; i < n; i++) {
    array[i] = value;
  }
  return array;
}


highlightBlock('DOGb_9%xj{j3ea^7Ssbl');
knn_fit((knn_create((listsRepeat(0, 100)), (listsRepeat(1, 100)))), 0.2);

Produces this error:

EXCEPTION
Block type: knn_fit
TypeError: dataset[i].slice is not a function

Start documentation

• Choose documentation system (gitbook, GitHub Wiki, markdown files in repo, pages in app, etc)
• Decide on scope of documentation - will we have examples? Will it explain what each block does?
• Decide on integration - should the docs be integrated with the app or a completely separate site? If so, how?

Writting Tests

To prevent the stuff from being broken unknowingly for sure this project needs tests. like when someone opens a PR we need tests to run checking if there isn't anything broken or if we do any modification we need to be sure we didn't break anything

Talking about tests we can do unit tests and integration tests.

Loading datasets

Allowing the user to use datasets we collected and potentially their own. @Merlin04 we'll work together on this

Update README logo

Drag and drop/resizable panels

We should use something like https://github.com/STRML/react-grid-layout to be able to resize and move panels. In situations when the graph is really important to view the results of the code you might want to make everything else smaller.

EXCEPTION TypeError: SimpleLinearRegression is not a constructor

When running a simple linear Regression, we get the error in the title :/ I think this is because require only works in node

Set colors for blocks

Currently there aren't any colors specified for the custom blocks, this should be added to differentiate blocks from different categories and to help them look like the other blocks.

Dark mode

Add option for dark mode. Blockly has a dark theme which can be toggled on and off, we just need to add the button in the UI and add css to set the rest of the UI.

Fix code scanning alert - Incomplete string escaping or encoding

Tracking issue for:

• https://github.com/kobra-dev/Kobra/security/code-scanning/1

Replace default icons

public/assets/icon.png and favicon.png need to be replaced with the kobra logo

Setup tests

Help us write tests for Kobra. Here is a checklist for all tests we want to integrate into Kobra. If you aren't sure how to write good tests with cypress check this out.

• Login with email and password
• Can log in with google
• Can log in with GitHub
• Logout works
• Can create a project
• Can delete a project
• Can share a project
• Can fork a project
• Can create and Run a model with each ML algorithm supported

Make blocks functional

Make compilation to JS for blocks work

Be able to run a fork of another user's project without uploading a new dataset

Is your feature request related to a problem? Please describe.
When you fork a project by another user you can't run the project because the dataset doesn't belong to you!

Describe the solution you'd like
Update database model so users can get access to datasets they haven't uploaded by made public by their owners

Block: dataframe.loc(columnA,columnB,columnC,etc.)

Block Name: loc
Block Category: Pandas
Block input: method of the dataframe object, and takes in as many inputs as the user desires for column names in the dataset
Block Function: selects desired columns from dataframe

Change some shadow blocks to regular blocks

The plus minus mutators don't work with shadow blocks, and their behavior can be confusing for anything more complicated than a simple string or number. We should change shadow blocks that aren't working correctly to regular blocks so they can be mutated and removed if necessary. This would involve adding additional checks for undefined values as it is now possible to pass in an empty value, or alternatively we could replace the shadow blocks with simpler ones but still keep the current shadow blocks as regular blocks connected to the other block.

Default blocks documentation

Documentation for all the Blockly default blocks. Blockly might already have docs somewhere so we might be able to use that.

1D Matrices causing an error

@Merlin04 can you take a look at this

Console

Add console widget which has run button and output of program, as well as input field. This should also display errors.

Remove dependencies dependency

We have a dependency in our package.json called dependencies, I think this was added by accident. I looked at it and it doesn't appear to be anything harmful but it's not anything we are using either (only one version was ever released and only 7 npm packages depend on it). We should remove it.

Editor does not appear until the size of the window is changed

@Merlin04 @abstractultra Could you take a look at this? Is it an issue with the editor component from react-blockly?

Add placeholder graph image when no plot is displayed

Currently there is just placeholder text when no plot is being displayed in the DataView, ideally this would have some kind of placeholder graphic as well.

Improve CSV parsing in DataFrame

Kobra/src/blocks/DataFrame.ts

Line 18 in 73ad2c1

let data: any[] = dataStr.split("\n");

Right now, we use String.split to parse CSVs, which isn't the best way to do it because it doesn't handle escaped values, newlines, or other variations on the CSV format (like TSV). We should use something like Papa Parse (what I use in better-react-spreadsheet) to do parsing for us.

Convert Matrix code to TypeScript

Not important anytime soon, just creating an issue so we dont forget

Loading Screen

Loading screen when the editor is loading

Switch CSS to useStyles

Right now we use regular CSS files to style the components. Material-UI provides a styling system called useStyles that is a lot more flexible and better integrated with JS.

Fix CI

Right now the CI is broken (probably because it has the wrong environment variables).

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid packageRules[0].schedule: 'Invalid schedule: Failed to parse "Mondaychedule:earlyMonday"'