Arhn - архитектура программирования

Добавьте эффекты, например всплывающая подсказка к одной (большой) сюжетной таблице?

Я новичок в программировании. У меня довольно большой опыт работы с R. Я изо всех сил пытаюсь создать большую таблицу, в которой содержимое ячейки будет расширяться из-за наведения курсора мыши на соответствующую ячейку. Это похоже на то, что предлагается в этом другом вопросе: Показывать всплывающую подсказку или всплывающее окно в Shiny datatables для каждой ячейки?

Однако в этом другом примере используются две таблицы, где Таблица 2 используется в качестве справочной информации для содержимого ячеек всплывающей подсказки, и обе показаны. Я бы хотел, чтобы была видна только одна таблица, что сделало бы большой стол более тонким.

Я создал приведенный ниже пример в виде небольшой таблицы и опорных векторов, содержащих дополнительную информацию для наведения курсора на соответствующие столбцы. Надеюсь, этого будет достаточно для разрешения проблемы?

Как я могу реализовать всплывающую подсказку для отображения содержимого опорных векторов при наведении курсора мыши на соответствующие ячейки?

library(plotly)
#Preparing the dataset
SeqName<-c("1", "2", "3", "4", "5", "6")
Length<-c("440", "511", "1087", "686", "867", "632")
Cys<-c("3", "2", "2", "2", "2", "4")
NT<-c("[NA]", "[B]", "[B]", "[B]", "[B]", "[B]")
NR<-c("[NA]", "[B][M]", "[B]", "[B][M]", "[B][M]", "[NA]")
RefSeq<-c("[NA]", "[B][M]", "[B]", "[B][M]", "[B][M]", "[NA]")
data<-data.frame(SeqName, Length, Cys, NT, NR, RefSeq)

#making the table from the dataset
plot_ly(type="table",header=list(values=names(data)), cells=list(values=unname(data)))

#Text for tooltip to work on relevant columns
NT_info<-c("---NA---", "Solenopsis invicta uncharacterized LOC105206585 (LOC105206585) mRNA", "Pogonomyrmex barbatus glucose transporter type 1 (LOC105425888) transcript variant mRNA", "Solenopsis invicta RNA-directed DNA polymerase from mobile element jockey-like (LOC105204251) mRNA", "Solenopsis invicta uncharacterized LOC105205677 (LOC105205677) mRNA", "Zebrafish DNA sequence from clone DKEY-103J14 in linkage group complete sequence"),
NR_info<-c("---NA---", "PREDICTED: uncharacterized protein LOC105206585, partial", "glucose transporter type 1 isoform X7", "RNA-directed DNA polymerase from mobile element jockey-like", "rna-directed dna polymerase from mobile element jockey", "---NA---")
RefSeq_info<-c("---NA---", "---NA---", "GTR1_DROME Glucose transporter type 1 OS=Drosophila melanogaster GN=Glut1 PE=2 SV=4", "---NA---", "---NA---", "---NA---")   

Я не могу понять, как создать всплывающую подсказку для этой таблицы, извлекая информацию из соответствующих векторов '* _info'. Пожалуйста помоги? Заранее спасибо.

24.07.2018

Ответы:


1

Если я правильно понимаю, ваша проблема с этим решением заключается в том, что в приложении отображаются обе таблицы - та, которую вы хотите показать, и та, которая содержит всплывающие подсказки. В этом случае решение вашей проблемы состоит в том, чтобы использовать точно такой же подход, но просто скрыть таблицу с содержимым всплывающей подсказки. Адаптированный код с вашими данными ниже:

library(shiny)
library(DT)

