sausagetaste / dgu2020_covid_front Goto Github PK

Pagination이 있으므로 얻어오는 seq의 개수를 제한할 필요가 없어졌습니다.
또한 지도에 가능한 많은 데이터를 표시해야 하기 때문에 how_many 인자를 최대치로 설정할 필요가 있습니다.
그러므로 상단에 있는 "조회할 염기서열 개수 입력" 필드를 제거해 주시고, how_many의 인자로는 250을 넣어주세요.

infowindow는 가능해졌는데, 코드를 그대로 옮기려니 페이지 코드들이 너무 복잡해져서요..
추상화를 하긴 해야할 것 같습니다 ㅠㅠ 오늘 해서 pr 올리겠습니다!
내용 확인은 제 브랜치에서 map 페이지 확인하시면 됩니다!

또 push하고 확인해보니, 커밋이 과거 커밋들까지 해서 무려 20개가 쌓여 있네요...;;
squash로 합치려고 했지만 변동사항을 확인하기가 어려우실 것 같아서 아직 하진 않았는데요.. 혹시 해결방법 아시나요? ㅜㅜ
이번엔 Github Desktop으로 해서 최대한 변동을 줄여봤는데 이게 웬 날벼락인지..

1. src/pages/two_seq_comp.tsx 페이지의 레이아웃 디자인 좀 도와주실 수 있나요?
   유사도 표와 돌연변이 표 밑에 위험도 설명 카드를 추가했는데, 배치가 마음처럼 되지 않습니다 ㅠㅠ...
   제가 생각한 배치는 이 세가지입니다!
   
   참고만 해 주시고, 편하신 대로 해주세요! 뭐든 지금보단 나을거예요...

2. src/pages/single_seq.tsx 페이지에서 sequence를 입력하고 로딩 중일 때 스크롤을 내리면 아래 사진과 같이 검은 로딩 화면이 짤려 있는데

혹시 해결이 가능하실까요?
이건 반드시 해결해야 할 건 아니라, 시간 나시면 부탁드릴게요..!

이렇게만 해결되면 어느정도 마무리지어도 될 것 같습니다!

Django 서버를 안 켜두면 페이지가 온통 흰색으로 바뀌며 콘솔에 에러가 찍힘.
서버에 접속이 불가능하다면 적절한 에러메시지를 반환하도록 해야 함.
왜 Axios의 catch 함수에서는 서버 오프라인 에러는 잡아주지 않는 건지 의문이다.

지금 현재 받아오는 acc_id_list의 형태는

{
	"EPI_ISL_449476": {
          "simil_identity": 98.46424,
          "simil_bit_score": 1234,
      },
	"EPI_ISL_449475": {
          "simil_identity": 98.46,
          "simil_bit_score": 1230,
      },
	…
}

이러한 형식인데요. 이것을 이용해서 제가 구현하고자 하는 data는 다음과 같습니다.

Data = [ {index:1, seq_id: "EPI_ISL_449476", similarity: 98.46424, bitscore: 1234},
	{index:2, seq_id: "EPI_ISL_449475", similarity: 98.46, bitscore: 1230},
	…
	]

이렇게만 만들면 Bootstrap table을 구현할 수 있고, Bootstrap에서 제공하는 Expanded row와 sorting 기능을 이용할 수 있는데.. 쉽지 않더라고요.
Bootstrap이 아니더라도 table accordion 등의 기능을 이용하려면 다음과 같이 데이터를 정의해두는 게 좋을 것 같습니다. 지금의 테이블로 여러 시도를 해봤지만 다소 무리가 있는 듯 합니다.
그런데 주어진 acc_id_list가 이중 딕셔너리라서 사용하기가 조금 까다롭더라구요. 검색도 쉽지 않고 리액트에서는 배열 값 추가하는 것도 push가 안 된다고 하고… 딕셔너리 추가는 더더욱이 안되구요ㅠㅠ 정말 혼자 해결해서 기능 구현을 하려고 했는데 완전히 막혀버렸습니다.. 혹시 이 부분만 같이 고민해 주실 수 있으실까요? 저도 계속 고민하고, 해결되면 빠르게 마무리 짓도록 하겠습니다..!
(index라는 이름의 key는 굳이 필요한 건 아니지만 있다면 테이블을 짜기에 더 용이해서 넣어두었습니다.)

우선 늦어져서 굉장히 죄송합니다...
저희가 사용하는 InfoWindow는 google-maps-react 패키지에서 제공되는 컴포넌트를 사용하는 건데, 이 컴포넌트는 InfoWindow와 연결되는 Marker를 지정해주어야 합니다. (성민님의 경우는 널값을 지정해주었듯이요.)
하지만 저희는 Marker를 사용하는 게 아니라 Circle을 사용하기 때문에 사용이 힘들더라구요. 연동 자체가 안되어서요..
그래서 구글에서 제공하는 google.maps.infowindow를 사용해 보려 했습니다.
그런데 이것을 사용할 때 circle 변수명을 호출하기 때문에, circle 객체를 바로 리스트에 푸시하는 현재의 코드에서는 사용이 어렵다고 판단하였고
circle도 google-maps-react 패키지가 아닌 구글에서 제공하는 circle로 변경하며 변수명을 지정하려 했는데..
구글 제공 버전으로 변경하는 과정에서 여러 삽질을 하다가 막혔습니다.

https://stackoverflow.com/questions/6584358/google-maps-v3-adding-an-info-window-to-a-circle
https://stackoverflow.com/questions/20504214/google-maps-v3-setting-circle-to-setpositionplace
https://stackoverflow.com/questions/30012913/google-map-api-v3-add-multiple-infowindows

여기서 나오는 addListener event를 사용하고자 했는데 죄다 function으로 circle을 생성해서.. 어렵네요..
죄송하지만.. 이 부분에 대해서 같이 고민해주실 수 있나요? ㅜㅜ

우선 제가 생각해둔 해결방안은 다음과 같습니다.

1. 기준치를 넘어선 case들은 루트 등의 조치를 취해 밸런스를 조절한다.

• 물론 원래 작은 case들보다는 훨씬 크게 조정하긴 할건데, 이럴 경우 raw data가 왜곡되는 것이기 때문에 약간 꺼려집니다.

2. 지도를 한국 쪽으로 줌인해서 한국 주변 데이터에 집중하도록 한다.

• 지도가 확대된 상태이기 때문에 작은 원도 어느정도 크게 볼 수 있습니다. 하지만 줌아웃하면 결과는 지금과 같습니다.