Implement and enhance search UI

[Haile-08]

Fixed Issue #3804

Search UI Enhancement

Behavior Before Fix

Currently, on clicking the search bar in the website , a new search box is created which is slightly larger than the original search box and overlaps with the pre-existing one , which does not look very useful or necessary in the UI.

orginal.webm

Behavior After Fix

Remove the current functionality of creating a new search box and use the existing default search box to search blocks. If the size doesn't seem sufficient , the increase of the size of the entire left palette can be proposed.

fix.webm

Edited File Location

MUSICBLOCKS
├── CSS
│   ├── activities.css

Edited Code

#search[type="text"] {
  width: 80px;
  box-sizing: border-box;
  position: absolute;
  background-color: white;
  background-repeat: no-repeat;
  padding: 6px 10px 6px 10px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  font-size: 16px;
  margin-top: 4px;
  color: black;
}

#search:focus {
  border: 1px solid #87cefa;
  border-radius: 1px;
}

Search Function Implementation

Behavior Before Fix

When inputting the search values on the search input, the values is not displayed on the palette body.

searchoriginal.webm

Behavior After Fix

Create a search index of block category and blocks in an object format. Capture the input using the event listener and filter the block using filter function.

searchfix.webm

Search function

Edited File Location

MUSICBLOCKS
├── js
│   ├── palette.js

Line 401

Edited Code

// Search for key using SEARCH INDEX
    searchBlock(){
        const search = docById("search");
        let result = [];
        search.addEventListener("input", e => {
            Object.keys(SEARCHINDEX).forEach(key => {
                if (e.target.value.toLowerCase() === key.slice(0, e.target.value.length)){
                    result[0]= SEARCHINDEX[key];
                }
            });
            this.showPalette(result[0]);
        });
    }

Search index

Edited File Location

MUSICBLOCKS
├── js
│   ├── turtledefs.js

Edited Code

let SEARCHINDEX;

SEARCHINDEX = {
    "note": "rhythm",
    "note value drum": "rhythm",
    "silence": "rhythm",
    "tie": "rhythm",
    "note value": "rhythm",
    "meter": "meter",
    "beats per minute": "meter",
    "master beats per minute": "meter",
    "on every note do": "meter",
    "on every beat do": "meter",
    "notes played": "meter",
    "whole notes played": "meter",
    "beat count": "meter",
}

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

[pikurasa]

I like the general direction of this. However, some feedback:

• The search functionality does not seem to be as good as what we have now. For example, on the master branch, if I type "ward", I can see the forward block. I can also see the backward block. With your method, I don't get any results.
• I like that, with your method, you can see which palette a block you are searching for is in, but, if you search for "ward", for example, "forward" and "backward" are in two different palettes.
• Right now, your method doesn't highlight where the block is within the palette. In beginner mode this may not be an issue, but it is in advanced mode.
• Also, when you are in beginner mode and search for an advanced mode block, it's nice that it is accessible via the search widget. For example, if I search for "no clock" on your branch, I don't see anything, whereas I can access the block via search from the main branch.

[Haile-08]

@pikurasa I would love to work on the search function but am limited in my understanding of the project code base. Is okay if I ask you how the search palette works on a DM? only if your free or point me to someone who know that part :)

[Haile-08]

@pikurasa My general idea was to search for the value and find the category of that value like rhythm. Then displayed the value on the palette body of that category but I found my way all the way to the palette body and I couldn't understand how the blocks were generated.

[walterbender]

Showing the block in situ on the palette is nice idea, but it will not always work: (1) sometimes the block is not actually on any palette (for example, searching for an advanced block from beginner mode); and (2) sometimes there may be a search result that appears in multiple places on either the same or different palettes (for example, searching for "note" should show multiple blocks on the Rhythm palette but also the "on every note do" block on the Meter palette.

[Haile-08]

@walterbender thanks for the clarification, while working on it I found a palette body for displaying the search value. I will look into the codebase more

[github-actions]

This pull request has been open for more than 60 days without any activity. It will be closed in 3 days unless the stale label is removed or commented on.

[github-actions]

Closed pull request due to inactivity for more than 63 days.