Week 8(July 17- July 23): Presenting features to #dsomm community

On July 24th, I am supposed to present all the new features that I have worked on to the Open source community of #dsomm. I am really excited.

Daniela Buchwald and Sarah joined the meeting and gave us some valuable insights

Till now, I have worked on three main features in the DSOMM(DevSec Ops Maturity Model) project.

1. Matrix View Filter: Updated MatChip to toggle switches so that it is more intuitive for the user and it is clearly visible which tags are not visible. Also, added an Activity Tag filter, which filters out activities in the matrix based on tags(tags are also visible under the activity and on the task description page).
2. Heatmap Overlay: Currently, in the heatmap section when the user wants to take a look at the task description, a new page is opened which breaks contact with the heatmap. I have implemented an overlay that will pop open when clicked on the task. This makes it easier to read and also maintains the touch with the heatmap.
3. Team-Based Assessment: Although this feature is still under development, I was able to finish a few micro-features under it. Now, on the heatmap, instead of selecting a checkbox across a task, team-based selection can be made and the same will be reflected on the heatmap.

Team-based assessment

Challenges

To implement the team-based assessment in Heatmap, I faced a few challenges on the way.

• Change in the structure of generated.yaml file. After discussing with my mentors we agreed upon an updated YAML structure. Now data that contains the team name and a boolean value(depicting if that team has completed the task or not) needs to be accessed.
• After the schema was defined, I still couldn’t see the changes in the console. Timo and Aryan(my mentors) pointed out that this could be due to local storage saved in the browser. After clearing it out, the new data was easily accessible.
• Later on, I developed a UI that can incorporate these team lists. Added expansion panel on the task so that it doesn’t get cluttered.
• Now, upon making a change in UI this change should update the heatmap. Specifically, when a checkbox is clicked %done variable(that is responsible for the amount of green color) should be updated. For that, I coded a function named teamCheckbox that will loop through the data and calculate the percentage of checked boxes, and will fill the color accordingly. Check out the example code below

teamCheckbox(taskIndex: number, teamKey: any) {
    let _self = this;
    var index = 0;
    var cntTrue = 0;
    var cntAll = 0;
    for (var i = 0; i < this.ALL_CARD_DATA.length; i++) {
      if (
        this.ALL_CARD_DATA[i]['SubDimension'] === this.cardHeader &&
        this.ALL_CARD_DATA[i]['Level'] === this.cardSubheader
      ) {
        index = i;
        break;
      }
    }

    this.ALL_CARD_DATA[index]['Task'][taskIndex]['teamsImplemented'][teamKey] =
      !this.ALL_CARD_DATA[index]['Task'][taskIndex]['teamsImplemented'][
        teamKey
      ];
    // Working on %done
    // Creating counter for %done
    for (var i = 0; i < this.ALL_CARD_DATA[index]['Task'].length; i++) {
      console.log(this.ALL_CARD_DATA[index]['Task'][i]['ifTaskDone']);

      var teamList: any;
      teamList = this.ALL_CARD_DATA[index]['Task'][i]['teamsImplemented'];
      (Object.keys(teamList) as (keyof typeof teamList)[]).forEach(
        (key, index) => {
          if (teamList[key] === true) {
            console.log(key, ' is true');
            cntTrue += 1;
          }
          cntAll += 1;
        }
      );
    }

    this.ALL_CARD_DATA[index]['Done%'] = cntTrue / cntAll;
    console.log(this.ALL_CARD_DATA[index]['Done%'], cntTrue);
    var color = d3
      .scaleLinear<string, string>()
      .domain([0, 1])
      .range(['white', 'green']);

    d3.selectAll(
      '#segment-' +
        this.ALL_CARD_DATA[index]['SubDimension'].replace(/ /g, '-') +
        '-' +
        this.ALL_CARD_DATA[index]['Level'].replace(' ', '-')
    ).attr('fill', function (p) {
      return color(_self.ALL_CARD_DATA[index]['Done%']);
    });
    this.saveState();
  }

Tasks remaining

• In the heatmap overlay, add an expansion panel that will show the tags associated with that task
• Currently, the team list is being accessed from generated.yaml file, instead, it should be taken from meta.yaml file.
• Add evidence expansion panel in the overlay
• Implement filter for team-based assessment

Connect with me :)

dotCard | Twitter | LinkedIn | GitHub