Fancy glycans

[douweschulte]

• Be able to show the glycan structure when searching or displaying a specific GNO mod
• Be able to show glycan fragments as their constituent monosaccharides (no B2Y4 but Hex1HexNac1 as ●■ (in the correct colours)).
• Be able to build a glycan for matching in the spectrum (so click and drag kind of thing to build a structure from scratch, and be able to annotate this)

Below example code is the basic structure for glycan structures using HTML + CSS anchor positioning (so only works in chrome -> windows).

<!-- ▲◆●-->
<div class="glycan">
  <span class="ms">
    <span class="sug blue" style="anchor-name:--link-sug-0-0">■</span>
    <span class="branches c2" style="achor-name:--link-branches-0">
      <span class="ms">
        <span id="link" class="sug green" style="anchor-name: --link-sug-1-0">●</span>
        <span class="branches">
        </span>
      </span>
      <span class="ms">
        <span class="sug green">●</span>
        <span class="branches c2">
        </span>
      </span>
    </span>
  </span>
</div>
<!-- <div class="glycan">
  <span class="ms">
    <span class="sug blue">■</span>
    <span class="branches">
      <span class="ms">
        <span class="sug blue">■</span>
        <span class="branches c2">
          <span class="ms">
            <span class="sug green">●</span>
            <span class="branches">
              <span class="ms">
                <span class="sug green">●</span>
                <span class="branches">
                  <span class="ms">
                    <span class="sug green">●</span>
                    <span class="branches">
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
          <span class="ms">
            <span class="sug green">●</span>
            <span class="branches c2">
              <span class="ms">
                <span class="sug green">●</span>
                <span class="branches">
                </span>
              </span>
              <span class="ms">
                <span class="sug green">●</span>
                <span class="branches">
                </span>
              </span>
            </span>
          </span>
        </span>
      </span>
    </span>
  </span>
</div> -->

:root {
  --fs: 2rem;
  --w: 1px;
  --lh: 0.7;
}

.glycan {
  font-size: var(--fs);
}

.glycan,
.ms {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-items: middle;
  margin: 0;
  padding: 0;
}

.branches {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

.white {
  color: white;
}

.blue {
  color: rgb(0 114 188);
}

.green {
  color: rgb(0 166 81);
}

.yellow {
  color: rgb(255 212 0);
}

.light-blue {
  color: rgb(143 204 233);
}

/*
Pink	0/47/24/0	246/158/161
Purple	38/88/0/0	165/67/153
Brown	32/48/76/13	161/122/77
Orange	0/65/100/0	244/121/32
Red	0/100/100/0	237/28/36
 */

.sug {
  position: relative;
  line-height: var(--lh);
  anchor-name: --link-sug;
}

.branches {
  anchor-name: --link-branches;
}

#link::before {
  content: "";
  width: auto;
  background: red;
/*   height: calc(var(--lh) * var(--fs) * var(--f, 1)); */
  min-height: 10px;
  /* top: calc((1 - var(--lh)) * var(--fs)); */
  /* left: 50%; */
  position: fixed;
  z-index: -1;
  top: anchor(--link-sug-1-0 center);
  left: anchor(--link-sug-1-0 center);
  bottom: anchor(--link-sug-0-0 center);
  right: anchor(--link-sug-0-0 center);
  background: linear-gradient(to right top, transparent calc(50% - 1px), black calc(50% - 1px),  black calc(50% + 1px), transparent calc(50% + 1px))
}

/* 
.branches.c2>:nth-child(1)>.sug::before {
  rotate: -10deg;
  transform: translateX(2px);
}

.branches.c2>:nth-child(2)>.sug::before {
  rotate: 10deg;
  transform: translateX(calc(-2px + -1 * var(--w)));
}

.branches.c3>:nth-child(1)>.sug::before {
  rotate: -40deg;
  transform: translateX(8px);
  --f: 1.5;
}

.branches.c3>:nth-child(3)>.sug::before {
  rotate: 40deg;
  transform: translateX(calc(-8px + -1 * var(--w)));
  --f: 1.5;
} */