shinyApp(

  ui = fluidPage(

    shiny::tags$head(shiny::tags$style(HTML("
                                            #tableWithHoverData {
                                            visibility: hidden;
                                            height: 1px !important;
                                            }
                                            #tableWithHoverData * {
                                            visibility: hidden;
                                            height: 1px !important;
                                            }
                                            "))
    ),

    dataTableOutput('mytable'),
    dataTableOutput('tableWithHoverData'),
    p("Text below table, 'tableWithHoverData' does not occupy space")
    ),

  server = function(session, input, output) {

    SeqName<-c("1", "2", "3", "4", "5", "6")
    Length<-c("440", "511", "1087", "686", "867", "632")
    Cys<-c("3", "2", "2", "2", "2", "4")
    NT<-c("[NA]", "[B]", "[B]", "[B]", "[B]", "[B]")
    NR<-c("[NA]", "[B][M]", "[B]", "[B][M]", "[B][M]", "[NA]")
    RefSeq<-c("[NA]", "[B][M]", "[B]", "[B][M]", "[B][M]", "[NA]")

    table_show <- data.frame(SeqName, Length, Cys, NT, NR, RefSeq)

    NT_info<-c("---NA---", "Solenopsis invicta uncharacterized LOC105206585 (LOC105206585) mRNA", "Pogonomyrmex barbatus glucose transporter type 1 (LOC105425888) transcript variant mRNA", "Solenopsis invicta RNA-directed DNA polymerase from mobile element jockey-like (LOC105204251) mRNA", "Solenopsis invicta uncharacterized LOC105205677 (LOC105205677) mRNA", "Zebrafish DNA sequence from clone DKEY-103J14 in linkage group complete sequence")
    NR_info<-c("---NA---", "PREDICTED: uncharacterized protein LOC105206585, partial", "glucose transporter type 1 isoform X7", "RNA-directed DNA polymerase from mobile element jockey-like", "rna-directed dna polymerase from mobile element jockey", "---NA---")
    RefSeq_info<-c("---NA---", "---NA---", "GTR1_DROME Glucose transporter type 1 OS=Drosophila melanogaster GN=Glut1 PE=2 SV=4", "---NA---", "---NA---", "---NA---")   

    # for columns where you don't want hover, add NAs
    table_tooltip <- data.frame(rep(NA, 6), rep(NA, 6), rep(NA, 6), NT_info, NR_info, RefSeq_info)

    observeEvent(input$hoveredCellInfo, {
      info <- input$hoveredCellInfo
      content <- as.character(table2[info$row, info$column])
    })

    output$mytable <- renderDataTable({
      datatable(table_show, rownames = F,
                callback = JS("
                              table.on('mouseenter', 'tbody td', function() {
                              var column = $(this).index();
                              var hover_row = $(this).parent().index();
                              var correct_row = $('#mytable').find('tbody tr').eq(hover_row).children().first().text() - 1;

                              var dataFromOtherTable = $('#tableWithHoverData').find('tbody tr').eq(correct_row).find('td').eq(column).text();

                              this.setAttribute('title', dataFromOtherTable);
                              });

                              return table;
                              ")
                )
  })

    output$tableWithHoverData <- renderDataTable({
      datatable(table_tooltip, rownames = F)
    })
  }
      )

Вы также можете поместить CSS с кодом, чтобы скрыть «таблицу всплывающих подсказок» в отдельный файл, см. здесь.

27.07.2018
  • Приятно спасибо! Однако я обнаружил две проблемы: (i) отображаемая таблица сортируется, таблица всплывающих подсказок остается статичной, поэтому ссылка теряется; (ii) если я опубликую это где-нибудь в другом месте (например, в научном журнале), внизу всегда будет потребность в пустом месте. 27.07.2018
  • Знаете ли вы, как «синхронизировать» сортировку и поиск между двумя таблицами? 27.07.2018
  • @ Ученый Хорошие замечания. Проблема (ii) может быть решена установкой высоты tableWithHoverData (и его дочерних элементов). Проблема (i) может быть решена путем изменения селектора jquery. Посмотрите мою правку, проверьте, работает ли она сейчас. важное примечание: это решение полагается на первый столбец (SeqName), имеющий исходное значение индекса (1-6) - он используется для извлечения содержимого из «таблицы всплывающих подсказок». При необходимости вы можете переименовать его, но он должен оставаться там. 27.07.2018
  • Привет! Работает хорошо, спасибо !! Мне сложно реализовать это с самой большой таблицей, но я думаю, что в конце концов я это сделаю. (Боюсь, слишком большой, чтобы отправлять в SE переполнение! ..). Спасибо! 28.07.2018
  • У меня все еще есть сомнение, которое я не могу решить. Если в таблицах более одной страницы, я не могу получить информацию всплывающей подсказки для записей на других страницах! .. Моя таблица очень большая, то есть длинная 28.07.2018
  • @Scientist renderDataTable отображает только видимые строки на веб-странице (откройте приложение в браузере и перейдите в просмотреть исходный код страницы для проверки). Чтобы использовать многостраничные таблицы, попробуйте одно из следующих действий: 1) Принудительно отобразить всю «таблицу всплывающих подсказок» с помощью параметры 2) Переместите определение содержания всплывающей подсказки в javascript файл и загрузите его оттуда 29.07.2018
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..